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> = anyconst 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.