npm package @types/react allows us to use React inside of our TypeScript apps.
We define components as
type Props = {...}
type State = {...}
export default class MyComponent extends React.Component<Props, State> {
}
here we have to declare types for component props and state (in type variables).
After we declared that types, TypeScript uses that to validate the usage of our component (the shape of props passed to it).
I want to create a container around such a component. The container will reuse the props of the component. But in order to create another component with the same props I have to redeclare the types for props again. Or export them from the original component file and import into container:
// original file
export type Props = {...}
// container file
import MyComponent, { Props } from './original'
But I'm already importing the MyComponent from that file. This component already contains information about the props it consumes (thanks to type variables in React.Component).
The question is how do I access that information from the component class itself without explicitly exporting/importing the type for props?
I want something like:
import MyComponent from './MyComponent'
type Props = MyComponent.Props // <= here access the component prop types
export default class MyContainer extends React.Component<Props, {}> {}
2019: noticed all answers above are quite outdated so here is a fresh one.
With newer TS versions you can use lookup types.
type ViewProps = View['props']
Despite being very convenient, that will only work with class components.
The React typedefs ship with an utility to extract the type of the props from any component.
type ViewProps = React.ComponentProps<typeof View>
type InputProps = React.ComponentProps<'input'>
This is a bit more verbose, but unlike the type lookup solution:
All this makes this solution the most future-proof one: if you decide to migrate from classes to hooks, you won't need to refactor any client code.
Starting with TypeScript 2.8, you can use conditional types, e.g. given:
interface MyComponentProps { bar: string; }
declare const MyComponent: React.Component<MyComponentProps>;
interface MyComponentClassProps { bar: string; }
declare const MyComponentClass: React.ComponentClass<MyComponentClassProps>;
interface MyStatelessComponentProps { bar: string; }
declare const MyStatelessComponent: React.StatelessComponent<MyStatelessComponentProps>;
We can define these helpers:
type GetComponentProps<T> = T extends React.ComponentType<infer P> | React.Component<infer P> ? P : never
And use them like so:
// $ExpectType MyComponentProps
type MyComponentPropsExtracted = GetComponentProps<typeof MyComponent>
// $ExpectType MyComponentClassProps
type MyComponentClassPropsExtracted = GetComponentProps<typeof MyComponentClass>
// $ExpectType MyStatelessComponentProps
type MyStatelessComponentPropsExtracted = GetComponentProps<typeof MyStatelessComponent>
Update 2018-12-31: this is now available in the official React typings via React.ComponentProps.
To take a type of properties from component
type Props = typeof MyComponent.defaultProps;
You can ask yourself why I'm taking typeof from defaultProps and not from propTypes. To explain that lets take a look at the definition file
interface ComponentClass<P> {
new(props?: P, context?: any): Component<P, ComponentState>;
propTypes?: ValidationMap<P>;
contextTypes?: ValidationMap<any>;
childContextTypes?: ValidationMap<any>;
defaultProps?: P;
displayName?: string;
}
As you can see propTypes are wrapped in ValidationMap and it's not easy to get raw types. Fortunately, defaultProps have raw types