Use typescript to define set of non-compatible react props

Question

I have made a component MyComponent with react. I would like to define the props for this component.

Usually i do it like

type Props = {
  foo: string
}

const MyComponent = (props: Props) => ...

Here are the props i would like to always be available

selected: string <-- required
onSelect(): void <-- required
margin?: string <-- optional

And the following are two sets that are non-compatible, ie. only one of them can be used.

Set one:

compact?: boolean <-- optional
minWidth?: number <-- optional
maxWidth?: number <-- optional

Set two:

width?: number <-- optional

What is the best way to define these props so that it makes the most sense to the developer using the component? I.e, what gives the best intellisense experience?

Maybe dupe of stackoverflow.com/questions/42123407/…

k.tten
– k.tten

2022-11-05 15:12:11 +00:00
Commented Nov 5, 2022 at 15:12 — k.tten
– k.tten, Commented Nov 5, 2022 at 15:12

k.tten · Accepted Answer · 2022-11-05 16:17:29Z

You can create a XOR-like behavior by using never:

type Props = {
    selected: string;
    onSelect(): void;
    margin?: string;
} & (
    | {
          compact?: boolean;
          minWidth?: number;
          maxWidth?: number;
          width?: never;
      }
    | {
          compact?: never;
          minWidth?: never;
          maxWidth?: never;
          width?: number;
      }
);

Then when you give it invalid props:

<MyComponent selected="foo" onSelect={() => {}} margin="0" width={0} compact={true} />

You'll get a fairly helpful error:

Type '{ selected: string; onSelect: () => void; margin: string; width: number; compact: true; }' is not assignable to type 'IntrinsicAttributes & Props'. Type '{ selected: string; onSelect: () => void; margin: string; width: number; compact: true; }' is not assignable to type '{ compact?: undefined; minWidth?: undefined; maxWidth?: undefined; width?: number | undefined; }'. Types of property 'compact' are incompatible. Type 'true' is not assignable to type 'undefined'.(2322)

Playground

Collectives™ on Stack Overflow

Use typescript to define set of non-compatible react props

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related