No matter how much you love JavaScript, as with all languages, there are certain aspects of it that are bothersome and frustrating. The lack of strict typing of variables/objects and the mysterious reference errors that don’t present themselves until run-time are among the most common complaints about JavaScript. Luckily, TypeScript offers a solution, especially for React-based applications.

TypeScript alleviates these headaches for vanilla Javascript. When integrated with a JavaScript framework like React, web application development becomes much more consistent with a standard object-orientated language.

In this blog post, I will be giving you a high-level breakdown of what TypeScript is and how to use it with either a new or existing React application.

What is TypeScript?

TypeScript is an open-source language developed and maintained by Microsoft. Its purpose is to accommodate development headaches associated with large-scale, javascript-based applications.

Essentially, TypeScript adds an additional layer of functionality on top of vanilla JavaScript. It focuses on stricter type definitions of primitives, objects, methods, and classes. This allows the developer to discover errors faster and implement custom or third-party components that may require specific properties in order to function as desired.

TypeScript serves as a superset of JavaScript. It is compiled into vanilla JavaScript code by either the default TypeScript tsc compiler or Babel.

I highly recommend checking out the official TypeScript docs to learn about the specifics on all of the functionality available, including types, interfaces, enums, generics, functions, and classes.

Getting Started

At this point in time, TypeScript is mature enough that integration with a new or even existing React application is a pretty simple process. It should require very little if any migration rework.

If you’re using Create React App, you can either create a new or upgrade an existing React project with TypeScript using the following commands:

New Project:

npx create-react-app my-app --template typescript

Existing Project:

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

TypeScript code requires a distinct file extension in order to be captured by the compiler. The default is .ts and a special .tsx extension for files containing JSX.

You can simply change the file extension of any .js or .jsx files to their TypeScript equivalent. Then, the default react-scripts start command will automatically build all of your TypeScript React components into vanilla JavaScript.

npm start

React Enhancements

The well of enhancements you can make to your React application using TypeScript is deep. But, for the sake of simplicity in this blog post, I’ll focus on two of my favorites: component props and application state.

Component Props

Below we’ll find a simple example of a custom React component. We’ll also see that component is being used within a separate component. Notice that the interface is being set with a type-string name and an optional boolean flag named isAwesome.

Now, let’s take a look at what happens when we force a type mismatch and a missing required property.

A quick keyboard shortcut in VS Code, “CTRL+SPACE”, pops up a list of valid properties and their types.

With that simple process, we’ve quickly integrated a custom component properly. Now, we just need to let our teammates know how to use our component, and just like that, we’ll avoid runtime errors in the console of the browser.

Application State

The other enhancement I’ll cover involves application state.

Making small adjustments to properties of a state object has caused me all sorts of headaches in the past. Now, as long as the selector is initialized using TypeScript, any breaking changes will become immediately apparent.

Here is an example of a simple reducer and an instance of an overloaded useSelector hook with our custom state object.

Now, we can call our custom selector hook from our component and use our app state however we may need to.

Let’s say for some reason that we need to update the Thing object’s isCool property so that it should be a number instead of a simple boolean.

Typically in this situation, we would then have to remember everywhere we used the isCool property throughout our application to avoid an error at runtime. Fortunately, with TypeScript, we get a compilation error in the terminal and a direct error in the editor.

With this fix, much less time is spent bouncing back and forth between the editor and the browser nailing down tiny little property is undefined errors.

Conclusion

In conclusion, TypeScript has completely changed the way that I work with React and JavaScript overall. By being able to set complex types for variables, methods, and even entire components, building React applications goes from building a house of cards held up by duct tape and dreams to a precise, large-scale, professional construction project.

In this blog, I’ve only scratched the surface of what TypeScript is able to offer. I highly recommend considering TypeScript as part of your web development stack moving forward. The developers maintaining your code in the future (including you yourself will thank you.