Why You Need to Learn TypeScript Now

A recently published ECMAScript proposal plans on introducing type syntax to JavaScript natively inspired by Microsoft's work on TypeScript. Types are here to stay and if you aren't using TypeScript already it's time for you to learn it today.

I was initially skeptical about TypeScript, and let me tell you: it is incredible. Not only is it beneficial and a great skill on your resume, but it is also quickly growing into a standard for web development - especially to help scale the codebases of large projects.

In the 2022 StackOverflow survey, TypeScript ranked as the 5th most popular programming language - only behind JavaScript, HTML/CSS, SQL, and Python.

When I first learned about TypeScript, I thought it was a complete replacement for JavaScript. And if I wanted to use it, I had to convert my entire codebase to .ts files immediately. But I soon learned that's not the case at all.

TypeScript is a strongly typed superset of the JavaScript language - meaning you can use the same JavaScript you already know and love. And you don't need to dive in head first. Instead, you can iteratively introduce it as you and your team gets ramped up.

Why Use TypeScript

TypeScript will not solve all your problems, but it can help you write better code faster and feel more confident about your changes. However, nothing is free, and there are costs associated with TypeScript - but you will realize the benefits far outweigh the drawbacks.

Benefits:

• Catching type errors at compile time.
• Speed and confidence of development.
• Safeguard API interfaces.
• Safeguard against potential bugs.

Drawbacks:

• Steep learning curve.
• Bloated codebase.
• Not "true" static typing.
• Extra compilation step.

Static Typing

JavaScript is a dynamically typed language, meaning datatype errors are checked at runtime when your application runs.

On the other hand, TypeScript uses optional static typing that will catch data type errors at compile time before running the application.

This offers a much cheaper and faster feedback loop for your developers as it helps catch errors introduced by accidentally using existing code incorrectly. In addition, catching errors at compile time instead of runtime in your automated tests helps "shift left" your development.

And keep in mind that it is optional typing - meaning you don't have to fully enforce it immediately as you introduce it to a new project. Instead, you can slowly start incorporating it throughout your project and iteratively make the enforcement stricter.

Speed and Confidence of Development

With statically typed code, you can expect to experience a boost in the productivity and confidence of development. This comes in the form of:

• IntelliSense: IDEs can provide hints and warnings as you write code to help you use particular code more quickly.
• Readability: When you read TypeScript, you will be able to more quickly understand what the code is doing with the help of type definitions. Which alone makes the code more maintainable and scalable but also makes it self-documenting.
• Predictability: In JavaScript, you can reassign variables to different datatypes - converting strings to objects to numbers. Most developers know to be careful, but TypeScript makes this impossible by enforcing strict typing on your code and making the usage of it by everyone predictable.
• Refactoring: With the confidence of type checking, you can be assured that any refactoring you do will not cause other code to break. If you did introduce breaking changes, TypeScript would let you know. Which significantly boosts your confidence and shortens the feedback loop when making significant changes across a codebase.

Safeguard API Interfaces

TypeScript forces you to honor interfaces within your code and external code if you include type definitions in your npm modules. Which helps make sure you are not accidentally misusing functions or APIs.

Imagine if you have a REST API running on Node.js written using TypeScript; you could share types between your REST API and your frontend code, ensuring that any changes to either adhere to the same schema. And automatically at compile time!

Safeguard Against Potential Bugs

While not perfect, research has shown that TypeScript could have helped save 15% of bugs found in open source projects.

Developers can introduce bugs in any language, so do not take this analysis verbatim or as a promise. But TypeScript does offer some help. Anecdotally, it has forced me to think more critically about how data is passed around in my applications, making me more conscious of such bugs.

Steep Learning Curve

The basis of TypeScript is very much like the JavaScript you are already using today. So any JavaScript developer reading TypeScript code should be able to read it and understand what is going on. And the basic type structure is easy enough to pick up.

However, using TypeScript in a real-world application comes with a learning curve. Many nuances, gotchas, and advanced patterns in TypeScript are very particular. As a result, you will encounter many corner cases if you deal with complex code.

The good thing is once you understand how TypeScript works, these situations are reasonably straightforward to navigate with the help of some Googling. But it takes time to master TypeScript.

Luckily you don't have to jump in all at once. You don't need to run TypeScript in "strict" mode immediately, and you can start with introducing TypeScript only to where it matters the most. This should help ease the pain of learning for you and your teammates.

I would advise you to dedicate time to learning the fundamentals. It will have a huge payoff for your future career. Follow some tutorials, videos, or online courses and get your hands dirty with examples.

Bloated Codebase

Some might say that using TypeScript bloats the codebase by adding type definitions, making every code file bigger.

This is undoubtedly true, but I would argue that the "bloating" comes from introducing types that increase the readability and predictability of the code. Fewer lines of code do not necessarily make your codebase cleaner or better. Instead, more verbose code can make it much more straightforward for everyone to understand and thus help long-term maintainability.

If you use a modern IDE, you will also get many productivity improvements from your IntelliSense.

Not "True" Static Typing

TypeScript does not use "true" static typing like C++, C, or Java.

At compilation time, TypeScript compiles down to plain JavaScript. Unfortunately, all the type definitions are dropped during the process because they are not native to JavaScript. As a result, there is always a slight risk of edge case errors.

You can minimize this risk with a good CI/CD design and comprehensive automated testing.

Extra Compilation Step

TypeScript has to be compiled down to JavaScript to run in most browsers or Node.js environments. This additional step adds to your application's overall build time.

Some tools help you mitigate this, such as the fork-ts-checker-webpack-plugin that allows you to run TypeScript validation in a separate process from your primary Webpack build step. Which significantly boosts the overall Webpack build time.

Note: If you only use Babel to transpile your TypeScript down to JavaScript, be careful as it does not run type validation, and errors get ignored.

Introducing TypeScript Iteratively

Introducing TypeScript does not have to be a painful process. Whether you're new to TypeScript and want time to learn all it has to offer, or you're like most developers and work in an existing codebase that does not yet use TypeScript, you can start iteratively.

The first step is to add support for TypeScript in your compilation. Most compilers and bundlers have plugins and tools for compiling TypeScript alongside your JavaScript. For example, for Webpack, you can use ts-loader or fork-ts-checker-webpack-plugin.

Once you've done this, you can start slowly introducing .ts files without removing any of your existing .js files.

Note: Creating the base layer of types for common code will take time and dedicated effort to realize the productivity benefit of types across your codebase.

I would suggest starting with code that is the most core to your application or re-used often. Things like common utilities, REST API handlers, shared components - anything that would help the most developers the soonest.

Eventually, once you've mastered TypeScript and are ready to be fully committed, consider running it in strict mode to help all developers avoid using some common crutches like the any type.

For help throughout the process, I would highly suggest the official TypeScript documentation: https://www.typescriptlang.org/docs/.

Future of TypeScript

Microsoft released TypeScript in 2012; it has come a long way since then. Static-type checking has found a place in the JavaScript community, and its popularity is only increasing.

It made sense back in 2012 to introduce something that required a new compilation step as everyone was already using bundlers and compilers to solve browser compatibility. But the ECMAScript standard has evolved quite a lot.

As a result, Microsoft believes we might soon see a world where we no longer need compilation to ship applications to browsers. So they recently introduced a stage-0 proposal to add optional types natively to JavaScript in the form of JSDoc-like comments. Rest assured, this is not a replacement for TypeScript, and adding static type checking natively to JavaScript will be a long uphill battle. But that is a future I would love to see.

Read more about it here: https://devblogs.microsoft.com/typescript/a-proposal-for-type-syntax-in-javascript/.

Final Thoughts

TypeScript comes with some costs, but as you can see, it can significantly benefit your project. It can help scale your codebase, increase productivity and make everyone's lives easier. Learning it today will reap benefits for your career.

What do you think of TypeScript? Are you on the fence about giving it a try? Then, do it - you won't regret it!

Let me know what you think.