Replace invalid props example

[filiptammergard]

The previous example was titled "Props: Must Pass Both" with this:

type OneOrAnother<T1, T2> =
  | (T1 & { [K in keyof T2]?: undefined })
  | (T2 & { [K in keyof T1]?: undefined });

type Props = OneOrAnother<{ a: string; b: string }, {}>;

const a: Props = { a: "a" }; // error
const b: Props = { b: "b" }; // error
const ab: Props = { a: "a", b: "b" }; // ok

Which is just weird to me, because if you really meant "must pass both", you can just do this:

interface Props {
  a: string
  b: string
}

const Both = (props: Props) => {
  return <>both</>
}

const Component = () => (
  <>
    <Both /> {/* error */}
    <Both a="" /> {/* error */}
    <Both b="" /> {/* error */}
    <Both a="" b="" /> {/* ok */}
  </>
)

...which is not very interesting and nothing to showcase as an advanced pattern. If we make it "Pass nothing or all" it gets a little bit more interesting at least!

I think the current example is actually trying to do "Pass one or the other but not both", but that's already covered in #620.

[eps1lon]

We should link to a section that explains why {} is bad. It's not intuitive why {} is bad.

Also: should this be [key: keyof any]?

Would also be nice to check what others recommend instead of {}. I've seen Record<keyof any, never> as well so if that's more popular, I'd stick with that to avoid fragmentation.

[filiptammergard]

I dug a little deeper and this is a bit of a rabbit hole. The most commonly used way seems to be Record<string, never>, and that's also what typescript-eslint recommends as default:

If you want a type meaning "empty object", you probably want Record<string, never> instead.

But it does not seem like this is recommended by the TypeScript team, since never semantically means something else: microsoft/TypeScript#47486 (comment)

I added dedicated sections about these object types to make it easier to link to them. I also added alternative approaches that might be better to avoid having to rely on typing an empty object.

What do you think?