Write your own 'PropsFrom' helper to extract props from any React component

A common pattern in TypeScript is to create type helpers that allow you to extract types from things that are not types.

Here we've created a PropsFrom type helper.


type PropsFrom<TComponent> = any
const props: PropsFrom<typeof MyComponent> = {
  enabled: true,
}

Currently what we want it to do is to return the props. Here it would return enabled: boolean if we put MyComponent in there.


const MyComponent = (props: { enabled: boolean }) => {
  return null
}

So let's see how we do that. If we go TComponent extends a React.FC which is a functional component, then we can actually add a generic there and we can say infer the Props.

Then we can return the Props and otherwise, because this is a ternary and it needs to return something, we say never.


type PropsFrom<TComponent> = TComponent extends React.FC<infer Props>
  ? Props
  : never

And now if we PropsFrom MyComponent we get enabled: boolean.

So for instance if I go and change the enabled prop in MyComponent to true and then set enabled in our props object to be false, then that's. going to fail because it's expecting true.

But what if you want to feed multiple types of things into this helper? For instance what if we also wanted to derive the prop types of a class component instead of a functional component.


class MyOtherComponent extends React.Component<{
  enabled: boolean;
}> {}
...
const props: PropsFrom<MyOtherComponent> = {
  enabled: true,
};

To do this we'll need to add another layer to the PropsFrom ternary.

So here in the ternary, for the else case we'll check if the TComponent is a React.Component which is the type of a class component. From that we'll infer its Props.


type PropsFrom<TComponent> = TComponent extends React.FC<infer Props>
  ? Props
  : TComponent extends React.Component<infer Props>
  ? Props
  : never

So this now is working both with react functional components and class components.

Transcript

0:00 A common pattern in TypeScript is to create type helpers that allow you to extract types from things that are not types. Here, we've created a PropsFrom type helper which extracts a component, if I call this TComponent here. Currently, what we wanted to do is we want it to return the props. Here, it would return enabled boolean if we put my components in there. Let's see how we do that.

0:26 If we go TComponent extends React.FC, which is a functional component, then we can actually add a generic there. We can say infer the props and then we can return the props. Otherwise, because this is a ternary, it needs to return something, we say never.

0:46 Now, PropsFrom, this is going to return enabled boolean because, if I change this up here to a, for instance, just say it's true and I had false here, then that's going to fail because it's expecting true. What if you want to be able to feed in two different types of things into this helper? Then you need to add an extra layer to the ternary.

1:07 Let's imagine that we had a MyOtherComponents here, because React components can be added as classes, too. Here, what we do is we say instead of this, TComponent extends React.Component, then we return Props, and then we have never.

1:25 Now, we can say PropsFrom is basically like...Why is this not working? Boolean is not returned, so never, so we can say Components instead. This now is working both with React functional components, which you see here, and with react components declared as classes.

Type helpers change the game when it comes to types in your codebase. They help TypeScript infer more from your code - and make your types a lot more readable. Here, I write my own PropsFrom helper to extract props from any React component.

Discuss on Twitter

More Tips

Type Predicates

1 min

TypeScript 5.1 Beta is OUT!

2 mins

How to Name your Types

4 mins

Don't use return types, unless...

4 mins

TypeScript 5.0 Beta Deep Dive

6 mins

Conform a Derived Type Without Losing Its Literal Values

1 min

Avoid unexpected behavior of React’s useState

1 min

Understand assignability in TypeScript

2 mins

Compare function overloads and generics

1 min

Use infer in combination with string literals to manipulate keys of objects

1 min

Access deeper parts of objects and arrays

1 min

Ensure that all call sites must be given value

1 min

Understand how TypeScript infers literal types

1 min

Get a TypeScript package ready for release to NPM in under 2 minutes

1 min

Use assertion functions inside classes

1 min

Assign local variables to default generic slots to dry up your code and improve performance

2 mins

Know when to use generics

2 mins

Map over a union type

1 min

Make accessing objects safer by enabling 'noUncheckedIndexedAccess' in tsconfig

1 min

Use generics to dynamically specify the number, and type, of arguments to functions

1 min

Use 'declare global' to allow types to cross module boundaries

2 mins

Turn a module into a type

2 mins

Create autocomplete helper which allows for arbitrary values

2 mins

Use deep partials to help with mocking an entity

1 min

Throw detailed error messages for type checks

1 min

Create a 'key remover' function which can process any generic object

1 min

Use generics in React to make dynamic and flexible components

1 min

Create your own 'objectKeys' function using generics and the 'keyof' operator

1 min

Use 'extends' keyword to narrow the value of a generic

1 min

Use function overloads and generics to type a compose function

2 mins

Decode URL search params at the type level with ts-toolbelt

2 mins

Use 'in' operator to transform a union to another union

2 mins

Derive a union type from an object

2 mins