Yes, TypeScript is like JavaScript but with no surprises. That’s how I describe the open-source programming language introduced by Microsoft in 2012. Last year, Github marked it among the top 10 most wanted programming languages. But why are developers preferring Microsoft’s creation more than JavaScript? Let’s find out!

Why not JavaScript?

JavaScript has been the number one language for many years now. It changed web development completely by giving lives to previously dead websites. Thanks to the many frameworks around it, it is used for backend and mobile application development too.

But was JavaScript made to create enterprise-level applications? I hardly think so. That’s where TypeScript steps in. TypeScript is JavaScript with static typing. And the best part is it’s still optional.

There are a lot of benefits of adding static typing to JavaScript. You’ll not see that undefined pop up in your applications anymore. Refactoring code will not be a nightmare anymore. And many more. A study shows that 15% of JavaScript bugs can be detected by TypeScript.

Types — The difference between JS and TS

Programming languages fall into two categories: statically typed or dynamically typed.

Consider the following code snippet of JavaScript — A dynamically typed language like Python:

function add(num){
   console.log(num + 5);
}

Here, the type of variable num is not known. If I call this with, add(“I love TS”) it will print I love TS5. This is known as Type Coercion in JavaScript. It will convert the number 5 to its string equivalent and concatenate both of’em. The problem is that it doesn’t throw an error even though it is not working as intended.

Now consider the same function in TypeScript — A statically typed language like Java:

function add(num: number){
   console.log(num + 5);
}

We just added the type of variable num as a number. If I call add(“I love TS”) now, it’ll throw a compilation error — Argument of type string is not assignable to parameter of type number .

Benefits of Static Typing

• It allows us to save time and check why our input is not of the type we think it is instantly rather than spending time later.
• Everything stays the way it was initially intended. If a variable is declared as a string, it’ll remain the string the entire time.
• Adding strict types makes code more readable. A code that speaks for itself can offset the lack of direct communication between team members.
• Information about types lets IDEs help us with code navigation, autocompletion, and accurate suggestions. We also get feedback while typing. All this helps us write maintainable code and results in a significant productivity boost.

TypeScript — Working BTS

Every device, browser, or platform that runs JavaScript can run TypeScript as well. This is because the TypeScript code is compiled to vanilla JS before executing by tsc — TypeScriptCompiler.

IDEs supporting TypeScript usually have this built-in and can be invoked from the command line. It allows converting the codebase or a part of it by adding tsconfig.json to the root directory.

TypeScript is not delivered as .ts files but as .js and .d.ts files. Given a TypeScript file, main.ts tsc can convert it to several artifacts. The most common ones are:

• JavaScript file: main.js (It contains vanilla js code generated by our ts code)
• Declaration file: main.d.ts (This file have the type information)
• Source map file: main.js.map (It specifies for each part of the output code in main.js , which part of the input code in main.ts produced it)

Brief about TypeScript Compiler

The TypeScript compiler can also process vanilla JavaScript code by using option allowsJs . So when migrating from JavaScript to TypeScript, we can start with a mix of both and slowly convert more JavaScript code to TypeScript.

It allows us to type-check JavaScript files by using checkJs for the complete codebase or putting @ts-check as a comment on particular files.

It uses static type information provided by JSDoc comments. In fact, we can fully statically type JavaScript code and can even derive declaration files from them. A simple JSDoc comment example can be:

/**
 * @param {number} x - A number param.
 * @returns {number} This is the result.
 */
function add(num){
   return num + 5;
}

Cons of TypeScript

Honestly, there are very few of them that came to my notice. But here are some that I think might be of help to you:

• Not true static typing — Static typing in TypeScript is different than Java, C++, or C#. Our code is eventually transpiled to JavaScript, so there is always the risk of weird type conversions at runtime.
• Bloated code — We will have to write more code as types that can slow down the development process. Also, it makes TS files larger in size than JS because of the extra lines of code. But all this disappears after being transpiled. In the end, the browser will execute plain JavaScript.
• Extra compilation step — We need to transpile TypeScript code to JavaScript before running. However, this process is highly automated and doesn't require a lot of additional time. In short, the downside of this step is far less significant than its benefits.

Who is TypeScripting?

TypeScript is an open-source programming language with an ever-growing community. It was created by Microsoft and is now used by Asana, Slack, Lyft, all Angular 2+ developers, multiple React and Vue developers, and thousands of other companies.

It is undoubtedly the most popular superset of JavaScript at the moment and is not going anytime soon.

With new updates coming in TypeScript, the main idea behind is to bring productivity, reliability, and predictability to a chaotic JavaScript world. Honestly, I’m keen to hear reasons for not using TypeScript now.

Let’s start TypeScripting coders!

More content at plainenglish.io