How to Compile Typescript with React Definitions

Jul 31, 2020 • 5 Minute Read

Introduction

Typescript's surge in popularity has allowed developers to accept it as welcomingly as JavaScript, if not more. It sure seems intimidating and daunting at first, but comes handy once you get the hang of it. Typescript offers numerous advantages, such as autocomplete code suggestions, highlighting errors at compile-time, and simplifying the debugging process, to name a few. It compiles to JavaScript and also compiles vanilla JavaScript, providing a gradual learning curve for developers. This guide explores how to use and compile Typescript with React definitions using Create-React-App.

Configuring Typescript

Typescript allows you to configure the compiler, thus giving you more fine-grained control over writing code. You can set the version of the ECMA script and error priorities by adjusting its strict mode. Their configurations are done in a tsconfig.json found at the root of the project. You can modify it the way you want and allow Typescript to set default configurations for your project. The example demonstrated in this guide uses default configurations for the sake of simplicity.

Setting up Typescript in an Existing React App

If you wish to migrate an empty React app built using Create-React-App, you must first install all the required dependencies as main dependencies in your React project. Inside the project, run the following command:

      npm install --save typescript @types/node @types/react @types/react-dom @types/jest
    

This installs all necessary modules along with typescript. The additional modules installed are necessary declaration files for compiling Typescript. These files bridge the gap between existing JavaScript code and new Typescript code. They are essentially responsible for code suggestions you get while writing Typescript in your editor.

Next, change index.js and App.js to index.tsx and App.tsx, respectively, and run the React development server using the following command:

      npm start

You will notice that Create-React-App notices the changes and automatically creates a tsconfig.json file for you. Thus, if you already have an empty React project, no need to dump it and create a new one. You can still use Typescript in that project by making the necessary modifications shown in this section.

Setup Typescript in a New Create-React-App

To preconfigure Typescript, create an empty React project using the --typescript flag. Run the following command:

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

You will notice that Create-React-App creates all files with a .tsx extension along with a tsconfig.json out of the box for you.

Creating a Component in Typescript

Create a simple MyHeader component that renders a string. Importing React's core module React in Typescript involves a different syntax, as shown below.

      import * as React from 'react';

Next, define an interface for the MyHeader component that will be passed as props to the component. An interface defines the structure of your object by giving information about the types associated with the keys of your object. Your state variables must also be accompanied by an interface.

      interface myInterface {
  name: string;
}
    

myInterface stipulates that the object will contain a key name with a string value. Assigning a different value to this key will result in an error.

Create the MyHeader component as shown below. React.FunctionComponent indicates that your component is a hooks component.

      const MyHeader: React.FunctionComponent<myInterface> = (props: myInterface) => (
  <h1>Hola, {props.name}! </h1>
);
    

Your MyHeader.tsx should look like this:

      import * as React from 'react';

interface myInterface {
  name: string;
}

const MyHeader: React.FunctionComponent<myInterface> = (props: myInterface) => (
  <h1>Hola, {props.name}! </h1>
);

export default MyHeader;
    

Render this component in the root component, or App.tsx .

      import React from 'react';
import './App.css';
import MyHeader from './MyHeader';

function App() {
  return (
    <div className="App">
     <MyHeader name="Developer"/>
    </div>
  );
}

export default App;
    

Finally, compile all the Typescript code by running the following command:

      npm start

Conclusion

If you have a React project that you want to maintain for a long time, using Typescript is a wise choice. In addition to other advantages, it documents your code using the type declarations for your classes, states, props, and interfaces for future developers on the project. Create-React-App compiles Typescript easily without hassles, making it easy for you to write and compile it in your React app.