[typescript] Update typings for beta.4 and beta.5

[sebald]

ℹ️ I will gather any updated here until Friday and then merge it, so we hopefully have the typings ready for the next beta.

---

This patch contains the following updates regarding the typings:

• Update <Tabs> API to match BC introduced in [Tabs][BottomNavigation] Use value over index property #7741
• Update withStyle API to match BC introduced in [core] Remove createStyleSheet #7740
• Remove discriminated unions (true| false can not be used to create discriminated unions microsoft/TypeScript#17882)

---

• PR has tests / docs demo, and is linted.
• Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
• Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).

[sebald]

@oliviertassinari The API change in #7740 is super awesome BTW! Loving it 🤗

Also, since we now have tests for the typings. People could just commit snippets that don't work and I could just add them to the existing tests. Would you approve a page in the docs that describes this process? (and maybe some info on how the typings work in general)

[oliviertassinari]

@sebald Yeah, I think that we could document the process somewhere, we have a test/README.md file as well as a CONTRIBUTING.md. Maybe a new documentation page around typing (flow and typescript) will answer the problem?

[vyrotek]

Is this the right place to provide feedback about the typings? If not please let me know what I should do.

@sebald It looks like Drawer's docked field only accepts true | false and not a boolean. I currently set docked from a state value in order to handle switching between fullscreen and mobile versions of my sidebar menu.

Example
<Drawer docked={this.state.fullscreen}>

I get this error:
Types of property 'docked' are incompatible. Type 'boolean' is not assignable to type 'false | undefined'

[sebald]

@vyrotek Yes, that's the right place. Thank you for reporting this. Will have a look at it.

[sebald]

Well, this this is a very weird behaviour. Thought that was fixed in microsoft/TypeScript#10577

Here is a minimal example to reproduce:

type One = {
  kind: true;
  foo: string;
} 

type Two = {
  kind: false;
  foo: boolean;
}

type Options = One | Two;

const fn = (options: Options) => { /* ... */ };

const optionsOne = { kind: true, foo: 'bar' };

/**
 * ERROR:
 * Types of property 'kind' are incompatible.
 * Type 'boolean' is not assignable to type 'false'.
 */
fn(optionsOne);

/**
 * No Error.
 */
fn({ kind: true, foo: 'bar' })

Link to the playground

[sebald]

I have removed the discriminated unions for now from the typings as they did not work as I expected.

Some more info: The whole idea was to use discriminated unions to have a strongly typed API and make some props only available, if other props have certain values. For example, if <ListItem button={true} /> is set the component is rendered as a button, thus ButtonBaseProps can also be applied to the component. Now they're always allowed, but may not have any actual impact on runtime.

[sebald]

Going to merge this for now, so we finally have some typings in the next beta!
Please open a new issue + @sebald so I'll get notified! :)

[oliviertassinari]

Looks good :)

[sebald]

Thanks :)

[marcusjwhelan]

@sebald How will we know when the typings have been released?

[sebald]

@marcusjwhelan guess they will be available with the next beta. Check its changelog :)