Since Microsoft introduced TypeScript in late 2012, we see more and more developers and companies using TypeScript. But let’s ask the question, why? And does it make sense to learn TypeScript today or are we just too late? My short answer to both questions would be: no we are not too late and yes it makes sense. In this article, we’re gonna dive into why it’s good to use TypeScript.

Onwards!

TypeScript vs. JavaScript

To be all boring, TypeScript defines itself as a strict syntactical superset of the JavaScript language. This means that all JavaScript code is valid TypeScript code, but TypeScript has a few extra bells and whistles that are unique to it. In the end, TypeScript code does get compiled down into JavaScript. Despite TypeScript being its own language, its final output is just our tried and true JavaScript that almost everything with a digital pulse can run these days. What are some of the extra bells and whistles that TypeScript brings to the circus called web development? Let’s find out!

Type Checking

As its name implies, TypeScript is all about types. At a very high level, TypeScript requires you to formally define the kinds of values you want to use upfront and stay consistent. For example, the following variables are all designated to be used as numbers:

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

You can see the different syntax TypeScript uses to allow us to specify the type for each of these variables. If we attempt to change any of these variable to store something other than a number, we will get an error. For example, below is what happens when we have our decimal store a string value instead of a number:

This is in stark contrast to JavaScript where any variable can store a value of any type, and you can even switch around the types of values a single variable stores while your program is running. The same snippet from above in a pure JavaScript world will look as follows:

let decimal = 6;
let hex = 0xf00d;
let binary = 0b1010;
let octal = 0o744;

decimal = "I am a little teapot!"; // totally OK

This TypeScript ability to enforce types may seem like a very minor change, but it is one of those things that makes writing large and complex apps in JavaScript much more efficient.

Better (and Earlier) Error Detection

If you have any experience developing websites or web applications with JavaScript, you will have run into many cases of errors where a method wasn’t defined, a variable was used without being initialized, and so on. These errors were ones you (or your users 😱) encountered when testing live in the browser.

Because in TypeScript we define up-front the variables and the type of values they will show, it is easy for our favorite code editor or linting tool to statically analyze our code as-written and quickly tell us of any shenanigans:

It’s always a good thing to find errors early in our development cycle as we are writing our code as opposed to much later when everything is live!

The Future...Today!

Because TypeScript is a superset of JavaScript, it has the flexibility to introduce new features much sooner than what JavaScript itself can. For example, TypeScript introduced support for the class syntax first before JavaScript formally added to its language. Module loading is another example of a feature found in TypeScript first. Arrow functions, async/await, and default parameters are a few more TypeScript originals that found their way into JavaScript later.

There are also a bunch of features that TypeScript currently has that don’t exist in JavaScript at all. Take a look at the following example taken from the documentation:

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.textContent = greeter(user);

Being able to define an interface is something TypeScript supports, but JavaScript doesn’t support it...yet. You can see a short list of these cutting edge features on Wikipedia.

 

With Broad Usage Comes Great Ecosystem Support

It is safe to say that TypeScript brings a lot of “adult supervision” found in traditional programming languages to the freewheeling world of JavaScript. This means that very large and complex applications that would have been a nightmare to build in the olden days are made much more tolerable thanks to TypeScript. The StateOfJS report shows a steady increase (the red region) in the number of people who are using TypeScript over the past few years:

This growth in usage translates to real things that we use that are based on TypeScript! Some popular thing built on TypeScript include the collaboration tools Microsoft Teams & Slack, the Angular framework, the Medium blogging platform, the awesome editor Visual Studio Code, the NodeJS-like Deno, and many MANY more apps/projects/libraries/frameworks.

To add another feather to TypeScript’s overflowing cap, the ecosystem around TypeScript is thriving as well. Almost all major JavaScript frameworks and libraries provide good TypeScript integration. Popular IDEs like Visual Studio Code provide out-of-the-box support for TypeScript. Cloud environments ranging from AWS to Azure to Google Cloud allow us to easily build TypeScript-based apps on their platforms. The list goes on and on and on and on...

 

Conclusion

So...yes, learning TypeScript today still makes sense despite the improvements JavaScript has made in the recent past. TypeScript fixes a lot of the shortcomings found in JavaScript, and it continually adds new capabilities that we hope that JavaScript will one day adopt in the future. This strong feature set combined with the rich ecosystem and explosion in popularity makes TypeScript a keeper in our web toolbox - both for today and tomorrow! To go further, check out my TypeScript for Beginners series.

If you have any questions around TypeScript or whether it is smart to use it for your project, please let me know in the comments so I can help you further.

COMMENTS