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:

#react