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.

Still so much to learn? Scared of not keeping up?

It's often really hard to know what to learn next in the React world, where to spend your limited time as a developer, and how to keep up with all the tech changes and fads out there.

However it doesn't really have to be like that.

Focus on the core things that you really need to succeed, and build your satisfaction and career. Keep on top of it, by knowing what "it" really is.

Sign up for updates and you will get well researched and thoughtful articles that solve your problems, guide you and are based on real experience.

Sounds good? Sign up now. Just fill in your name and email below and click Subscribe:

.

Leave a Reply

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