Why learn TypeScript?

Are you wondering what the fuss over TypeScript is about? And whether it is worth investing time and energy? Or whether to use it in your project? If so, you've come to the right place.

Let me tell you my story. A few years back, I tried to learn JavaScript.

I'd already coded in C and C++, but I was frustrated trying to learn JavaScript. I tried and failed. Coming into an existing codebase, trying to follow what was going on across lines and lines of poorly documented code… was frustrating. But in the end, I was able to learn JavaScript… by first learning TypeScript. And I found TypeScript way more fun to use than JavaScript.

And in a way, that's strange.

Because TypeScript, in a sense, is a load of constraints. It limits what you can do. It forces you to follow rules that are added on top of JavaScript. And yet, to me, TypeScript is fun… in a way that JavaScript is not.

Why?

What is it about TypeScript that makes it an enjoyable experience? And not just in my opinion, but in the opinion of the thousands of developers who answered the Stack Overflow developers survey and rated TypeScript the third-most loved language. (And incidentally, what does it say about our brains and how they work?)

It's counterintuitive. But we're going to explore it together.

First: What is TypeScript, and what is it useful for?Second: Why is TypeScript fun? What makes it fun in a way that JavaScript, to me at least, is not? Third: How I learned TypeScript and JavaScript via TypeScript, and why Typescript is a good choice to learn

What is TypeScript?

TypeScript is a superset of JavaScript. It is 1/ additional syntax, on top of the JavaScript syntax, that 2/ transpiles down to JavaScript and 3/ anticipates updates to JavaScript.

What does this mean?

Well, first, any valid JavaScript syntax is valid TypeScript syntax. If you have a page of JavaScript code, change the file extension from .js to .ts, and "voilà !" : valid TypeScript code! (barring some occasional exceptions/bugs like the .at function on arrays)

Second, TypeScript transpiles to JavaScript. What does that mean? On a basic level, it means that at the end of the day, TypeScript code is going through the compiler and being output as JavaScript code. And that is what is being executed.

This means that anything that JavaScript can do (and JavaScript can do a lot), TypeScript can do too.

On another, higher level, all this means that TypeScript is not a competitor to JavaScript. You can't execute TypeScript directly in a browser. Only JavaScript can do that. TypeScript is a tool to produce valid JavaScript, maybe even higher-quality code than we would have produced on our own.

In that sense, TypeScript exists only to improve the experience of coding in JavaScript. I don't know if that was the original intent, but given the high developer satisfaction, it is certainly the end result.

And it is certainly one I experienced firsthand.

How does TypeScript do that? Well, that's the fundamental question, isn't it! What are the ingredients to the better development experience that TypeScript provides? What makes TypeScript fun?

What makes TypeScript fun? (Why not just use JavaScript ?)

TypeScript improves the development experience of JavaScript in two ways.

First, at its most basic, TypeScript is about adding documentation on top of JavaScript. And if you configure your project correctly, it can force you to do so. And, of course, not just yourself but any other developers working on a project. And that documentation is partial — it doesn't intend to cover all the information documentation should provide. But it does provide one very specific information, and that is the type of information a variable should contain.

JavaScript will happily return true to the statement number zero equals the empty string. But strings and numbers are two different things. They are of two different types. JavaScript is weakly typed or even untyped. In JavaScript, you can assign a value of any type to any variable at any time.

TypeScript adds type to coding in JavaScript. (There is a clue in the name).

That type-checking is only done at compilation time, not once the code is being run. That type-checking complains if you've said a variable was of a certain type and then used it differently. This means TypeScript makes you a (slightly) better coder. It also makes your development tools better: adding constraints helps your tools better guess what you are trying to do and, therefore, helps you get there faster.

And faster is nice as is better.

Gao, Bird, and Barr examined how type annotations can detect bugs in JavaScript, and found a mean value of 15%. Having worked for over 15 years with many loosely typed languages (most notably LUA, Python, and JavaScript) I would say 15% feels like an underestimation.

The second way TypeScript removes the hassle and makes things more fun is that it anticipates future JavaScript syntax and allows you to target past JavaScript syntax. JavaScript has improved a lot over the years, but when I started using it, there was no fat arrow, promises, or spread operator. Those were in the works, of course, but couldn't be used because the browsers didn't support them.

And TypeScript allowed me to use the nicer, cleaner syntax without worrying about compatibility because I could transpile the code back to the old syntax and choose the level of compatibility I wanted the TypeScript compiler to output.

And that is nice and refreshing when you've spent any amount of time battling JavaScript compatibility issues.

Of course, things have improved now because those funky new features have made their way into JavaScript. But someday, a new shiny feature will be proposed for the JavaScript language… and TypeScript will have it first.

Because TypeScript necessarily moves faster than JavaScript adoption. And that is also part of what makes TypeScript a good choice to learn.

What makes TypeScript a good choice to use & learn?

JavaScript is weird.

There is a whole website dedicated to the weirdness that is part of JavaScript called JavaScript WTF. A lot of that weirdness is due to how JavaScript manages types. And when learning JavaScript, that weirdness can cause a lot of frustration.

TypeScript gives you training wheels when you're learning JavaScript. It keeps you away from many traps that would confuse you.

I learned JavaScript a lot faster via TypeScript because TypeScript's mental model was clearer to me. Because my IDE would point me in the right direction, and help me complete my task a lot faster. It would point out my errors.

Now, I'm not trying to start any flamewars here. In fact, given the StackOverflow results, I'm not saying anything revolutionary.

But if you want to learn JavaScript, I recommend you do so with TypeScript.

You might be interested in learning more:

• Do you know what the differences are between types and interfaces in TypeScript?
• What are the best practices for using TypeScript in React?