How to use PropTypes with Typescript in React

Question

I am trying to use PropTypes with Typescript but getting errors:

Without typescript I was able to use:

class TodoFilterItem extends Component {
  constructor (props) {
    super(props);

and then at the bottom

TodoFilterItem.propTypes = {
  name: PropTypes.string,
  filter: PropTypes.string,
  filterTodos: PropTypes.any
}

and that worked for just having PropTypes (i.e. no typescript).

However when I add Typescript and I have

class TodoFilterItem extends Component<ITodoFilterItem> {
  constructor (props:ITodoFilterItem) {
    super(props);
    ...

I have props as an interface like this:

interface ITodoFilterItem  {
  filter: string,
  name: string,
  filterTodos: any
}

and I use the same propTypes:

TodoFilterItem.propTypes = {
  filter: PropTypes.string,
  name: PropTypes.string,
  filterTodos: PropTypes.any
}

I get an error

Property 'propTypes' does not exist on type 'typeof import("/my_adrs/node_modules/@types/prop-types/index")'.

How to address this and be able to use PropTypes with Typescript in React ?

Related discussion: stackoverflow.com/q/54712094/1915893

Aluan Haddad
– Aluan Haddad

2020-07-20 03:06:18 +00:00
Commented Jul 20, 2020 at 3:06 — Aluan Haddad
– Aluan Haddad, Commented Jul 20, 2020 at 3:06

Bens Steves · Accepted Answer · 2020-07-20 00:07:18Z

4

PropTypes are separate from Typescript. To reuse your propTypes you have to convert it to an interface or type.

This

TodoFilterItem.propTypes = {
  filter: PropTypes.string,
  name: PropTypes.string,
  filterTodos: PropTypes.any
}

becomes

interface ITodoFilterItem {
  filter: string;
  name: string;
  filterTodos: any; 
}

Using that interface is simple, you replace TodoFilterItemProps with ITodoFilterItem.

The convention is to name your component props IProps. Putting that together your component now looks like:

interface IProps { 
 name: string;
 filter: string;
 filterTodos: any; 
}

class TodoFilterItem extends Component<IProps> {
  constructor (props:IProps) {
    super(props);
    ...

Note on any

Try to avoid typing to any. any type is the same has untyped. I imagine filterTodos is an array of todos. If that's the case you can create a type for todo call it

type Todo = { ...properties of a todo }

then type filterTodos to be an array of Todo which would look like this:

type Todo = { 
  name: string,
  status: 'not started' | 'in progress' | 'done'
}

interface IProps { 
  filter: string;
  name: string;
  filterTodos: Todo[]; 
}

edited Jul 20, 2020 at 0:07

answered Jul 20, 2020 at 0:00

Bens Steves

2,8593 gold badges19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Michael Durrant Over a year ago

This helps but unfortunately I am getting an error that Property 'propTypes' does not exist on type typeof TodoFilterItems`

Michael Durrant Over a year ago

in the TodoFiterItem.propTypes at the bottom of the file.

Bens Steves Over a year ago

You can remove your prop types all together. Typescript is a replacement for your prop types essentially

Luke Over a year ago

@BensSteves Sadly it isn't quite. It doesn't provide details for props that are passed as a null value for a required prop at runtime, for example.

Collectives™ on Stack Overflow

How to use PropTypes with Typescript in React

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related