@fluentui/react-button: Address polymorphic typings

[dzearing]

We need to straighten out typings of Button and other components which use as. There is a way!

Expected:

const props: ButtonProps = {
  as: 'a',
  href: 'url', // Good to go!
};

const props2: ButtonProps = {
  as: 'button',
  href: 'url', // Build error
};

Resulted:

Typings are loose right now, extending React.AllHTMLAttributes.

[dzearing]

I have this working, but if as is not specified, i haven't found a way to default to a particular assumption.

[joschect]

It is currently impossible to do this if as can be undefined. If as is non-optional then this will mostly work as intended. Here's a typescript playground that demonstrates how this works if as can be undefined in one of the interfaces.

Additionally, here is an issue in the typescript repo that indicates that this is likely a limitation of the language rather than something that can be fixed.

Recommendation, it is possible to make a MutuallyExclusive type that will ensure that a discriminated union is correct. There will need to be some work done to ensure that this works smoothly.

Here is a prototype that works, although it it is inelegant.

type MakeExclusive<T, K extends string> = {
  [P in Exclude<keyof T, K>]?: undefined;
};

[ecraig12345]

Do we still need this?

[khmakoto]

Folding into #16746.