A beginner’s guide to TypeScript (with some history of the TypeScript)
By: Uday Hiwarale
Tags: JavaScript, Programming, Node, Web Development, Typescript

JavaScript is arguably one of the most popular programming languages as of 2020 and its popularity is just growing day by day. The primary reason why it is so popular is because it is the default language of the web frontend. What that means is that browsers can only understand JavaScript and nothing else.

This unfortunate condition enforced every web developer to become a JavaScript developer. So as the web development industry demand grew for web developers, more and more people became the JavaScript developers.

At first, it seems like a good thing but it’s not that impressive. JavaScript, though it might be on the top of the popularity chart in terms of its use, but I would not use “popular” as the exact word to describe it.

JavaScript is not an old programming language like the C or C++ programming language. Actually it was not even designed to behave like a general-purpose programming language. It was developed by Brendan Eich in 1995 for the Netscape browser in 10 days. It was supposed to be a scripting language to add dynamic behavior to the web page.

Many other browsers such as Internet Explorer adopted this language but with a different flavor of their own. That’s why it was needed to be standardized. The first official version of JavaScript (ES1) was released by ECMAScript back in 1997.

If you want to know more about the history of JavaScript, you can follow the video above. I have discussed how JavaScript works under the hood and different parts of the JavaScript engine in the following article.

In a nutshell, JavaScript didn’t get a good start. It wasn’t though as a general-purpose programming language until much later. In 2009, a bloke named Ryan Dahl created a backend software that had Google Chrome’s V8 JavaScript engine and it could run a JavaScript program using it.

Many people liked this idea, mostly the JavaScript developers I guess who got bored of doing the frontend web development day in and day out. This is how Node.js was born. It’s been 10 years and Node.js is still rocking.

From an online survey conducted by StackOverflow in 2019, JavaScript is the most popular language on the planet and Node.js deserves huge credit for this since it is the most popular tool (actually platform) as shown below.

💡 I like how Go (Golang) is also becoming popular despite being a new language. Go is a statically typed language, hence it wouldn’t be fair to compare it with JavaScript. I have a dedicated publication just for Go if you wanna learn it.

The picture above clearly states that JavaScript is heavily used but does that means developers like working with JavaScript? Well, in my opinion, JavaScript is fun but comes with a lot of sacrifices. Let me explain.

JavaScript is a scripting language that means it will be interpreted by a JavaScript engine in its original form (the source code). If you want to know how it is interpreted by the JavaScript engine, read the “How JavaScript works” topic of the WebAssembly introduction article.

Being a scripting language, it can’t be compiled to a compact binary executable that can run natively without an interpreter. Well, that’s not a big program. The big problem is type safety. JavaScript is not a statically typed language which means the data types are evaluated at runtime.

For example, if you declare a variable var x = 1; , the type of the variable x will be number at runtime but you can also assign a new value to it of a different type such as a string , for example x = 'hello' . This behavior can cause a lot of issues if we are not being careful.

Since there is no compiler involved in the process of writing JavaScript, there is no way to prevent this behavior unless some error occurs at the runtime if we are extremely lucky to find that error.

The failure of Dart

Google being “Google” wanted to address this problem. The developers at Google worked on a statically typed language called “Dart” that was supposed to replace the JavaScript in the browser (and hopefully on the backend side too). They planned to ship a VM in the Google Chrome browser that could run (interpret) Dart programs natively. For legacy support, Dart could transpile to JavaScript until everybody (browsers) gets on this bandwagon.

💡 According to Wikipedia, it first appeard in October 2011 and the first official version v1.0 was released in November 2013.

This whole idea was laughed out and criticized by the developers. Since then Dart was scrapped as a replacement of JavaScript and became an exclusive programming language to write cross-platform native applications. Google’s Flutter framework uses the Dart language to make it happen.

💡 If you want to learn Dart, I have a dedicated publication for it.

The rise of TypeScript

Let’s come back to the question, is JavaScript popular? Let’s clarify it, is JavaScript loved by the developers? I don’t think so, at least not in its entirety and other developers seem to agree with this theory.

According to the same survey, JavaScript is not even in the top 10 most loved programming languages (well, it’s 11th). But TypeScript is 3rd in the list and first if we talk about just the languages that deal with JavaScript. So what is TypeScript and why the hell it’s so popular?

A team at Microsoft wanted to do something like Dart but they took a different approach. Instead of reinventing the language with a completely new syntax, they just amended the JavaScript syntax. Not only that, but they also made this new syntax optional. This is how TypeScript was born.

That means any JavaScript program is a valid TypeScript program. Due to this reason, TypeScript is also called the superset of JavaScript. You might have heard somebody saying TypeScript is just JavaScript with types.

So what is this new syntax and what are types?

Normally, you would write a JavaScript program like below.

What we did in the JavaScript program above is just to create two variables x and y . The variable x has an initial value of 1 which is a number . The y however doesn’t have an initial value. It’s initial value is undefined .

Let’s imagine this program running in the browser (or on Node.js), what do you think will happen. Being the dynamically typed language, JavaScript will not throw any errors. First the data type of x is number , then string when the string 'hello' is assigned to it and then the boolean when true is assigned to it. You can see this from the output of console.log statements. The same goes with y . All these types are determined at the runtime.

What TypeScript did was to provide a compiler that can process this program and throws errors if it detects something odd with the program. This compiler is also called a transpiler since it outputs the cleaner JavaScript program.

At this moment, our program doesn’t contain any necessary information that can tell the TypeScript compiler about what is expected out of it. What TypeScript expects are the Type Annotations. A Type Annotation is an indication of the data type of a value.

We converted the JavaScript to a TypeScript program by changing the extension from .js to .ts . Now your IDE can check for any errors even before you compile this program to JavaScript.

TypeScript installation (follow this documentation to install TypeScript) comes with the compiler that is accessible through the tsc command. The tsc program.ts command compiles the program.ts file into program.js file.

As of now, we can see the TypeScript compiler is displaying some errors in the console. If you see, the variable x has been annotated with :string . This is the type annotation we talked about. This annotation provides the data type of variable x to the TypeScript compiler.

When the TypeScript compiler sees this, it assumes that x will be string during the lifetimes of this program. However, we have assigned an initial value of 1 which is a number to it. This is not valid and it will complain about it in the compilation error messages as you can see.

The y is annotated with the type of number . Since it lacks an initial value, TypeScript compiler will watch out for any assignment statements that assign a value to this variable other than a value of number type. Since we are trying to assign the value 'world' of the type string to it, this is not valid.

Once we fix all the issues, TypeScript will generate the output file program-fixed.js that is safe to run wherever we want. TypeScript keeps the original filename of the source file and only replaces the extension.

As you can see from the above output, things in the output program have not changed a bit. So what was the point? Where did all the type annotations go?

If the type annotations leaked in the compiled output, it wouldn’t be a valid JavaScript program since the JavaScript engine doesn’t understand what type annotations are and it would throw SyntaxError as shown below.

(Chrome Developer Tools Console)

What TypeScript adopts is an Erased Type System that removes type annotations any type related information from the compiled program. The type annotations are only there to provide type information of values to the TypeScript compiler during the compilation process. Therefore TypeScript also falls in the category of statically typed languages.

The goal of TypeScript is to catch mistakes in a program before it goes to production and causes problems at the runtime. Its goal is not to provide tools to amend or modify the original source code (business logic) such that can it perform well at the runtime in all the situations.

However, being the superset of JavaScript, it is its moral responsibility to support existing standards of JavaScript such as ES2020 which is the current one. But a developer can mistakenly use a feature from a standard that is pretty new such as Promise from ES6 and run the compiled program in an environment that doesn’t support Promises such as IE11 (which only supports JavaScript features up until ES5 ).

This is solved by TypeScript using a configuration file, mainly named tsconfig.json , that contains information about the project and what is expected from the TypeScript compiler. This is a plain JSON file.

The outDir specifies the directory where the output .js files should be emitted by the compiler. The target option specifies the JavaScript version that will be supported by the runtime and module option specifies the module system available at the runtime such as CommonJS used by the Node.js.

When you run the tsc command, the TypeScript compiler looks for the tsconfig.json in the current directory. You can provide a custom file path of this configuration file using using --project or -p command-line flag.

Since the target in this case is set to ES5 , you would get a compilation error if you use any JavaScript feature that is not the part of ES5 specifications such as Promise . However, some features are compiled to target version such as let variable declaration is converted to var declaration.

So it is safe to say that TypeScript will inform about most of the situations at the compile time that could possible cause issues at the runtime. Now we can clearly see why TypeScript is ❤️ (loved) by JavaScript developers.