React + TypeScript = ❤️

Liam Lindner — Mon, 25 Jan 2021 19:14:34 +0000

TypeScript is a useful tool for cutting down on unnecessary tests and building more confidence in your codebase. When paired skillfully with React, you can prevent errors caused by passing the wrong type of data to React components. You won't need to write tests for errors that the compiler can catch. And you will get productivity benefits by leveraging refactor tools and code completion in your IDE.

First, let's talk about TypeScript (TS). TS is a superset of JavaScript (JS), so everything you can do in JS you can do in TS with the addition of types. The TS compiler will not compile your code if you pass a variable with the wrong type into a function. Typescript does not fix your bugs, but when wielded correctly it greatly improves developer productivity and eliminates the need for unit tests that check types.

JavaScript

A simple function that adds two numbers.

function add(first, second) {
  return first + second;
}

JavaScript lets you pass anything into the add function and has no indication of what type comes back. This commonly results in errors, which leads to writing tests that the TS compiler could handle.

TypeScript

A simple function that adds two numbers, this time with type annotations for the parameters.

function add(first: number, second: number): number {
  return first + second;
}

Your IDE can read type annotations and provide helpful code completion.

Your IDE can show compiler errors when the wrong type is passed in.

React

React is a popular UI library that uses the component pattern to separate your code into reusable chunks. You can think of most React components as functions. Functions take in parameters and return a value. A React component takes in props and returns other React components or DOM elements. Those props are where TypeScript comes into play. Each component has an API. Maybe it takes in a single string, maybe it takes in an array of objects, maybe some props are optional and others are required. Without TypeScript, you have no assurance that the props you are passing in are valid. When you invoke each component you’ll have to dig into the implementation just to know what types it expects.

Below are two examples. The first is what you get when you write your React components in JavaScript. You can read the component to figure out which props are optional and what types they need to be, but this approach is cumbersome and prone to bugs.

Here is an example of using TypeScript. We declare the TSExampleProps interface and define the title prop as an optional string, the time prop as a Date object, and the items prop as an array of strings.

Your IDE complains when you pass the wrong types in

Your IDE gives useful code completion hints

When following this pattern, you can leverage refactoring tools that your IDE provides to quickly change any React component's API. The cost of maintenance goes down because the TS compiler catches bugs before you can write them. And you don't need a bunch of brittle unit tests. Give TypeScript + React a try and let me know in the comments below what additional questions you have.

If you’re familiar with types and want to leverage them in your next react project, check out Create React App’s official support for TypeScript when bootstrapping a project: https://create-react-app.dev/docs/adding-typescript/

Forem: Liam Lindner

React + TypeScript = ❤️

JavaScript

TypeScript

React