Why TypeScript?

June 28th, 2020

Malibu, California

Typescript (TS), written and developed by Microsoft, is a superset of JavaScript (JS). This means that it inherits everything in JS - anything written in JS is valid TS code. I like to think of it as class TypeScript extends JavaScript. TS also adds some additional features or, it allows you to do things that you wouldn’t normally be able to do with Vanilla JavaScript, while compiling down to plain JavaScript. Browsers cannot read TypeScript files, they can only read JavaScript files.

What can TypeScript do?

TS has static type checking - although it is optional - which means that TypeScript allows you to check and assign types onto variables, parameters and functions. This means that you can set a variable as a string and if somewhere through a function, that variable gets passed a number, TS will throw you an error during development. With TS being a super set of JS, you get everything that JS has, within TS. TS even extends all of the recent ES6 features of JS. However, TS syntax is closer to high level languages like Java or Scala.

TS extends JS types such as string, number boolean and arrays while also adding a few powerful types:

• Any - static and can be anything

• Void - no type returned, can be assigned anything

• Tuple - an array with a fixed number of elements

• Enum - enumerated values

• Generics - specifies the type of constraints

TypeScript can easily be installed as an npm package. One very important thing to note about TS is that it needs to be compiled down to a JS file. Browsers can read JS files but they cannot read TS files. Just like we’ve learned that Sass files need to be compiled down to a single CSS file, TS files need to be compiled down to an equivalent JS file.

How can TypeScript help us?

TypeScript allows you to spot bugs quicker and will often walk you in the right direction of what you were aiming to do. There is so much more that TypeScript can do for us however, I won’t go into detail about ALL of the features.

TypeScript is a superset of JavaScript and simply, this means that TypeScript adds rules on top of JavaScript extending what you’re able to do with it. Because of this, all JavaScript code is technically correct and “legal”, TypeScript code. As mentioned, TypeScript allows you to add types to variables and functions and what this does for you, is allow you to identify any errors that exist regarding types. Consider the following example:

const bed = { width: 10, height: 20 };const bedArea = bed.width * bed.height; // Produces NaN

JavaScript would tell you that bedArea is NaN - not really helping you figure out what went wrong as a developer. TypeScript would, however, tell you that ‘heigth’ is not a property of type bed. It would actually go as far as asking if you meant ‘height’.

Why should we care about TypeScript?

According to Stack Overflow’s developer survey in 2020, TypeScript is the number 2 most loved language by programmers. Actually, it was relatively in the same spot in survey years 2019 and 2018 as well.

What is the reason that developers love TypeScript so much and what is all the hype about it?

For Front-end developers who already know JavaScript, the transition to TypeScript is smooth and almost seamless. As a matter of fact, you can take any JavaScript file that you have, change the extension to .ts and voila, you have a valid and working TypeScript file. If you are a JavaScript developer, you are already ahead of the curve in terms of learning TypeScript.

Most importantly though, TypeScript was built to help developers by giving a good indication of how an error can be fixed through the error messages provided. Gone are the days of hunting for that bug because of a bad spelling error. Because of this, you would find more of your bugs during development rather than at run time. This also helps your fellow developers out by making any code written in TypeScript, that much more readable. With the type being written in with the variable you are working with, it is much easier for your fellow developers to understand what is going on, before the code is even run.

To conclude, we have to understand that programming languages are tools that were made to perform a task. TypeScript can be very daunting to look at at first however, if you consider that it was made to make JavaScript more developer friendly, we can start to understand and perhaps take advantage of the powers that it can give us.

Written by Lawrence Hebia, a web developer from Toronto, Canada. ✌🏼