For the longest time, javascript has dominated frontend web app development. At the dawn of its creation, javascript was only intended to be used as an extension to add dynamic like features to static web pages. As a result, javascript, is, well.. very loose. As I have mentioned in one of my previous blogs, with the advent of nodejs, Javascript has evolved more than just a scripting language designed to build drop downs, etc. It is used extensively to build enterprise grade software, consisting of hundreds of thousands of lines of code. Since, Javascript is a "dynamic" language, meaning the variables and constants declared or not strictly typed, errors and bugs often go unnoticed during the development process. The point is, javascript was NOT created to build large software, yet we live in a world where that has completely changed. This is where Typescript enters the scene. Before we get into the why of using typescript, we need to understand exactly what IS typescript.

---

What is Typescript?

TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. TypeScript is designed for the development of large applications and transcompiles to JavaScript. (Wikipedia). One thing to understand about the dynamic type checking of javascript is that it checks the type of variables in run-time, meaning while the script is being executed. Whereas static type checking checks the type of variables during "compilation". As a result, many errors are detected BEFORE the program is run. This is ideal for building large applications since it can easily detect bugs and errors. Essentially, typescript is a static type checker, while javascript is a dynamic type checker.

But how is typescript related to javascript?

As referenced in the image above, Typescript is a superset of javascript. So if you were to copy all javascript code from a .js file and paste it in a .ts file, it will compile with no errors, since all javascript code is valid typescript code. This is incredibly helpful for existing companies or dev teams looking forward to migrate an existing javascript code base to typescript code base.

So what does typescript add to javascript?

Well.. as the name suggests, it adds static typing. For example, the following javascript code, which is valid typescript code, can be rewritten to add static type checking.

script.js

// Javascript code
let name = "Arafat";

script.ts

// Typescript code
let name : string = "Arafat";

As a matter of fact, the typescript compiler (TSC) will transpile the above typescript code to the first javascript code.

---

Runtime behaviour

By design, typescript preserves the runtime behaviour of the javascript code. Essentially, even if the code has typing errors, typescript will only "show" not "throw" these errors in the console, but it will still go through all the compilation so that javascript runs as it should. For example, the following typescript code has a typing error where the name variable, which is defined to be a string, is set to be a number.

script.ts

// Typescript code
let name : string = "Arafat";
name = 18;

Excluding the type definition, the code is perfectly valid javascript code even if it is not a valid typescript code. Thus, the TSC compiler will show errors in the console, but it will go through the compilation and won't throw any errors in runtime. This is one of the foundational promises of typescript since it allows developers to easily migrate existing javascript code, which might be faulty, to typescript code without worrying about changing the behaviour of the application.

---

Erased types

If you compile the above typescript code, it will transpile to produce the following javascript code.

script.js

"use strict";
// Typescript code
let name = "Arafat";
name = 18;

As you can see, the type definition is no longer in the code. This is because the type checking is done by the compiler and ONLY by the compiler. So once it is compiled and checked, there is no need for the type checking, so it is no longer kept in the code. Essentially, this means that typescript does not require any external libraries or framework in runtime, it is only just a mere compiler, compiling code to check for errors that javascript may not encounter. As a matter of fact, a study has shown that using typescript helps developers to detect 15% more errors and bugs before execution! This may not seem like much to a new developer, but in the grand scheme of things, 15% adds up to a huge number, reducing costs on debugging.

---

So when should we exactly use typescript?

If you are building a small website with simple dynamic features on the frontend and a simple node server on the backend to receive HTTP requests, and server static files, typescript is probably not going to be necessary. Sure it is a good practice for young developers to gain experience on typescript by implementing them on simple applications, but the power of typescript is felt on larger scale, production grade software applications, where there are multiple people or teams working on a project, developing state of the art features. It is also the primary language adopted by the Angular framework, a frontend MVC framework developed and mainted by Google.

Typescript is also increasingly being used by companies so having it on your portfolio will help you land more lucrative jobs. (Well, this is not exactly true, since the only thing which will help you land high end jobs is purely your problem solving skills but knowing typescript and the importance of static type checking, can be of help in these gigs.)

---

Sources -
https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html
https://earlbarr.com/publications/typestudy.pdf