[Suggestion] Extracting props of a component

[ferdaber]

Not sure where to put it, but I have these helper types in my team's codebase to extract the props of a component:

// helper type for all known valid JSX element constructors (class and function based)
type ElementConstructor<P> =
  | ((props: P) => React.ReactElement<any> | null)
  | (new (props: P) => React.Component<P, any, any>

// gets the internal props of a component
// used like Props<typeof MyComponent>
// or Props<'button'> for intrinsic HTML attributes
type Props<C> = C extends ElementConstructor<infer P>
  ? P
  : C extends keyof JSX.IntrinsicElements
  ? JSX.InstrinsicElements[C]
  : {}

// goes one step further and resolves with propTypes and defaultProps properties
type ApparentProps<C> = C extends ElementConstructor<infer P> ? JSX.LibraryManagedAttributes<C, P> : Props<C>

As far as how we use them, there's a lot of places where I want to reuse some slices of props because of prop drilling, and I can either export the props type as part of the module or I use this (either way works), the advantage of using this is that a refactor of the source of truth component will propagate to all consuming components.

I also use them to strongly type custom event handlers if they're not written at the call sites themselves (i.e. inlined with the JSX attribute):

// my-inner-component.tsx
export function MyInnerComponent(props: { onSomeEvent(event: ComplexEventObj, moreArgs: ComplexArgs): SomeWeirdReturnType }) { /* ... */ }

// my-consuming-component.tsx
export function MyConsumingComponent() {
  // event and moreArgs are contextually typed along with the return value
  const theHandler: Props<typeof MyInnerComponent>['onSomeEvent'] = (event, moreArgs) => {}
  return <MyInnerComponent onSomeEvent={theHandler} />
}

[swyxio]

ok this took me a while to understand but wow. super handy!!! i love it. i'm gonna break up the cheatsheet to a basic and an advanced section, give me a while

[swyxio]

done https://.com/sw-yx/react-typescript-cheatsheet/blob/master/ADVANCED.md#extracting-prop-types-of-a-component

[TheCeloReis]

Why not to use React.ComponentProps?

const defaultProps: React.ComponentProps<typeof Modal> = {
	title: "Hello World",
	visible: true,
	onClick: jest.fn(),
};

[swyxio]

you may be righ!

for reference this is what we currently have https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#props-extracting-prop-types-of-a-component

[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]

@MarcelReis that was an excellent suggestion, thank you. i found our prior existing docs too complex for the common usecase, however Ferdy above is right that there are proptypes and defualtprops edge cases to consider if you want a fully reliable solution. i've opted for linking to this issue rather than bombarding our readers with complex utils right off the bat.