Benefits of Implementing TypeScript Early

When you’re getting started on a new project, does it make sense to start off using TypeScript or to implement it later when it becomes more of a must-have? Let’s dive into when and why it’s better to start early.

Find errors earlier, with fewer bugs

When you develop an application in JavaScript, your flow might look like this:

1. Make a change
2. Go to the app and check the changed part and run the affected tests.
3. Find out if anything broke.

With TypeScript, you can make the change and immediately be alerted by a compiler error message or IDE real-time feedback to any type errors. Of course, the TypeScript compiler won't resolve every problem and won't warn you about all bugs, but it helps speed things up.

The type information is also checked by the TypeScript compiler. The compiler will tell you when your code is not type-safe. It’s the classic benefit that type checking brings: Catching bugs earlier in the development process. You will catch and fix bugs during development instead of your customers finding them when your app is in production. The TypeScript compiler has a strict option that enables stronger type checking. With the strict option enabled, it can flag more potential problems.

It’s best to not use the strict mode when migrating an existing JS project to use TypeScript. In a TypeScript migration project, starting with the strict checks disabled makes it possible for you to have the build passing and the program running with less effort. If you enable the strict checks, you’ll need to do more significant refactoring such as defining the types to make the compiler happy.

It should be noted that this industry is using several techniques to catch bugs. Typescript and its static type checking are only one of these techniques. Some of the other recommended practices include Test Driven Development (TDD), pair programming, code reviews, design reviews, and linting.

If you are using TDD and code reviews, you are likely already efficient in finding bugs early. In this case, adding TypeScript will not have as significant of an impact on improving quality. You should consider your situation and try to determine whether the benefits of TypeScript will outweigh the costs of implementation.

Achieve better syntax completion in IDEs

If you are using an IDE like VSCode, you will get better syntax completion with TypeScript. Maybe it doesn't sound like a huge developer experience bump, but each little improvement potentially saves you time. Another plus: when you can define the type or interface once and not have to constantly remember the structure, you can focus on writing better business logic.

Refactor more easily from JavaScript

Imagine you’ve joined a project and have the task of adding a new feature, but that feature is connected with legacy code. TypeScript will help by alerting you when you’ve made a change and need to update the same piece somewhere else within the file.

Valid JavaScript code is also valid TypeScript code, so you can migrate your codebase file by file. Usually, using strict mode in TypeScript is good practice but in this case, you’d start with false to prevent hundreds of compilation errors. Once all the files have been updated to use TypeScript, setting strict mode to true will give you a standard to stick with.

Begin by setting a few configurations inside the tsconfig.json file:

`"strict": false,` 

`"allowJs": true, // will allow using .js files without checking the type 
"skipLibCheck": true // will skip checking types in used libraries`

With those options, you can migrate from JS to TS file by file, simply changing the extension from .js(x) to .ts(x), adding types in the files, and fixing any errors that pop up along the way.

Feel confident about the codebase

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

When using TypeScript, you can't change the type of the variable, so if you make the let query = '' variable, it will be string type and you won't be able to change its type by mistake. If you want to let a variable be more than one type, you always do it explicitly using union type, for example, string | number. TypeScript makes your code predictable and explicit.

Work as a team

JavaScript is adequate when working alone, but it’s sub-optimal for teams.

It’s suitable for quick development. When working solo, It doesn’t matter if the code is hard to understand for others, as long as it makes sense to you. Most likely, you can understand it well enough to maintain it on your own.

JavaScript allows for rapid development partly because it does not require any types or interfaces to be written. You are not “wasting” any time in writing this typing.

I recently started working on a huge JavaScript codebase that had been authored by one developer over several years. My task was to implement a small enhancement, but I was unable to do it in a straightforward or easy-to-implement way because it was too hard for me to understand what was going on in the code.

The original developer was able to still make changes to it, but for me, the code did not make sense. The coding style, or the lack of it, made it impossible for me to understand.

Type declarations are part of what makes the code easier to understand. You can immediately see from the type declarations what data the function takes in. Interfaces describe the structure and typing for all complex parameters. There is no need to inspect the calling code, the function implementation, or the unit tests, to figure out what fields these complex objects are composed of.

A shared understanding of the code becomes vital when you are working as a team. Added type information brings better understanding.

Typing

As mentioned on its official website, TypeScript is JavaScript with added Type annotation. Now, the question may arise whether a statically typed language is better than a dynamically typed language. The answer is: it depends. Because of its type system, TypeScript has the following advantages over JavaScript:

• It is easier to understand
• It is faster to implement using modern IDEs
• It is quicker to refactor
• It gives better performance

Language Design

There are many other typed JavaScript languages. What makes TypeScript unique is the language design. Anders Hejlsberg is a veteran programming language designer who has previously developed programming languages like Delphi, Turbo Pascal, and C#. He used those experiences to design TypeScript as a clean, elegant programming language.

Most of the other programming languages first design their type system and then use it. But TypeScript designers first looked at the JavaScript use cases and later developed the type system so that it retrofits the JavaScript use cases. Also, unlike the C-family languages, which use nominal types, TypeScript uses structural types. Structural types are a way of relating types based solely on their members, unlike nominal types which say that two variables are type-compatible if and only if their declarations name the same type.

TypeScript uses some of the most advanced type systems like Union Types, Intersection Types, Differentiating Types, Nullable Types, Conditional Types, and Type Inference.

In terms of language design, it is comparable to other modern languages like Kotlin, Go, or Rust.

Development Scaling

Due to its type system, elegant language design, and IDE support, TypeScript will lead to better development scaling compared to JavaScript in a large project. It is no wonder that the official slogan of TypeScript is: “JavaScript that Scales.” As development scaling is a significant factor in today’s software development industry, an increasingly large number of corporations and large open-source projects are using TypeScript.

Developers Love It

The TypeScript team at Microsoft has done an excellent job designing TypeScript as a pragmatic modern programming language. Their hard work is vindicated as the software development community loves TypeScript.

A language can have excellent features, but it does not mean that the language will be popular. Also, some languages gain popularity (like Scala and CoffeeScript) but quickly fade away.

Fortunately for TypeScript, it is already a trendy language. According to the GitHub Contributions, TypeScript has entered the Top 10 List (ranked 7th) and is one of the fastest-growing languages. It ranked fifth with a 161% increase in adoption last year. With almost 12 million downloads every week, it is one of the fastest adopted technologies within the JavaScript landscape.

Open Source

Microsoft first created TypeScript in 2014. As Google was also planning to develop a similar typed JavaScript at that time, Microsoft and Google collaborated together to bring you TypeScript. It is also open-source with a very permissive Apache 2.0 license. Currently, TypeScript is supported by many other large corporations and software development communities. The following JavaScript frameworks have either implemented or plan to implement TypeScript:

• Angular
• Vue
• Ember
• Svelte

With its enterprise-friendly features, which are very valuable in writing and maintaining a large code-base, more and more large companies are turning to TypeScript.

Superset Of JavaScript

Another killer feature of TypeScript is that it is typed JavaScript with some extra features which are not yet in JavaScript but may come in the future.

When TypeScript first added Class and Module support, JavaScript did not have them. Once JavaScript incorporated them, TypeScript aligned itself with JavaScript. TypeScript looks at the ECMAScript specification, and TC39 committee and implements Proposal, Draft, or Candidate features ahead of JavaScript. Most of the time, JavaScript ends up implementing the same features. For example, here are some TypeScript features that are not yet in JavaScript:

• Optional Chaining
• Nullish Coalescing
• Enum Type
• ECMAScript Private Fields
• Top-Level await

With a three-month release cycle, TypeScript can add proposed ECMAScript features much faster than official JavaScript does.

When don’t you want to implement TypeScript?

There are times you won’t want everything that TypeScript has to offer - for a simple landing page where JavaScript is only used for toggling class or another simple case, TypeScript isn’t worth implementing. Also, you have to remember that to take full advantage of TypeScript, you have to learn to use it on a sufficient level, and it can take some time. Other reasons include:

• Quick prototypes are easy to develop with JavaScript
• Single-use scripts (migration scripts etc.) are an excellent fit to be done with JavaScript

JavaScript has the following advantages over TypeScript for its dynamic type:

• No additional compiling step
• Concise and succinct code
• No need to learn the “extra” type system
• Easier to write higher-level abstraction without a type system

TypeScript does not come for free. There is some cost associated with using it:

• It takes effort to write type annotations and maintain them
• Type annotations add clutter to the code base

Conclusion

In the end, it comes down to your project and the amount of time and effort needed, and your team will have to weigh the pros and cons of implementation. If you decide to add TypeScript to your project, the benefits will appear quickly, from better code completion to bug prevention, and it will improve your teams’ lives when it comes to their code.