TypeScript: what is it and how does it relate to JavaScript?
If you’re interested in Front End Development, you’ll have to learn the three fundamental languages to creating a website: HTML, CSS, and JavaScript. TypeScript, however, has been growing in popularity since it’s release in 2012 and has been considered a promising language to be adopted by many front end developments. In fact, Google has adopted TypeScript as one of its official languages they use. So, learning TypeScript can be very beneficial to any developer who wants to become a Front End Developer.
What is TypeScript?
TypeScript (TS) is a superset to JavaScript (JS), meaning it can do all the things that JS can do with some added features. Its main feature is to add static typing to the dynamic language of JS.
A few benefits of TypeScript:
- Provides a way to describe the shape of an object
- Allows you to validate that your code is working correctly.
- Decreases the amount of debugging you’ll have to do
Compare JavaScript with TypeScript
// JavaScript
let person = "Andy"
console.log(`My name is ${person}.`)// TypeScript
let person = "Andy"
console.log(`My name is ${person}.`)
Wait, where’s the difference? The difference here is very subtle but that’s because TS’s goal is to extend JS, so the above code will work for both. When you’re declaring a variable in JS, you don’t have to explicitly say what type it will be. In TS, however, the initial declaration of a variable will be implicitly typed to be the type of the value it was assigned. So the variable person in the TS example will be typed as a String because it values is a String. This is known as inference, TS infers that person is a string.
Explicit and static typing
To better illustrate the power of TS, you can explicitly write the type you want the variable to be. Rewriting the above example, we would get:
// JavaScript
let person = "Andy"
console.log(`My name is ${person}.`)// TypeScript
let person: string = "Andy";
console.log(`My name is ${person}.`);
Notice in the TS example above that we explicitly wrote that person is to be a string by adding a colon. This will tell the compiler that the name variable is to only be of the String type.
// Before in JavaScript
let name = "Andy"
// Also OK
person = 1;
person = true;
person = {name: "Andy"}// TypeScript
let person: string = "Andy";
// Not OK, errors will occur
person = 1;
person = true;
person = {name: "Andy"}
The above example shows the power of static typing with TS. Before, In JS, you could change the type of a variable by simply assigning it to anything you’d like. Now, with TS, the declared variable will only accept a value that is the type it was initially declared with. This will allow your code to be more reliable and to evade errors during compile time.
TS as a linter?
If you’re familiar with linting, you could argue TS to be some sort of a JS linter. When TS is installed, there is an automated checking of your code for programmatic errors.
In this example, notice that our code editor is telling us there are errors made in lines 4–6. This is because this is a TS file. If you hover over each error you will receive an error stating the value you assigned is not assignable. Here is the error when you hover over the error in line 4:
This is the main feature TS has to offer; it takes JS and adds static typing to it. This will allow you to have more control over how you want to shape your objects so that you don’t run into bugs after compiling.
Happy coding 😄
