CODEWITHSUNDEEP
reactjstypescript
Estus Flask
Estus Flask

Reputation: 223044

React props type with TypeScript

I'm using a recipe that is often recommended:

interface IFooProps extends React.Props<Foo> {
    bar: string;
}

export class Foo extends React.Component<IFooProps, {}> {
    render() {
        return <p className={this.props.bar}>{this.props.children}<p>
    }
}

However, React.Props is marked as deprecated with React 16 and appropriate @types/react.

What is the right way to do this?

This is primarily TypeScript types question, and prop-types (React.PropTypes) runtime types aren't applicable here.

Upvotes: 0

Views: 3096

Answers (1)

Estus Flask
Estus Flask

Reputation: 223044

As it's suggested in @types/react, React.Props is deprecated in favour of React.ClassAttributes that has key and ref properties, so it should be:

interface IFooProps extends React.ClassAttributes<Foo> {
    bar: string;
}

Since component class augments IFooProps with children property, this.props.children complies with props type.

Upvotes: 5

Related Questions