Conditional boolean type in typescript with interface

Question

How would I write conditional boolean type for this?

i.e

export interface Props {
  editable: boolean;
  position: { editable: true } ? Sheets.Matrix : never;
  value: string;
  classNames?: string;
  textType?: "bold" | "editing" | "normal";
  onChange?: (val: Sheets.SaveData) => void;
}

I use props like this

const SheetsCell: React.FC<MainProps> = ({
  editable,
  value,
  textType = "normal",
  classNames = "",
  position,
  ...

Here if something is editable, I want the type of position to be Sheets.Matrix else, position isn't required.

Nullndr · Accepted Answer · 2022-12-21 12:48:41Z

1

One way to do it is using an interface and the intersection operator(&).

You can use an intersection type, which combines multiple types into one.

interface Props {
  value: string;
  classNames?: string;
  textType?: "bold" | "editing" | "normal";
  onChange?: (val: number) => void;
}

type MainProps = Props & {
  editable: true;
  position: number; 
} | Props & {
  editable: false;
  position?: number; 
};

The above type MainProps forces editable to be true in one case and false in another. If editable is true, then position property exists and if it is false, position property exists but it is not required.

unions is used above, to generate a type which can be one of the two values. MainProps can be one of the two types (both being intersection with Props type).

Here is the playground link

edited Dec 21, 2022 at 12:48

Nullndr

1,8941 gold badge14 silver badges33 bronze badges

answered Dec 21, 2022 at 11:15

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

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

5 Comments

Alwaysblue Over a year ago

Thanks, Small correction, I think for Props & { editable: false; } you need to add position?: undefined else typescript throws error

Tushar Shahi Over a year ago

Ok I missed that part. position is allowed but it can be optional is it?

Alwaysblue Over a year ago

Updated the question: So, Yeah, I de-structure (as in now question).

Nullndr Over a year ago

You can just do Props & ({ editable: false } | { editable: true, position: number })

Tushar Shahi Over a year ago

thanks @Nullndr, you can edit the answer if you feel like. Or i can add it. This is a good tip.

Nullndr · Accepted Answer · 2022-12-21 12:52:31Z

1

You could use type aliases instead of an interface e.g.

type Props = { 
  editable: true;
  position: Sheets.Matrix;
} | { 
  editable: false;
};

const testFalse: Props = { // position not required
  editable: false
}
    
const testTrue: Props = { // position mandatory
  editable: true,
  position: MatrixEnum
}

edited Dec 21, 2022 at 12:52

Nullndr

1,8941 gold badge14 silver badges33 bronze badges

answered Dec 21, 2022 at 11:15

Murat Karagöz

37.8k16 gold badges82 silver badges114 bronze badges

Collectives™ on Stack Overflow

Conditional boolean type in typescript with interface

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related