Typescript interface optional properties depending on other property

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!


I also really like the way Ben Ilegbodu (https://www.benmvp.com/blog/conditional-react-props-typescript/) does it:

Give these three different cases in JSX:

<Text>not truncated</Text>
<Text truncate>truncated</Text>
<Text truncate showExpand>truncated w/ expand option</Text>

... Here is the corresponding TypeScript definition to make the showExpanded property required when the truncate prop is present:

interface CommonProps {
  children: React.ReactNode

  // ...other props that always exist
}

type TruncateProps =
  | { truncate?: false; showExpanded?: never }
  | { truncate: true; showExpanded?: boolean }

type Props = CommonProps & TruncateProps

const Text = ({ children, showExpanded, truncate }: Props) => {
  // Both truncate & showExpanded will be of
  // the type `boolean | undefined`
}```


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; }'.