Typescript React: Access component property types

typescript react component type
typescript component type
react + typescript setstate
react typescript pass function as prop
react typescript functional component
typescript react style type
react + typescript cheat sheet
react typescript best practices

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, {}> {}

reactjs - Typescript React: Access component property types, MyComponent' type Props = MyComponent.Props // <= here access the component prop types export default class MyContainer extends React. Default properties allow you to specifcy default values for properties. In case you don’t want to have every value to be set explicitly. React has the property defaultProps reserved for components. TypeScript in version 3.0 is honouring defaultProps. With the latest React typings (v 16.4.8) you are ready to go:


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.

TypeScript and React: Components, Creating a type for our properties, and telling TypeScript that the parameters of our functional component are of that type. You already get nice suggestions in VS​  Prior to React 16.8, you could declare a React Stateless Functional Component in TypeScript as either a React.SFC or React.StatelessComponent. As of 16.8, both these types have been deprecated due to the introduction of Hooks. Function components can no longer be considered stateless with the introduction of hooks.


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

How to Statically Type React Components with TypeScript, To access React TypeScript typings, ensure your TypeScript-based React line explicitly annotates the component's state class property type:. It states to TypeScript that the fields state property should be the same type as the FormFields that is passed to State. Props is a little larger. First it lists the type of initialValues which must be the same shape as the passed in FormFields (and it’s also the same shape as the fields in State). Next is the type for FormComponent. This is just a React component that takes these specific props.


Given a React component:

import React, { ComponentType, StatelessComponent } from 'react';

const MyComponent: StatelessComponent<{ foo: string }> = props => <div>{props.foo}</div>;

You can do:

const getProps = function<Props> (_MyComponent: ComponentType<Props>): Props {
  return {} as Props;
};
const props = getProps(MyComponent);

// { foo: string; }
type MyComponentProps = typeof props;

Alternatively, you can augment the React typings to add a GetComponentProps helper:

import React from 'react';

type NonNullable < T > = T & {};

declare module 'react' {
  // Add helper for accessing props type of given component. Based off of
  // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24182.
  type GetComponentProps < C extends ComponentType < any > > = NonNullable<C['_doNotUse_props']>;

  // We use interface merging to append properties to these types
  interface StatelessComponent<P = {}> {
    // eslint-disable-next-line camelcase
    _doNotUse_props?: P;
  }
  interface ComponentClass<P = {}> {
    // eslint-disable-next-line camelcase
    _doNotUse_props?: P;
  }
}

Usage looks like this:

// { foo: string; }
type MyComponentProps = React.GetComponentProps<typeof MyComponent>;

I originally posted this in https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24182.

Composing React Components with TypeScript, To access React TypeScript typings, ensure your TypeScript-based React When modeling React components for these two "types" of game  Sadly there is no solution in TypeScript, that would do this for us. But as a compromise there is a type mapper, that makes all of our properties optional, so we don't need to define a value for the property text. TypeScript has a few of these type mappers, but the mapper we want here, is called Partial. Partial takes all properties from the


That's my solution of how to get props from component

type Propsable = {
  FC: React.FC;
  C: React.Component;
  CC: React.ComponentClass<any>;
  F: (...args: any) => any;
}
type PropsOfFC<C extends Propsable["FC"]> = {
  [K in keyof C["propTypes"]]: C["propTypes"][K] extends React.Validator<infer P>
    ? P
    : K
};
type PropsOfF<C extends Propsable["F"]> = Parameters<C>[0]
type PropsOfC<C extends Propsable["C"]> = C extends React.Component<infer P> ? P : never;
type PropsOfCC<C extends Propsable["CC"]> = C extends React.ComponentClass<infer P> ? P : never;


type PropsOf<C extends ValueOf<Propsable>> =
  C extends Propsable["FC"] ? PropsOfFC<C> :
  C extends Propsable["C"] ? PropsOfC<C> :
  C extends Propsable["CC"] ? PropsOfCC<C> :
  C extends Propsable["F"] ? PropsOfF<C> : any;


If you use functional component, class component or styled component that solution should help you. How to use:

type Props = PropsOf<typeof YourComponent>

You can add this to 'react.d.ts'

Typescript React: Access component property types, MyComponent' type Props = MyComponent.Props // <= here access the component prop types export default class MyContainer extends React. Using TypeScript 2.8 new conditional generic type feature, is it possible to extract the TProps of a React.ComponentType<TProps> component? I want a type that can either work on the Component


typescript-cheatsheets/react-typescript-cheatsheet , Cheatsheets for experienced React developers getting started with writing reusable type utilities/functions/render prop/higher order components and TS+​React libraries. This way, when you destructure you actually get the right types based on Class Properties: If you need to declare class properties for later use, just  Since React 16.3 the way to add refs is to use React.createRef as Jeff Bowen pointed in his answer. However you can take advantage of Typescript to better type your ref. In your example you're using ref on input element.


10++ TypeScript Pro tips/patterns with (or without) React, Your ultimate missing TypeScript style guide not only for React developers. private accessor won't make your properties/methods on class private during runtime. It's just Use lookup types for accessing component State/Props types. TypeScript and React: Children. JSX elements can be nested, like HTML elements. In React, children elements are accessible via the children props in each component. With TypeScript, we have the possibilty to make children type safe. Once you have the default types installed, we already get autocompletion and code analysis out of the box.


React children composition patterns with TypeScript, This composition is possible via children React Component props . props.​children are baked within @types/react.d.ts definition and are marked nominal in TypeScript, we can access any class member via property lookup  props.children are baked within @types/react.d.ts definition and union types to define our Component props API. of nominal in TypeScript, we can access any class member via property