"Props: One or the Other but not Both" does not work

[branislav-brincko]

https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#props-one-or-the-other-but-not-both

When I open playground and uncomment line 19, it is still valid 😕

[KunalSalunkhe12]

@branislav-brincko
The reason for this is that the | operator in TypeScript denotes a union of types, which means that a value of type Props1 | Props2 can be either of type Props1 or Props2. So if you pass both foo and bar props to MyComponent when it is expecting a value of type Props1 | Props2, TypeScript does not consider it an error because it still matches the type Props1 | Props2

One solution might be to add one more condition

if ("foo" in props && "bar" in props) {
    throw new Error("MyComponent expects only one of foo or bar props");
  }

[gajjardarshithasmukhbhai]

@branislav-brincko The reason for this is that the | operator in TypeScript denotes a union of types, which means that a value of type Props1 | Props2 can be either of type Props1 or Props2. So if you pass both foo and bar props to MyComponent when it is expecting a value of type Props1 | Props2, TypeScript does not consider it an error because it still matches the type Props1 | Props2

One solution might be to add one more condition

if ("foo" in props && "bar" in props) {
    throw new Error("MyComponent expects only one of foo or bar props");
  }

@KunalSalunkhe12 But I have doubt here, let's say If we have dynamic props instead of foo and bar. so I think that time we need to mention in different props. But we can achieve above thing by below snippets

type Props<T extends keyof any> = {
  [K in T]: string;
};

function MyComponent<T extends keyof any>(props: Props<T>) {
  return <div>{props[Object.keys(props)[0] as T]}</div>;
}

const UsageComponent = () => (
  <div>
    <MyComponent foo="foo" />
    <MyComponent bar="bar" />
  </div>
);

so in the above snippets, I am getting dynamic keys from the props and mentioned to the string. so we can leverage to mention different props without second, thought!

please correct me if I am wrong.

CC: @branislav-brincko