Intro to using TypeScript in React

TypeScript — a superset of JavaScript, undoubtably has some amazing benefits — static typing, classes, interfaces, and enhanced intellisense which can make stronger suggestions for autocompletion and handle potential errors before compiling. That means your code editor will not only make smarter suggestions to autocomplete, but also show you errors right then and there, instead of having to find out something isn’t working correctly when you switch to your browser.

Theres a few things to take note of when getting started with TypeScript in React:

1. Getting started with create-react-app and TypeScript:

First things first — create-react-app has a template to use for TypeScript that will set up the project using TypeScript and a tsconfig.json file.

If you’re starting a NEW project using create-react-app:

npx create-react-app [your app's name] --template typescript

If you already have a project made using cra, and want to add TypeScript:

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

2. Files and file types:

Now that we are using TypeScript in react, you’ll be utilizing the .tsx file extension rather than the standard .js for JavaScript.

The other things you’ll see are a tsconfig.json that has some defaults set for the TypeScript configuration, and the react-app-env.d.ts, which references the types for react-scripts and helps with things like allowing for SVG imports.

3. Components and Imports:

Because of how things are statically typed in TS, we need to do a couple extra things when setting up our components. You’ll need to import some extra things at the top of each component (*or you can use React.<> where <> is the type or event that you’d otherwise import).

Some common things I’ve found myself importing aside from some of the usual react hooks like useState and useEffect, are ChangeEvent, and FC (functional component) — the autocompletion with TS is NICE when importing things!

import React, { useState, ChangeEvent, FC } from "react";

4. Type Definitions:

The last thing we’ll focus on for today is simple type definitions. One of the main functions of TypeScript is the documented knowledge of what types we are using and where to change them, and automatic early detection to prevent bugs and errors.

There are several ways to declare a type. One of them is to use an interface:

export interface Props {   
   name: string;   
   age: number;
}

The others are more handy in the code itself. Here is an example of a simple app with a mock search function:

Take note of a few type definitions:

1. ‘App: FC’ which is defining our App as a functional component.
2. ‘useState<string>( )’ which declares that piece of state as a string. You can also do this by giving useState an empty string: useState(‘’)
3. ‘event: ChangeEvent<HTMLInputElement>’ which declares what type of event is accepted into the onSearchInput function.

There is a lot more to TypeScript than this, but so far I have been loving diving into static typing, simple error messages, and the autocompletion is next level convenience.

Cheers, I’ll be back soon with more!