CODEWITHSUNDEEP
reactjstypescripttype-definition
penguinflip
penguinflip

Reputation: 1377

How do I create a TypeScript type definition for a stateless React component?

I'm trying create type definitions for an existing suite of stateless React components, so I can generate documentation automagically and to improve intellisense in my team's tooling.

An example component could look like this:

myComponent.js

import React from 'react';

export const MyComponent = ({ prop1, prop2, prop3 }) => (
    <div>
        { prop1 ? prop2 : prop3 }
    </div>
);

I would like my type definition to:

Looking at this example of creating React components using TypeScript, I discovered the type: React.SFC.

I tried to use this in my definition:

index.d.ts

declare module "MyComponent" {
    import React from 'react';

    interface MyComponentProps {
        prop1: boolean;
        prop2?: string;
        prop3?: string;
    }

    export const MyComponent = React.SFC<MyComponentProps>
}

But I'm getting the linting error [ts] '(' expected.

I'm pretty new to TypeScript and I am clearly missing something, but I can't find any articles on creating type definitions for stateless components.

EDIT To be clear, I don't want to rewrite my components in TypeScript. I want to create a type definition file (*.d.ts) for an existing ES6 stateless component.

Upvotes: 31

Views: 46214

Answers (6)

penguinflip
penguinflip

Reputation: 1377

After a lot of fiddling, we have settled on the following set up. 

import React from 'react';

export interface MyComponentProps {
    prop1: boolean;
    prop2?: string;
    prop3?: string;
}

declare const MyComponent: React.SFC<MyComponentProps>

export default MyComponent

The inspiration for this was taken from: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/material-ui/index.d.ts

It works well with TypeDoc and also VS Code's intellisense.

I believe export default was the key to cracking intellisense here.

Upvotes: 39

suleyman
suleyman

Reputation: 149

Try this:

declare module "MyComponent" {
  import React from 'react';

  interface MyComponentProps {
    prop1: boolean;
    prop2?: string;
    prop3?: string;
  }

  export const MyComponent: (props: MyComponentProps) => React.SFC<MyComponentProps>
}

From official React page recommendations Type Definitions

Upvotes: 13

Tommi Komulainen
Tommi Komulainen

Reputation: 2890

I think you need var MyComponent: React.SFC<MyComponentProps>;

You might consider rewriting existing code in typescript anyway just to see what kind of definitions tsc would generate. Then discard the code and keep just the definitions.

Upvotes: 2

A Qadeer Qureshi
A Qadeer Qureshi

Reputation: 343

You can try something like this.

export type YourComponentType = {
  props1,
  props2
}

const YourComponent = ({
  props1,
  props2,
  ...restProps //additional props if passed to components.
}: YourComponentType) => (
  <div>{props1}</div>
)

export default YourComponent;

Upvotes: -3

Rohith Murali
Rohith Murali

Reputation: 5669

Its, :, not =. 

export const MyComponent:React.SFC<MyComponentProps> = ({ prop1, prop2, prop3 }) => (
<div>
    { prop1 ? prop2 : prop3 }
</div>
);

Upvotes: 1

GAJESH PANIGRAHI
GAJESH PANIGRAHI

Reputation: 1232

I am using react typescript react boilerplate provided by Microsoft https://github.com/Microsoft/TypeScript-React-Starter

I create a stateless component in typescript like this:

export interface IMyComponentProps {
   prop1: string;
   prop2: (event: React.MouseEvent) => void;
   prop3: number;
}

export class MyComponent extends React.Component<IMyComponentProps> {
    render(): JSX.Element {
        const {prop1, prop2} = this.props

        return (
            //My code here
            <button>prop1</button>
            <button>prop2</button>
        );
    }
}

Upvotes: -2

Related Questions