Javascript Conditional Inside TypeScript Interface

Question

Is it possible to have a condition inside of an interface declaration in TypeScript. What I'm looking for is a way to say, based on the value of the first key, the second key can be these values.

Example (non functioning):

interface getSublistValue {

    /** The internal ID of the sublist. */
    sublistId: 'item' | 'partners';

    /** The internal ID of a sublist field. */
    if (this.sublistId === 'item') {
        fieldId: 'itemname' | 'quantity';
    }

    if (this.sublistId === 'partners') {
        fieldId: 'partnername' | 'location';
    }
}

David Sherret · Accepted Answer · 2017-05-27 18:08:28Z

25

No there's not. The best thing to do is to create separate interfaces that describe the two different types of data.

For example:

interface SublistItem {
    sublistId: 'item';
    fieldId: 'itemname' | 'quantity';
}

interface SublistPartners {
    sublistId: 'partners';
    fieldId: 'partnername' | 'location';
}

function getData(): SublistItem | SublistPartners {
    return (Math.random() < 0.5)
        ? { sublistId: 'item', fieldId: 'itemname' }
        : { sublistId: 'partners', fieldId: 'partnername' };
}

const someValue = getData();

if (someValue.sublistId === "item") {
    // SublistItem in here
}
else {
    // SublistPartners in here
}

edited May 27, 2017 at 18:08

answered May 27, 2017 at 1:12

David Sherret

108k28 gold badges197 silver badges190 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jon Lamb Over a year ago

So if I use this method when I'm creating the someValue object I still get all 4 options for fieldId with autocomplete, but at least it gives me a warning if the sublistId and fieldId don't match (i.e. 'item' and 'partnername'). The thing that gets me is that if my someValue is const someValue: SublistItem | SublistPartners = { sublistId: 'partners', fieldId: 'location' }; then I get a warning on the if (someValue.sublistId === 'item') {} condition saying that location is not itemname or quantity, I already know that, why would I get that warning?

David Sherret Over a year ago

@JonLamb hmmm... the error message displayed for that isn't helpful. In that case, it knows that sublistId will only be 'partners' and so it throws an error when you check for 'item'. If you replace 'item' with 'partners' then it will work. Try a scenario where you are receiving a value from somewhere and you're not sure what the data will be. I've updated the example.

Matthew Mullin · Accepted Answer · 2020-05-11 08:45:36Z

16

If you would like to completely separate out your interfaces you could do something like this:

eg. sublist.model.ts

interface SublistItem {
    sublistId: 'item';
    fieldId: 'itemname' | 'quantity';
}

interface SublistPartners {
    sublistId: 'partners';
    fieldId: 'partnername' | 'location';
}

export type Sublist = SublistItem | SublistPartners;

Now you can use the Sublist type and it will correctly infer whether it is of type SublistPartners or SublistItem depending on the field values you provide.

edited May 11, 2020 at 8:45

answered Mar 19, 2019 at 15:11

Matthew Mullin

7,6864 gold badges25 silver badges36 bronze badges

Comments

artus9033 · Accepted Answer · 2020-08-05 21:46:05Z

4

You can try to solve this problem using conditional types:

interface SublistItem {
    sublistId: 'item';
    fieldId: 'itemname' | 'quantity';
}

interface SublistPartners {
    sublistId: 'partners';
    fieldId: 'partnername' | 'location';
}

type ConditionalSublist<bIsSublistItem=true> = bIsSublistItem extends true ? SublistItem : SublistPartners;

let sublistItem: ConditionalSublist<true> = {
    fieldId: "itemname",
    sublistId: "item"
};

let sublistPartner: ConditionalSublist<false> = {
    fieldId: "partnername",
    sublistId: "partners"
};

answered Aug 5, 2020 at 21:46

artus9033

64110 silver badges21 bronze badges

Comments

Peter the Russian · Accepted Answer · 2023-11-08 00:15:45Z

1

For interfaces unfortunately not but for types Yes there is and its fairly clean

type getSublistValue = {
     sublistId: 'item';
     fieldId: 'itemName' | 'quantity'; 
 } & {
     sublistId:'partners';
    fieldId: 'partnerName' | 'location';
}

Here is a great video explaining how to do it clean with types

answered Nov 8, 2023 at 0:15

Peter the Russian

1,3139 silver badges10 bronze badges

Comments

Клим Кравченко · Accepted Answer · 2022-08-11 12:16:06Z

0

You may use my example. After providing required props, typescript will suggest other props.

interface _ButtonProps {
  variant: 'flat' | 'primary';
}

interface FlatButton extends _ButtonProps {
  variant: 'flat';
  textColor?: string;
}

interface PrimaryButton extends _ButtonProps {
  variant: 'primary';
  backgroundColor?: string;
}

export type ButtonProps = FlatButton | PrimaryButton;

answered Aug 11, 2022 at 12:16

Клим Кравченко

1

Collectives™ on Stack Overflow

Javascript Conditional Inside TypeScript Interface

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related