Gaurav Singhal

How to Compile Typescript with React Definitions

Gaurav Singhal

Jul 31, 2020
5 Min read
10,728 Views

Jul 31, 2020
5 Min read
10,728 Views

Web Development

Front End Web Development

Client-side Framework

React

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:

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

shell

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:

1npm start

shell

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:

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

shell

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.

1import * as React from 'react';

tsx

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.

1interface myInterface {
2  name: string;
3}

tsx

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.

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

tsx

Your MyHeader.tsx should look like this:

1import * as React from 'react';
2
3interface myInterface {
4  name: string;
5}
6
7const MyHeader: React.FunctionComponent<myInterface> = (props: myInterface) => (
8  <h1>Hola, {props.name}! </h1>
9);
10
11export default MyHeader;

tsx

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

1import React from 'react';
2import './App.css';
3import MyHeader from './MyHeader';
4
5function App() {
6  return (
7    <div className="App">
8     <MyHeader name="Developer"/>
9    </div>
10  );
11}
12
13export default App;

tsx

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

1npm start

shell

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.

LEARN MORE