This month, we’ll be discussing and sharing useful information about all things TypeScript.
Last year, TypeScript was recognized as the fastest-growing library and its usage among developers has almost tripled over the course of 6 years.
With that being said, what is TypeScript and what makes it special?
Before we introduce TypeScript, let’s talk about JavaScript.
JavaScript is a weakly-typed language. This means JavaScript allows us to assign a certain data type to a variable and later on assign another data type to that same variable.
We can see an example of this right in our browser console. Feel free to launch the Console
tab of your browser development tools if you’d like to follow along.
Assume we created a variable called number
that is initialized with a number value of 5.
let number = 5;
We’re using the let keyword to create a block scope local variable that can have another value reassigned to it after initialization.
What if we wanted to reassign the number
variable to a string of "5"
right after it was instantiated?
let number = 5;
number = "5";
JavaScript will allow us to do so and the number
variable will then become a string of "5"
.
This is an example of how JavaScript is a weakly-typed language. This is also an example of how JavaScript is a dynamically-typed language - a language where the types of values and their compatibility are only checked during run-time (i.e. when the code is being run).
By only recognizing the incompatibility between the types of different variables during run-time, bugs or errors due to this incompatibility are only recognized when code is being run.
TypeScript was introduced in 2012 (over 10 years ago!) by Microsoft as a statically-typed language to help make JavaScript code more secure. It does so by being a strongly-typed superset of JavaScript where types are checked during compile-time (i.e. when code is being compiled).
Let’s revisit the example we had before and see how TypeScript will behave. To help us here, we can use the official TypeScript Playground given to us by the TypeScript team.
When we initialize the number
variable, we can state that the static type of the number
variable is to be of type number
.
let number: number = 5;
If we tried to reassign the number
variable to a value of a different type (e.g. a string of "5"
), the TypeScript compiler will emit an error along the lines of Type 'string' is not assignable to type 'number'.
.
let number: number = 5;
number = "5"; // Type 'string' is not assignable to type 'number'.
TypeScript is smart enough to recognize that the
number
variable is of the number type even if we were to not explicitly specify its static type.
Notice what’s happening here? TypeScript is recognizing the issue with the code we’ve written when the code is being compiled to JavaScript (i.e. during compile-time). This helps greatly by helping avoid painful bugs down the line and it also helps with making code easier to read and understand.
It’s important to note that TypeScript isn’t a completely different language. It’s a typed extension of JavaScript. The key difference between Static vs. Dynamic typing (i.e. JavaScript vs. TypeScript) has to do with when the types of the written program are checked (run-time vs. compile-time).
Lastly, TypeScript is a development tool. Clients and servers don’t recognize TypeScript code when run. This is why the static types that can be specified in TypeScript are stripped away during a compilation process that transforms TypeScript code into valid JavaScript.
Next week, we’ll go through an actual example of compiling TypeScript code to JavaScript code in an application.
Till next time! 🙂
— Hassan (@djirdehh)