Typescript interface optional properties depending on other property

Question

Let's say we have the following Typescript interface :

interface Sample {
    key1: boolean;
    key2?: string;
    key3?: number;
};

In this case, key1 is always required, key2 is always optional, while key3 should exist if key1 is true and should not exist if key1 is false . In another word, a key's occurrence depends on another key's value. How can we achieve this in Typescript?

Answer 1

The most straightforward way to represent this is with a type alias instead of an interface:

type Sample = {
  key1: true,
  key2?: string,
  key3: number
} | {
  key1: false,
  key2?: string,
  key3?: never
}

In this case the type alias is the union of two types you're describing. So a Sample should be either the first constituent (where key1 is true and key3 is required) or the second constituent (where key1 is false and key3 is absent).

Type aliases are similar to interfaces but they are not completely interchangeable. If using a type alias leads to some kind of error, please add more detail about your use case in the question.

Hope that helps. Good luck!

Answer 2

Thought I'd mention another nice approach here could be to use a discriminated union:

enum ShapeKind {
    Circle,
    Square,
}

interface Circle {
    kind: ShapeKind.Circle;
    radius: number;
}

interface Square {
    kind: ShapeKind.Square;
    sideLength: number;
}

let c: Circle = {
    kind: ShapeKind.Square,
    //    ~~~~~~~~~~~~~~~~ Error!
    radius: 100,
}

As described in the Typescript docs: https://www.typescriptlang.org/docs/handbook/enums.html#union-enums-and-enum-member-types

Answer 3

I think that a readable solution is to use overload

so we can do this:

type IOverload = {
  (param: { arg1: number }): any;
  (param: { arg1: number; arg2: string; arg3: number }): any;
};

const sample: IOverload = (args) => {...};

sample({ arg1: 1, arg2: 'a' });

===> Property 'arg3' is missing in type '{ arg1: number; arg2: string; }' but required 
in type '{ arg1: number; arg2: string; arg3: number; }'.