We need to build a high performing interactive frontend, so, we’ve chosen to use React to help us do this. Using TypeScript in addition to React can give us a ton of additional benefit. Let’s take a closer look at some of these benefits …

Catching problems earlier

The static type system in TypeScript helps catch problems early. For example, if we haven’t supplied a prop that is required when referencing a component, the TypeScript compiler will detect and report this. VS code can then immediately point this out to us with a red squiggly line:

When we create new required props in existing objects, TypeScript will tell VS Code about the objects that need updating:

The information that TypeScript surfaces about the problems is always very specific and useful as we see from the above examples.

TypeScript is even clever enough to work out the correct properties in branches of code where the type has been narrowed. Have a look at the example below at how TypeScript knows the specific type for the action argument in the switch branches in the reducer function. When emailAddress is used in the wrong branch, the problem is immediately pointed our to us:

Accurate intellisense

The static type system means that the items in the intellisense are 100% accurate for the object type we are referencing. TypeScript will also narrow down the type and intellisense choices where it can:

The new IntelliCode feature takes intellisense to a new level as well.

Top notch refactoring features

TypeScript gives VS code the power to take refactoring to the next level. For example, if we rename a component in a pure JavaScript React app, VS Code can automatically rename references in the same file but unfortunately not in different files:

However, if we are in TypeScript land, we automatically get references across our entire codebase updated:

Great code navigation

In a JavaScript React app, navigating through code through different files is a struggle for VS code:

However, the Go to definition feature works perfectly if we have TypeScript in the mix:

Cracking linter

TSLint can perform additional checks on our TypeScript code. tslint-react provide us with a great set of rules for React and TypeScript apps. For example, if we forget to self-close an element in our JSX, we immediately get warned:

Another useful check TSLint provides is missing key props on JSX element array literals:

Useful transpilation

TypeScript allows us to use JavaScript features not implemented in IE but still include IE in our browser targets. A great example is leveraging the async and await keywords to make our asynchronous code nearly as readable as synchronous code:

...
await Promise.all(validations.map(async (validation) => {
  if (validation && validation.rule) {
      const newError: string =  await validation.rule(values, fieldName, validation.args);
      if (newError) {
          errors.push(newError);
      }
  }
}));
...

The example above executes a collection of asynchronous validation rules using await and promise.all which aren’t supported in IE. TypeScript transpiles this into code that IE does support.

Mature but still rapidly developing

The first release of TypeScript was way back in 2012. As a result, it is very robust and lot’s of editors have support for it like VS Code. It is still developing fast though. Have a look at the release history - we are still getting a couple of releases every month.

It’s flexible

The type system is super flexible which is important for writing generic and reusable code. Both angular and vue are now using TypeScript to build their framework which highlights just how flexible it is. Obviously, it also works brilliantly with React!

Just look at all the compiler options as well - whether our React app is a greenfield or brownfield, we can bend the compiler to meet our needs.

It’s popular

TypeScript has a big community that is still growing. Have a look at npm trends and compare the download rate with flow.

This popularity means that lot’s of libraries like Redux, Style Components, Formik, React Intl have great TypeScript support.

CRA support

Create React App now supports TypeScript out of the box. Have a look at my previous blog post at how easy it is to scaffold a React app with TypeScript using this tool.

Downsides

It isn’t all roses and unicorns though. One of biggest complaints about TypeScript is the extra code we need to write to inform the TypeScript compiler about the types of the variables in our code. This is true to a degree, but in many cases TypeScript can cleverly infer the types used in our code without us adding type annotations. In the example function below, we only need a single type annotation for the text parameter - TypeScript infers the rest of the types:

The other major complaint is about the availability of Types in 3rd party libraries. Again, this is true to a degree, but as the popularity of TypeScript has grown, this has become less of an issue. I rarely find a library that I want to use without TypeScript types these days.

Wrap up

TypeScript can add lots of benefit to React projects - particularly if the project is large with a sizeable team. It’s never been a better time to give TypeScript a go on our next React project!