Small Bytes: Putting the Type in TypeScript (Premium)

As a decades-long fan of Anders Hejlsberg and having struggled to see a way forward for Windows desktop apps, I’m understandably curious about TypeScript. Hejlsberg led the development of this free and open-source superset of JavaScript, by far the most popular programming language in the world, specifically to address JavaScript’s biggest problem: its weak type system. That is, where JavaScript is “dynamically typed,” TypeScript is “statically typed.”

So what does that all mean?

First, consider the problem that led to the creation of TypeScript in the first place: Microsoft and its customers wanted to create JavaScript-based web apps at scale, but the syntactically unsophisticated nature of JavaScript made that difficult. After all, JavaScript had been hastily cobbled together by a single person, Netscape’s Brendan Eich, in just 10 days in 1995 and it retains some early design decisions today that see

To its credit, Microsoft at least went about solving this issue correctly, by creating a true superset of JavaScript that didn’t break the compatibility or cross-platform nature of the original language. In other words, a kinder and gentler form of “embrace and extend.”

“TypeScript was really just an idea of, ‘Let’s see if we can do a little bit better for JavaScript’,” Hejlsberg explained in an interview. “The browser wars were over, Google had built Chrome, and HTML5 was happening. Google had also built a very efficient JavaScript engine and the efficiency of JavaScript had gone up tremendously. Everyone was starting to realize that the browser was going to be where real apps were being built.”

The JavaScript of that era lacked lots of sophisticated features like modules, classes, and a type system. Two of them—modules and classes—are part of JavaScript today. And the type system is handled by TypeScript.

“A type system is the ability to check your code before you run and deploy it,” Hejlsberg says. “Without types in a language that’s almost impossible. That was really the genesis of TypeScript. The key was to add a type system to the language in a way that doesn’t take away all the things that made JavaScript so popular in the first place.”

The genius of TypeScript is that it provides type checking while the developer is writing the code in supported IDEs like Visual Studio Code and Visual Studio, and at compile time. But then the TypeScript compiler removes all the types and outputs standard JavaScript code. “It gives you all of the benefits of a type system during the developer experience and none of the drawbacks when you run” the code, Hejlsberg explains.

TypeScript isn’t a panacea for all of JavaScript’s problems. Indeed, there is some debate in the developer community about whether one should even use TypeScript or just stick with JavaScript. But it’s impossible to not be impressed by the accomplishment: TypeScript is a true superset of JavaScript syntactically, but it also includes a compiler that transforms the output into normal, compatible JavaScript. It’s the best of both worlds, in a way.

So let’s talk about types. In his well-regarded book Eloquent JavaScript, Marijn Haverbeke explains that each value in JavaScript “has a type that determines its role. Some values are numbers, some values are pieces of text, some values are functions, and so on.” But because JavaScript is dynamically typed, the type of any variable can change over the course of program execution. For example, you could define a variable like so:

let x = 10;

And in this case, x is a type called number. But you could later write a line of code like so:

x = “Hello, world!”;

And now x is a string. It’s the same variable, but its type has changed.

JavaScript’s automatic handling of data types at run time can lead to all kinds of unintended problems. Consider these two examples from Eloquent JavaScript:

console.log("5" - 1);
// → 4

console.log("5" + 1);
// → 51 [as in the string “51”]

In both cases, the value “5” is a string, not a number (or what many other languages would call an integer). But in the first case, JavaScript converts “5” to 5, a number, because that’s what makes sense for the subtraction operator. And in the second case, it converts the number 1 to the string “1” and then adds—or concatenates—the strings “5” and “1” and comes up with the string “51.”

We know this because we can check the types of the two values in each case. This code:

console.log("5" - 1);
console.log(typeof("5" - 1));

console.log("5" + 1);
console.log(typeof("5" + 1));

Results in this output:

4
number
51
string

This would never fly in a statically typed language like C#, of course, and both of those expressions would be flagged by the compiler. But JavaScript is loosely typed, and it handles these weirdisms—coding mistakes, to my mind—automatically. This can lead to all kinds of errors, but that’s where TypeScript comes in. The TypeScript compiler (tsc.exe) flags both of those expressions too.

In JavaScript, you might write code like the following:

let greeting = "Hello, world!";
console.log(greeting);

TypeScript, oddly, would accept the code noted above because it is valid JavaScript and it can infer from the statement what the type of greeting is (a string). But a more explicit version of this code would look like so:

let greeting: string = "Hello, world!";
console.log(greeting);

This will compile fine and the resulting JavaScript file, which omits the “: string” bit, will run normally. The question of course is whether the overhead of TypeScript warrants its use. As noted, not everyone is on board with using TypeScript, in part because the source code the developer works with can be quite a bit more verbose than straight JavaScript. I happen to prefer that, but I get it. You can read this interesting criticism of TypeScript and decide for yourself.

What I am more concerned with, I guess, is how one actually gets started with TypeScript—or plain JavaScript—on Windows using Microsoft’s tools, primarily Visual Studio Code and full Visual Studio. I will take a quick look at that next, as I was surprised by the learning curve despite all the documentation.