Is TypeScript Worth Learning For Web Development?

JavaScript Open Source Web Development This post may contain affiliate links. If you buy something we get a small commission at no extra charge to you. (read more)

TypeScript is defined as a superset of JavaScript, which means it behaves identical to JavaScript but with extra stuff added on. The language hasn’t been around too long but it’s already quite popular in the dev community.

It grants JS developers access to powerful tools & techniques for writing modern JavaScript, coupled with the option to output ES5 or ES6 code. The Angular team even supports TypeScript as a major part of their framework update.

But is it worth your time to learn TypeScript? Can it really improve your dev projects? There are varying opinions on this subject. I’d like to weigh in by clarifying some points regarding TypeScript’s value and how it compares to CoffeeScript & Babel.

A Consensus On TypeScript

There’s a lot to be said about this little superset language. It has skyrocketed to popularity in just a few short years with complete adoption from AngularJS and many dev workflows.

typescript google search trend chart
Google Trends chart for TypeScript

But if you don’t already know TypeScript is it worth learning? My opinion is yes—but only if you’ll be able to apply the features to your daily workflow.

If you’re a hobbyist then TypeScript may not be vital to learn(but could still be fun). If you prefer ES2015 with Babel then TypeScript might not interest you at all.

But if you’re a professional frontend developer or hoping to become one, TypeScript is well worth learning. Even if you only pick up 5% of the language it’s still worth familiarizing yourself with the concepts to make yourself attractive for employment.

Plus it gets easier to learn once you understand the basics, and those basics are even easier if you already know JavaScript.

AngularJS is also big on TypeScript so it’s a lucrative learning investment for many areas of web development.

And after reading developer feedback I feel that if you can make the time, TypeScript is worth the time.

What It Is & What It Isn’t

Generally speaking, TypeScript is a superset of JavaScript which compiles into JavaScript code. It’s used to improve your code quality with OOP features and static typing. This transfers well into large-scale projects passing code between multiple team members.

You write in TypeScript but don’t run TS on your web server; ultimately it’s all JavaScript. I think Dan Wahlin says it best in this blog post:

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.

Naturally you might assume that all JS code is valid TS code. This is mostly true but sometimes incorrect since TypeScript has its own syntax for handling type annotations. This allows TS developers to specify the types of variables, parameters, and callbacks—something that plain JavaScript just can’t do.

A Brief History

Microsoft created TypeScript with its first public release in October 2012. Anders Hejlsberg, the creator of Delphi and a lead C# architect, played a major role in the development of TypeScript.

Initially TypeScript required the MS Visual Studio for an IDE which wasn’t great for Mac or Linux users. But other IDEs quickly brought support for TypeScript either internally or through open source.

About two years later TypeScript 1.0 was released at Microsoft’s Build 2014 event.

Around this time some developers from the AngularJS team created AtScript. The idea was to extend TypeScript and use this newer language with the upcoming Angular 2.0 framework.

Within a year AtScript was merged with TypeScript and the initial AtScript project was abandoned.

This led to greater popularity for TypeScript and rapid adoption of AngularJS from the development community.

Here’s another post by TJ VanToll discussing some TypeScript history and the role it currently plays in modern web development.

Babel vs. TypeScript

Since the TypeScript language is just a higher-level version of JavaScript, it needs a way to compile down to classic JS so it can run in web browsers. This is also true of ES6 which is the newest version of JavaScript, but also not able to run in web browsers.

Babel is a program which compiles ES6/ES2015 code down to ES5(the JS spec that browsers understand).

TypeScript has its own compiler which takes in .ts files and outputs JS code in either ES5 or ES6, your choice. Babel is not a language like TypeScript. Babel is just a compiler which takes in ES6 code and outputs ES5 code.

So Babel is a compiler, TS is a language with a compiler.

Babel is made specifically for ES6->ES5 conversion which is certainly valuable. But it’s mostly for devs who want to write in vanilla JavaScript.

If you learn TypeScript it’ll most often outperform Babel for personal work, but TS may not be supported in every dev team. This is where ES6/Babel knowledge is more valuable.

But to repeat the top answer from this Quora post: it’s all a matter of preference.

You really can’t go wrong either way since they’re both measurably better than classic ES5 JavaScript. Here’s a more technical answer provided by Kianosh Pourian regarding Babel and TypeScript.

Crafty developers can use a task runner like Gulp to use both compilers within the same dev environment. Seems a little excessive, but if there’s a will you’ve got a way.

CoffeeScript vs. TypeScript

This is one of the most frequently asked questions about modern JS development. Should you learn CoffeeScript, TypeScript, or both?

Many developers agree that CoffeeScript’s primary features have been replaced with ES6 functionality. The argument isn’t that CoffeeScript never had value; it’s that modern JavaScript developers would be better off writing in JavaScript(or TypeScript) rather than CoffeeScript.

Full articles have been written about switching from CS to ES6 with lengthy guidelines comparing syntax for functions, variables, and the much-appreciated class feature.

Some also argue that Babel compiling makes CoffeeScript obsolete. Even ardent CoffeeScript users feel that ES6 overrides these features with classic CoffeeScript behaviors now baked directly into JavaScript.

So let’s answer another question: is CoffeeScript worth learning? At this point in time I have to say no. Unless you have a specific project or job that requires CoffeeScript, your time would be much better spent learning TypeScript.

This post along with these comments make the best arguments against CoffeeScript—again, not because it’s a bad language. But because it adds an extra layer of confusion into the development process and it doesn’t really solve any major problems in the process.

There are so many damn languages and frameworks to learn. New technologies come out so often that the web dev landscape changes every 5 years.

If you’re gonna put your energy into anything, go with ES2015/Babel or go with TypeScript.

TypeScript’s Role in Development

A large handful of reasons could be listed for why you might use TypeScript. Let’s consider the immediate benefits TS can offer and how it could fit into a typical workflow.

  • Simple class-based OOP with inheritance
  • Access modifiers for all classes
  • Type setting for variables, parameters and return values
  • Incredible error detection which ties into static typing
  • Code hints for autocomplete and the return type of a function
  • The keyword this can be set to operate within the current class or method
  • Defined separation between let and var

If you already know JavaScript you can pick up the fundamentals of TypeScript within a couple days, maybe a couple weeks max.

It will take some adjustment to learn the newer syntax but TS operates exactly like JavaScript. You just get some extra whipped cream and a cherry on top.

TypeScript can be installed through NPM which makes Node an easy choice, especially with Node/TS modules. TypeScript ties into Angular development which has quickly become a fast-growing frontend framework.

So where does ES6 fit into this workflow?

TypeScript can compile to ES6 because it’s really just a suped-up version of JavaScript. So there’s nothing wrong with forgoing TypeScript and writing pure ES6 code if that’s your fancy.

But TypeScript can become part of your ES6 workflow and likely make it better.

You should also consider that ES6 will eventually be supported by all web browsers(or so we hope). At that point Babel may not have as much of a purpose, but TypeScript would still be useful with its type checking and support with Angular 2 development.

To state this more directly: TypeScript could blend into your entire JavaScript workflow and improve everything from code management to quality control. ES6 may be a better starting point, but learning both is the best choice for a serious professional.

The deciding factor is if you personally find it worthwhile to pick up TS and start practicing.

Resources For Learning TypeScript

If you’re now bound and determined to learn TypeScript the best place to start is research & self-study. Check out some of these resources and see if any could help you get started.

If you already know JavaScript your journey will be a lot easier. There’s even an online compiler IDE where you can write TypeScript and see how it compiles right in your web browser. Practicing might be easier than you think!

typescript online code playground
TypeScript online web playground

Articles and online tutorials are often the easiest introductory materials. I recommend this post for beginners trying to understand TypeScript.

Here are some other posts worth reading:

Books are the original learning materials and they still work great. We recently did a roundup of TypeScript books in greater detail, but you can find a few I really like that I’ve covered in brief summaries below.

Most books come in print & digital versions so you should be able to find something that works.

If you’re OK with online books I recommend the free TypeScript Deep Dive with ePub/PDF formats hosted for free on GitHub.

Learning TypeScript book cover

Also consider some of the books coming out of Packt Publishing. They have an incredible list of TypeScript resources for every level of development: TypeScript Essentials and Learning TypeScript are both great for beginners.

Intermediate-to-advanced JS/TypeScript users should look into Mastering TypeScript by Nathan Rozentals. It covers practical examples of TS development including project crossovers with frameworks like Angular and Node.

The Pro TypeScript book is a few years old but still considered a fine resource. Honestly you can’t go wrong with any of these books and I’m sure more TypeScript books are slated for publication in the years to come.

In fact, at the time of this writing TypeScript Design Patterns is one such example. It’s currently available for pre-order and scheduled for release in late summer 2016.

If you want something a little less structured why not search for presentations on YouTube? Conference videos can be fun and surprisingly educational.

Some conferences record various keynotes and presentations which then get uploaded to YouTube for free.

One particular keynote by TypeScript developer Anders Hejlsberg is well worth watching. It’s just over 50 minutes long but video quality is great and it’s one of the first major presentations regarding TypeScript’s future in web development.

Here are a few other conference videos you might enjoy:

But remember that the best way to learn is through practice. You’ll find plenty of resources online that help you learn how to practice, but like most things you’ll need to give real effort to see results.

If you’re already convinced that you want to learn TypeScript then nothing can stand in your way.

We usually only do things when we have a good enough reason or motivation to do so. If you were wishy-washy on the value of TypeScript, I hope this post can at least sway you to see it as a real asset to web development.

Generally speaking, TypeScript is on an upswing and it clearly adds value to the JS dev workflow. If you can find a way to use TypeScript or if you’re a JS dev that just wants to tinker, you’ll find that TypeScript will not disappoint.

But plain ES6 is also a genuine avenue to follow. In the current market I wouldn’t say TS is a requirement; but it is absolutely an asset. And it’s for that reason I say if you have the time to learn, TypeScript really is worth learning.

Author: Jaime Morrison

Jaime is a jr. designer interested in mobile UI/UX research and frontend web development with JavaScript frameworks. He covers general news and useful resources in the web design space.