Adding Types to Classes in React using TypeScript

avatar

Borislav Hadzhiev

Wed Apr 21 20212 min read

Updated on Wed Apr 21 2021

Adding types to Props in React Classes #

First we'll start with how you associate a type with a class component to type the component's props:

import React from 'react'; export const Company = () => { const employees = [ {name: 'Tim', salary: 5000}, {name: 'John', salary: 4000}, {name: 'Silvio', salary: 3000}, ]; return <Employees employees={employees} />; }; type EmployeesProps = { employees: {name: string; salary: number}[]; }; class Employees extends React.Component<EmployeesProps> { render() { return ( <ul> {this.props.employees.map(employee => ( <li key={employee.name}> {employee.name} makes {employee.salary} </li> ))} </ul> ); } }

In the above example all we had to do is pass a generic to React.Component and now anywhere inside our component we can refer to this.props.employees and if we hover over it you'll notice that the type is applied to it.

Adding types to State in React Classes #

There are a couple of ways you can add types to state in a class component. You could pass the type of state as the second argument of the React.Component generic or type it inline in the component's state declaration, let's look at both in the same snippet:

import React from 'react'; export const Company = () => { const employees = [ {name: 'Tim', salary: 5000}, {name: 'John', salary: 4000}, {name: 'Silvio', salary: 3000}, ]; return <Employees employees={employees} />; }; type EmployeesProps = { employees: {name: string; salary: number}[]; }; type EmployeesState = { selectedIndex: number; }; class Employees extends React.Component<EmployeesProps, EmployeesState> { state: EmployeesState = { selectedIndex: 0, }; render() { return ( <ul> {this.props.employees.map((employee, index) => ( <li key={employee.name} style={{ backgroundColor: this.state.selectedIndex === index ? 'coral' : '', }} onClick={() => this.setState({selectedIndex: index})} > {employee.name} makes {employee.salary} </li> ))} </ul> ); } }

You can use either approach, the result is the same. If there is a difference in the EmployeesState type and the type of our actual state, typescript would yell at you.

Adding Types to Events in React Classes #

The way to type an event in a typescript class is the same as you would using a function component. You have to get the type of the event by hovering over the inline handler - i.e. onSubmit, onChange props and read the parameter the function takes, i.e. for onSubmit you would get something like:

(JSX attribute) React.DOMAttributes<HTMLFormElement>.onSubmit?: ((event: React.FormEvent<HTMLFormElement>) => void) | undefined

Let's look at the complete example:

import React from 'react'; export const Company = () => { const employees = [ {name: 'Tim', salary: 5000}, {name: 'John', salary: 4000}, {name: 'Silvio', salary: 3000}, ]; return <Employees employees={employees} />; }; type EmployeesProps = { employees: {name: string; salary: number}[]; }; type EmployeesState = { selectedIndex: number; }; class Employees extends React.Component<EmployeesProps, EmployeesState> { state = { selectedIndex: 0, }; handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); if (this.state.selectedIndex < this.props.employees.length - 1) { this.setState(prevState => ({ selectedIndex: prevState.selectedIndex + 1, })); } else { this.setState({selectedIndex: 0}); } }; render() { return ( <> <ul> {this.props.employees.map((employee, index) => ( <li key={employee.name} style={{ backgroundColor: this.state.selectedIndex === index ? 'coral' : '', }} onClick={() => this.setState({selectedIndex: index})} > {employee.name} makes {employee.salary} </li> ))} </ul> <form onSubmit={this.handleSubmit}> <button>Increment Index</button> </form> </> ); } }

Further Reading #

Add me on LinkedIn

I'm a Web Developer with TypeScript, React.js, Node.js and AWS experience.

Let's connect on LinkedIn

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee