How to add TypeScript prop type definitions to an existing React component

react-some-component.d.ts

import * as React from 'react';

declare class SomeReactComponent extends React.Component<SomeReactComponentProps, any> {}

interface SomeReactComponentProps {
  className?: string;
  toggle?: boolean;
  name: string;
  size?: 'lg' | '2x' | '3x' | '4x' | '5x';
}

declare var SomeReactComponentType: typeof SomeReactComponent;
export = SomeReactComponentType;

Background

You want to use an existing third-party React component in your project, but no TypeScript type definitions exist. What to do?

Option 1: Forgo type checking

One option is to simply not have type checking for this component by importing the component using require:

const SomeComponent = require('react-some-component');

SomeComponent will now have a type of any. Of course, this is not ideal—you're probably using TypeScript in order to get code completion, type checking, and many other benefits.

Option 2: Add type definitions yourself

It is possible to add type definitions without having to modify the third-party component package. Create a type definitions file (as shown above) and place it somewhere in your project, then add a reference to it in tsconfig.json:

{
  "compilerOptions": {
    ...,
    "baseUrl": ".",
    "paths": {
      "react-some-component": ["path/to/types/react-some-component.d.ts"],
      ...,
    }
  }
}

You can now import the component along with type definitions in your code. Hello prop validation and autocompletion!

import * as SomeComponent from 'react-some-component';

If you decide to go down this route, consider making a Pull Request to the component's repository and/or Definitely Typed to share the love.

Note

• This was tested with TypeScript 2.0 and commonjs modules.
• The component that this was tested with had a default export (i.e. module.exports = React.createClass(...)).

tank you for this informations, it have helped me a lot,.
I have a component, can I generate this component.d.ts automatically from the component.js?
thank you.

I kept trying to do:

    class Pager extends React.Component<Props, any> {}
    export = Pager;

and hitting:
TS2497: Module 'react-pager' resolves to a non module entity and cannot be imported using this construct.

Until I saw your typeof trick:

    class Pager extends React.Component<Props, any> {}
    let PagerType: typeof Pager;
    export PagerType;

It worked!
THANK YOU!!!

---

Edit:

Since the 3rd party component was using old createClass syntax, I ended up going with:

const Pager:ClassicComponentClass<Props>;
export = Pager;