[ListItem] Add type test for button prop

[eps1lon]

Since #13868 button is a discriminant for the props of ListItem. This means it can't be assigned boolean. Either false or true has to be used.

You can't pass the union of the possible types of discriminants in TypeScript. A simplified illustration of this problem:

interface BookProps {
  isBook: 'yes';
}

interface MagazineProps {
  isBook: 'no';
}

interface OverloadedComponent {
  (props: BookProps | MagazineProps): void;
}

declare const SomeComponent: OverloadedComponent;

function Library(props: { isBook: 'yes'} | {isBook: 'no'}) {
  const { isBook } = props;
  SomeComponent(props);
  // This fails because `isBook` is of type `'yes' | 'no'`
  SomeComponent({ isBook });
}

Might be a limitation of TypeScript, might a bug.
/cc @pelotom

[mui-pr-bot]

No bundle size changes comparing ae31efe...93fc476

Generated by 🚫 dangerJS against 93fc476

[pelotom]

Might be a limitation of TypeScript, might a bug.
/cc @pelotom

Yeah, this is pretty unfortunate. Looks like it's an edge case which only comes up when a record type has a single property, and they consider it working as intended, per this comment.

I wonder if we can add another overload to handle the general boolean case or if that destroys all our hard-earned type safety?

[eps1lon]

I wonder if we can add another overload to handle the general boolean case or if that destroys all our hard-earned type safety?

I think we're back at the start by that point. With the general boolean case we would need to infer the component with a conditional at which point we might as well completely switch to it. But that approach had issues with type inference in callbacks which we tried to avoid if I recall correctly.

At least we have documented the issue. Maybe we can improve it later.

[VincentLanglet]

Might be a limitation of TypeScript, might a bug.

Is this issue reported in Typescript repository ?

[eps1lon]

Might be a limitation of TypeScript, might a bug.

Is this issue reported in Typescript repository ?

@VincentLanglet It looks like it.

It essentially comes down to { button: true | false } vs { button: true } | { button: false } as far as I can tell.

[franklixuefei]

Why not just do

<ListItem button={(someBoolean == someOtherBoolean) as false}

:-D
On a side note, I know this looks weird, but at least we don't have to write the if else which could be cumbersome.