The benefits of using TypeScript for React

If you are like me, you are used to typed languages like C# that use types, and so what the advantages and familiarity of types in your front end code.

However for many people, they can be thrust onto a TypeScript codebase at work, or when say working on an open source project, with no experience of typed languages. It might feel like you are fighting the codebase trying to get the thing to compile.

I aim to convince you that TypeScript is a good thing for your projects, overall. In the long term.

In the short term, there are some pains though:

  • You will need to learn the syntax and the type system
  • You need to set up tooling, and probably understand how to set up things like tsconfig, source maps and most likely use Webpack if you haven’t already.
  • With a new language come best practices etc. which will take some time to intuit.

These things take time and practice.

If you are on a team using TypeScript you can get help from your team mates, and also a lot of the tooling will be chosen and in place, there is probably an npm run command already set up for you to build and run the project.

In the long term though there are excellent benefits from using TypeScript:

  • Your code will be checked before it runs for all kinds of common mistakes – typos, incorrect use of types or nulls. All sorts of bugs will be eliminated before the code runs.
  • You will be able to get great autocomplete and discoverability gains when using TypeScript with an editor like VSCode. It will speed up development.
  • Refactoring is a lot easier. Changing a variable name can be done at the variable declaration, or anywhere it is used by pressing F2 and renaming it. Because of the types the editor can now go find all usages and rename those too.
  • TypeScript has generics, so you can create generic functions that work across many types. You can also create these in plain JS, but there is no checking they are being called properly in plain JS.
  • A lot of companies and open source projects now use TypeScript, so you will increase the number of codebases you can contribute to.

The biggest benefit is: It will save your ass!

I find that for any codebase beyond 200 lines of code, and with a brain like mine that can’t keep it all in your head at once, you will definitely want typing like TypeScript provides. I regret when I don’t start a project with TypeScript because I end up wasting a lot of time with silly mistakes.

You may have noticed that there is nothing specific to React about the advantages of using TypeScript I have given. Indeed, any JavaScript application can benefit from the type system provided by TypeScript.

If you want to start learning Typescript, go easy on yourself. Learn it slowly and integrate it into your critical projects at a later date. The best place to start is on the official site. You can learn a bit and apply it to toy projects. Even just adding types to function arguments, so they get checked and otherwise writing normal JS will have benefits.

Posted by Martin Capodici

.

Leave a Comment

Your email address will not be published. Required fields are marked *