PropsOf<C> TypeScript utilities - Support defaultProps

[ryanswanson]

What:
Upgrade the PropsOf<C> TypeScript utilities to support defaultProps by delegating to new JSX and React types.

Why:
The PropsOf<C> utilities in @emotion/styled-base and emotion/theming currently result in a TypeScript error when using styled or withTheme with a component that has a defaultProp that is made optional by defaulting the prop value, yet is required on the Props interface and no value is passed to the component instance.

Error: /src/emotion/packages/styled-base/types/tests.tsx:288:24
ERROR: 288:24  expect  TypeScript@next compile error:
Property 'prop' is missing in type '{}' but required in type 'Props'.
ERROR: 297:21  expect  TypeScript@next compile error:
Property 'prop' is missing in type '{}' but required in type 'Props'.

See tests in this PR for both class-based and function-based component scenarios.

How:
The solution provided here uses some newer typings for JSX and React (requiring some TypeScript and @types/react upgrades).

Complexity is reduced by adapting a library-provided interface that is parameterized by both a component and its props (JSX.LibraryManagedAttributes<C, P>) to our utility interface parameterized by only a component (PropsOf<C>).

The React.ComponentProps<C> type utility is the key that allows us to extract Props (P) from the component (C).

The JSX.LibraryManagedAttributes<C, P> type utility ensures props with associated defaultProps are made optional (also see ReactManagedAttributes and Defaultize utilities in @types/react).

The type parameter C is constrained to match that of React.ComponentProps<C>: keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>.

A primary benefit of adapting to standard interfaces is reduced type maintenance over time. I haven't tested it, but also noticed that Issue #991 may be resolved by this change as well since union prop types should be supported by these standard interfaces.

Note: Upon running yarn test:typescript with a clean build from master, I encountered TypeScript errors related to React.ReactNode's use of a union with both null and undefined included. I have suppressed the error by turning off the no-null-undefined-union flag in tslint; however, you may prefer a different approach.

Checklist:

• Documentation N/A
• Tests
• Code complete
• Changeset

[changeset-bot]

🦋 Changeset is good to go

Latest commit: 30707a0

We got this.

Not sure what this means? Click here to learn what changesets are.

[Andarist]

Superb work! Love such PRs ❤️

[ryanswanson]

Thank you @Andarist and @mitchellhamilton for the quick turn-around on this. @ahutchings and I spent some extra time in making the PR comprehensive hoping it would be easier to review and accept.

Superb work on emotion as well! Love such libraries ❤️

[ryanswanson]

@Andarist - Do you mind sharing when you expect this to make it into a release and what semver level it will likely be?

[Andarist]

Not sure, @mitchellhamilton is doing releases - usually, it doesn't take too much time for a new release to be prepared though.

I think it should qualify as patch/minor - we definitely don't consider typing changes to affect semver in the same way as runtime changes affect it.

[ryanswanson]

Great! Thank you