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

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`
}```