[Improvement/Addition] Extracting and composing types using $ElementProps

[dmisdm]

Just thought i'd note something that i do, that may be useful for others.
Since TS 2.8's conditional types, its possible to extract a type parameter from another type (although maybe it was possible before but i didn't know how to do it).
This is essentially a port of flow's react utility type "ElementProps".
It allows you to extend another component easily, which assists with typing HOCs, and props spread.

eg:

// ReactUtilityTypes.d.ts
declare type $ElementProps<T> = T extends React.ComponentType<infer Props>
  ? Props extends object ? Props : never
  : never;

Then say you have some components which spread props to its child (almost like defaultProps, mapProps, withProps HOCs)
https://github.com/acdlite/recompose/blob/master/docs/API.md#withprops

//Components.tsx

/*
Std box component.
Eg <Box  display="flex" justifyContent="center" color="palevioletred" />
*/
const Box = (props: React.CSSProperties) => <div style={props} />

const Card =  ({title, children, ...props}: {title: string} & $ElementProps<typeof Box>) =>
<Box {...props}>{title}: {children}</Box>

We could have just used React.CSSProperties in place of $ElementProps<...>, but thats not really what we're trying to express. What if the component was from a 3rd party library and you didn't know where the Props interface was?
Eg:

import Paper from '@material-ui/core/Paper';

const Card =  ({title, children, ...props}: {title: string} & $ElementProps<typeof Paper>) =>
<Paper {...props}>{title}: {children}</Box>

Not only that, you can use https://github.com/piotrwitek/utility-types to express even more:

import Paper from '@material-ui/core/Paper';
import {Omit} from 'utility-types'

// Same as above except cannot be styled
const Card =  ({title, children, ...props}: {title: string} & Omit<$ElementProps<typeof Paper>, "style" | "className" | "classes">) =>
<Paper {...props}>{title}: {children}</Box>

Sorry if this is not succinct, just wasn't sure which parts are worth going in the cheatsheet or if other people would find this valuable.

Happy to write something more cheatsheet worthy or presentable if needed!

[swyxio]

This is very interesting and very appreciated, thank you! can I just ask a clarifying question - in your import Paper from '@material-ui/core/Paper'; example, does that work even if Paper is untyped?

or are you basically saying, ok, @material-ui/core/Paper doesn't export Paper's proptypes, but that's ok, because I can just use $ElementProps to grab it and do manipulations like & and Omit?

Just trying to explain back to you what i think this does. do i have the right idea?

[dmisdm]

Yeah thats about right!
Its a nice solution to when you say "I want this prop (eg paperProps) or these props to spread to this component, but not have to decide on the type (be explicit)".
The less explicit about types you are, the safer it will be (imo). Especially when there are any's flying around.

If Paper doesn't have a type because its referencing a JS file (it does though - from material-ui) then TS treats them as any, so yeah it'l work, like everything does with any haha.

It just lets you be a bit more expressive, less explicit, and helps in other situations too, especially with making HOCs - when Component or Props types are generic.
Eg - making recompose's defaultProps work properly with TS (we can't preserve currying though, cause no higher kinded types in TS)

import * as Recompose from 'recompose'
export const defaultProps = <
  C extends React.ComponentType,
  D extends Partial<$ElementProps<C>>
>(
  defaults: D,
  Component: C
): React.ComponentType<$ElementProps<C> & Partial<D>> =>
  Recompose.defaultProps(defaults)(Component);

Make sense?

[swyxio]

yes - am very busy this week so will come back and review this next week. thanks!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!

[swyxio]

included in #272

[bsitruk]

Hi,

Is $ElementProps still relevant ?
Isn't React.ComponentProps doing the same job ?

Thanks