Chris Parker

How to Use React.js Components with Typescript

Chris Parker

Jun 29, 2020
5 Min read
7,186 Views

Jun 29, 2020
5 Min read
7,186 Views

Web Development

Front End Web Development

Client-side Framework

React

Introduction

React and Typescript are magic together. Typescript provides the necessary tools to define strict types for the React components in your apps along with their props, states, and event handlers. This guide provides a shortcut on getting started with React and Typescript along with useful hints and smart strategies to combine the two.

Setting up a New Project

Getting started with a new JavaScript stack can be a bit frustrating. The available options are abundant, and you have to pick the right tools and then learn to compile them successfully together.

However, when it comes to using React with Typescript, you can easily use the famous React starter project: create-react-app. Thus, to create a new project, all you have to do is install the create-react-app CLI as follows:

1npm install -g create-react-app
2create-react-app my-app --scripts-version=react-scripts-ts

There you have it. The above command creates a new React app for you, wrapped with Typescript in a new folder named my-app. In order to run the app, move to the my-app folder and run npm start.

Employing React’s Type Definitions

React provides various type definitions that you can use in your app whenever you create a new React component.

Use React.SFC when you define functional components.

1const MyComponent: React.SFC = () => (<div>Hello!</div>)

javascript

A function defined by stateless functional component (SFC) returns a JSX element.

Use the React.ReactChild return type when you want to include other renderable elements, such as strings or numbers.

1// This is not allowed
2const MyComponent: React.SFC = () => 'Hello'
3
4// This is allowed
5const OnlyRenderable = (): React.ReactChild => 'Hello'

javascript

Use the React.CSSProperties type when you wish to define style objects.

1const myStyle: React.CSSProperties = {
2    backgroundColor: 'blue',
3    border: '1px solid red'
4}
5
6const MyComponent: React.SFC = () => <div style={myStyle}>Hello</div>

javascript

You do not have to include any additional type definitions when you use class-based components since Typescript deduces the type from the class definition of the inherited React.Component.

1class MyComponent extends React.Component {
2   // The React.Component type is inferred
3}

javascript

Defining Types for Props and State

The best thing about Typescript is that it completely eliminates React’s PropTypes. Now, you can simply assert your prop types in Typescript. For instance, to create a prop interface for your React component that has a singular name attribute, check the following:

1interface MyComponentProps {
2  name: string
3}

javascript

Now, you can use your interface as a type variable in the React.SFC type to assert the prop type for your component:

1const MyComponent: React.SFC<MyComponentProps> = ({ name }) => {
2  return <div>Hello {name}</div>
3}

javascript

Likewise, add prop and state types for class-based components:

1interface MyComponentState {
2  // ...
3}
4
5class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
6      render() {
7        return <div>Hello {this.props.name}</div>
8      }
9}

javascript

Defining Event Handlers for Elements

The React type library similarly offers type declarations for different event handler types. Usually, the event handler type definition relies on the answers to two major questions:

What type of event are you using?

What type of element are you interacting with?

If you wish to include an onClick event handler to your div element, you must set the element type to HTMLDivElement and the event type to React.MouseEventHandler as follows:

1class MyComponent extends React.Component<MyComponentProps> {
2  public myHandler: React.MouseEventHandler<HTMLDivElement> = (e) => {
3    // do something
4  }
5  public render () {
6    return <div onClick={this.myHandler}>Hello {this.props.name}</div>
7  }
8}

javascript

You can look here for details and a complete list of event attribute types and their corresponding events.

Conclusion

This guide is a good starting point for using React with Typescript. Although not each and every type that React offers is covered, you can experiment with what you learned here and dig deeper for the special cases you may come across.

LEARN MORE