Skip to content

Instantly share code, notes, and snippets.

@vsaarinen
Last active April 25, 2020 22:42
Show Gist options
  • Save vsaarinen/1c45e055f2fff02f361b0b9b1644b2a0 to your computer and use it in GitHub Desktop.
Save vsaarinen/1c45e055f2fff02f361b0b9b1644b2a0 to your computer and use it in GitHub Desktop.
How to add TypeScript prop type definitions to an existing React component
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;
@gofydo
Copy link

gofydo commented Oct 9, 2018

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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment