Software Development
Dominik Grzedzielski, 2021-03-26

Why you should (probably) use Typescript

Everyone who use JavaScript ecosystem is nowadays aware of Typescript. Typescript is one of the most beloved technologies* and its usage is constantly increasing (usage share increased from 52% in 2018 to 78% in 2020)*.

Current position of Typescript didn't come out of nowhere as that technology is able to really improve our developer experience. More explicit coding increases control and predictability of code. In this article, I'll try to convince you to use Typescript.

*- Data source: State of JS 2020 and Stack Overflow Developer Survey 2020.

Find out about errors earlier

Usually, when you are developing an application in JavaScript, your flow might look like this:

  1. Make a change,
  2. Go to the app and check out the changed part / Run (related) tests.
  3. Find out if everything is ok.

With Typescript, you can actually make the change and if there's any type error in your code, you will know immediately thanks to the compiler error message or IDE real-time feedback. Of course, the Typescript compiler won't resolve every problem and won't warn about your all bugs, but its help could be invaluable.

Better syntax completion in IDEs

It's really simple. If you are using good IDEs, like WebStorm or VSCode, you will get better syntax completion with Typescript. Maybe it doesn't sound like huge developer experience improvement but eventually every single improvement matters as it could save us some time and, again, prevent from a typo or a mistake. Also, we can define our type or interface once; as we don't have to always remember structure, we can focus on writing business logic.

code

JS code

Less painful refactoring

Imagine that you have to refactor for whatever reason, for example, you joined a project and you get the task to add a new feature, but that feature is somehow connected with legacy code. Typescript can make it easier and less painful because when you make a change and there's another place where you have to make another change, the compiler will warn you about that.

For example – it could be a changed function signature or maybe after the change, a function will return something totally different, so also the returned type will differ.

Be more confident about codebase

JavaScript is weakly and dynamically typed, so when you initialize a variable with the value let query = '' later in code, the developer may do something irrational by mistake, for example query = true, and it will be valid JS code.

In a well-written code, assigning a boolean value to a variable that was previously a string should not happen. So, usually, that assignment with type change results from a mistake.

When using Typescript, we can't change the type of the variable, so if we make the let query = '' variable, it will be string type and we won't be able to change its type by mistake.

If we want to let a variable to be more than one type, we always do it explicitly using union type, for example string | number.

Therefore, Typescript makes our code more predictable and explicit. Also, Typescript will take care of explicitness in control flow analysis and if there's a possibility that something could go wrong, it will warn you.

code sample

Here in example in first if block we'll get error:

TS2339: Property 'battery' does not exist on type 'ClothingProduct' 2 times, for battery, and ram properties.

In second block - else, we'll get that error for size property. Of course, it's only an example to show you how discriminated unions and control flow analysis work in Typescript, so we are not doing anything too complex with that code.

Easy, progressive migration from JavaScript

Valid JavaScript code is at the same time valid Typescript code, so you can migrate your codebase step by step. Usually, using strict mode in Typescript is good practice, but in this case, we have to start with "strict": false in tsconfig.json and we should also set 2 more options.

"allowJs": true, // it will allow us to use .js files and the type won't be checked in them
"skipLibCheck": true // it will skip checking types in libraries that we use

With those options, we can migrate from JS to TS step by step – file by file, simply changing the extension from .js(x) to .ts(x) and adding types in the files. Using this approach, we can avoid hundreds or thousands of scary compilation errors.

Summary

I think we should use Typescript as often as possible, because it's really beneficial in the long term. It helps to maintain projects, increases developer experience, and makes our codebase more explicit and reliable.

However, as always, there are exceptions – for example, for a simple landing page where JavaScript is only used for toggling class or another simple case, Typescript makes no sense. Also, we have to remember that to take full advantage of Typescript, we have to learn to use it on a sufficient level, and it can take some time. I think it's still a very profitable investment of your time.

free code review

Read more:

The Codest is recognized by Techreviewer as a Top Software Development company in 2021

Ruby 3.0. Ruby and lesser known privacy control methods

Highest quality code in your SaaS project. Why should you care about it as a (non-technical) founder?

*The title graphic come from Know Your Meme website.