Well, that begs the question. What is TypeScript? According to Wikipedia, TypeScript is a strict syntactical superset of JavaScript, and adds optional static typing to the language. Otherwise known in layman’s term as …
Why TypeScript?
Unlike other programming languages, JavaScript variable declarations do not require a type declaration. The variable’s type will be implicitly assigned based on the value that’s assigned to it. However, that type will change if a value with a different type is passed in.
This flexibility allows JavaScript programmers to build applications at a blazing fast pace. However, there is a cost that comes with this speed in the form of bugs as the application scales and gets larger.
Applications are not written by one person nor one team. The codebase for a real world application generally has tens if not hundreds of different programmers’ code in it. Many of whom may have moved on while many others are completely new to it. This is bound to cause application breaking bugs that would be the nightmare of any developer. Due to JavaScript’s flexibility regarding typing, newer programmers will not only have to figure out the new codebase that’s being introduced to them, but also figure out the type of its variables and the potential of it changing throughout the course of its lifetime. Why add more difficulty for that new programmer?
TypeScript solves this issue. By explicitly stating a variable type, TypeScript prevents many potential bugs such as TYPE errors. It also allows anyone looking at the codebase for the first time to know what gets passed into a certain function, thus reducing the need to scour the application and look for the relevant code to understand it.
An analogy between TypeScript and JavaScript would be the tortoise and the hare. TypeScript’s approach is more of a slow and steady wins the race. Contrasting it is JavaScript’s approach of moving fast and breaking things, literally.
Now Let’s Code
Variable declarations in TypeScript follows this format:
Easy enough to understand. Let’s jump into some examples.
In all of these cases, the variable can be reassigned as it is declared with the let keyword. However if you reassign a value with a different type to it, your IDE will scream at you. This is, of course, assuming you’re using a IDE that has TypeScript support as most common ones do (VSC, Atom, WebStorm, etc…)
Implicit Type Declaration
Along with explicit definition of a variable’s type, TypeScript also allows for implicit definition as well. A variable will receive the type of the value that’s passed in. However, unlike JavaScript’s flexibility in which a value of any type can be reassigned to that variable, TypeScript will only allow a value of the same type.
Arrays in TypeScript
If an array is defined with a type, all elements within that array must be of that type. Your IDE will scream at you when the array is modified (push, unshift, splice, etc…) and passed in a value that’s not of the declared type.
Functions in TypeScript
TypeScript allows for the explicit definition of parameter types as well as the return value of a function. As stated in the “Why TypeScript?” section, this is extremely helpful for programmers being introduced to a new codebase. By explicitly telling the machine as well as the human what type of values a certain function accepts, the programmer will have an easier time understanding the code and less bugs will be introduced into the application. Ideally, no bugs relating to types should exist if TypeScript is implemented properly.
Installation and Setup
After finish writing a TypeScript project, it needs to be transpiled into JavaScript. So of course, you need to have a transpiler installed. If you’re using npm then you already know the drill. The transpiler can be installed globally on your machine or in a specific root directory in your node_modules folder.
npm install -g typescript
To transpile a .ts file, you can enter the command, ‘tsc<filename.ts>’, in your terminal and a transpiled .js file will appear in the same directory. If you want to transpile more than one files, you will need to setup a tsconfig.json file and configure it to do so. More on this can be found on VSC’s TypeScript documentation page. I highly recommend reading that if you are setting up a tsconfig.json file from scratch as it’s well documented and easy to follow.
Conclusion
I left out a few important parts regarding TypeScript that definitely warrants further study. I will be diving further into TypeScript as it is an exciting technology to learn. I will leave it up to you to decide whether or not you should do the same. Hopefully, I’ve persuaded you into the TypeScript gospel.
Cheers 🎉 🎉 🎉
