Working with TypeScript and React

TypeScript is a typed superset of JavaScript compiled to Javascript and provides optional static typing, classes, and interface. Integrating TypeScript with React is super easy. If you are using the Create React App (CRA) to create your React application boilerplate then –typescript option will auto inject the TypeScript into the boilerplate and install the related dependencies.

TypeScript with Create React App (CRA)

Let’s start with a simple example. First, prepare the boilerplate through CRA with TypeScript.

npx create-react-app react-typescript-app --typescript

Next steps to create a component named Count. This component will receive the properties on Counter Number and will display it. This gonna be a very simple example of the functional or stateless component. So, Let’s create a file Count (Count.tsx) at the components directory.

import React from 'react';

interface Props {
    count: number
}

const Count: React.FC<Props> = (props) => {
    return <h2 style={{color: '#fff'}}>{props.count}</h2>;
}

export default Count;

Next, open the App.tsx file and import the Count component. We will make the class based component. This component could have increment and decrement methods. As the name suggests both of the methods are to handle the Counter Number.

import * as React from 'react';
import Count from './components/Count';
import './App.css';

interface Props {}
interface State {
    count: number
}

class App extends React.Component<Props, State> {

    state: State = {
        count: 0
    }

    increment = () => {
        this.setState({
            count: (this.state.count + 1)
        });
    }

    decrement = () => {
        this.setState({
            count: (this.state.count > 0 ? this.state.count - 1 : 0)
        });
    }

    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <h1>React + TypeScript</h1>
                    <Count count={this.state.count} />
                    <button onClick={this.increment}>Increment</button>
                    <button onClick={this.decrement}>Decrement</button>
                </header>
            </div>
        );
    }
}


export default App;

Next step is to run our Counter App. Use the terminal the run your app by running the npm start command. This command will output something similar to the attached screenshot.

TypeScript with React Project

If your project is already been set up or you want to set up the app without creating react app, then you have to inject the TypeScript manually to your existing codebase. You have to install typescript, @types/react and @types/react-dom.

# Install TypeScript
$ npm i typescript -D

# Install types for React and ReactDOM
$ npm i -D @types/react @types/react-dom

Next step is to start code as we did at the very first fold and run your app.

Useful Resource

• https://create-react-app.dev/docs/adding-typescript