What's TypeScript?
TypeScript is an open-source language developed and maintained by Microsoft built on top of JavaScript, one of the world’s most used tools, by adding static type definitions.
In simple words TypeScript is JavaScript with static typing
Why to use?
As you are reading this you are probably very familiar with JavaScript and also the fact that it's a dynamically typed language. It's although provides a lot of freedom for developers to write their code. But with freedom comes responsibility and the moment you get a little lazy, things start bouncing off, JS is out of control before you know it
The solution is TypeScript, as it strictly forces you to define a type for every variable beforehand we don't encounter a runtime error in future.
Difference between Static and Dynamic typing
All the programming languages are either of the 2 types i.e. Statically typed and dynamically typed.
In languages with static typing, the type of the variable must be known at compile-time. If we declare a variable, it should be mentioned beforehand to the compiler if it will be a number, a string, or a boolean. For example Java and C++.
In languages with dynamic typing, the type of a variable is known only when running the program.
For example Python and JavaScript.
Still not clear??? Let's check out these examples
Dynamic Typing
let variable = 12 ;
variable = "Hello World";
console.log(variable); // Prints Hello World
This is the freedom provided by dynamically typed languages, but this can lead to run-time errors as:-
// JavaScript
function divide (number){
return number / 10 ;
}
let variable = 10 ;
divide(variable); // Prints 1
variable = "Hello World";
divide(variable); // Prints NaN
This type of run-time errors are a serious issue and lead to a major problem when such a code is pushed in production, which was the motto for making a static typed.
Static Typing
This same code in a statically typed language will be:-
// TypeScript
// Here the function and parameter is of number type
function divide (number : number): number{
return number / 10 ;
}
let variable: number = 10 ; // variable is given a type of number
divide(variable); // Prints 1 and will only work for number as parameters
Common types in TypeScript
Basic types
TypeScript has several basic types that are pre-defined. For eg: Number, String, boolean which we define as
const VariableName: type = value;
Boolean
Represents numeric value.
let isTrue: boolean = true;
Number
Represents numeric value.
let score: number = 12;
String
let name: string = "Gourav";
As the variables are typed beforehand, so any unexpected change is reflected as an error as:-
Arrays
Array type can be defined in two ways:- type[] and Array means the same, where type can be string, number, boolean, objects, functions, etc.
const strings: string[] = ['Hello', 'Hii', 'Ok'];
const names: Array<string> = ['Gourav', 'Kumar', 'Dey'];
const numbers: Array<numbers> = [1,2,3,true]; // Will show an error as true is not a number type
Any
Any is a special type. We use this when we don't want a particular value to cause type-checking errors. Basically, it will accept any syntactically legal type. Using any as a type makes typescript variable dynamic, so use it when you don't have any other option.
let anyThing: any = 12;
anyThing= "something";
anyThing= false;
anyThing= [1, 2, 3];
anyThing= { a: 0, b: "hi" };
Objects
Objects are mostly what we will be using in general. Its list the properties and their respective values by a , to separate the properties.
// Defining a type for object
type MyObject = {
name: string;
score: number;
}
Using the type in an object
const myObject: MyObject = {
name: "Gaurav",
score: 100
}
Narrowing and Discriminated unions
When there is a possibility that a variable can have more than one type and will be perfectly working in the code then unions are used to discriminate the types.
we use the pipe character | which is often used for an OR operation
let value: number | boolean = 10;
value = true; // works fine
value = 'true'; // doesn't work
Now, as we are allowing more than 1 static type to any variable, the question arises how will we make typescript differentiate when to use which type. Here comes the term type-guard. It's a way to narrow down to one type out of all the types of the union of types.
Don't worry, there is no complex coding involved just an if-else statement
if(typeof value === "number") {
console.log(value - 3);
// -> 7
}
else {
console.log(assignMe, " is a boolean variable!");
// -> 10 is a boolean variable!
}
Discriminated union
Discriminated Unions, also called algebraic data types or tagged unions are a combination of three things:
- The discriminant
- The union
- Type guards
The Discriminant
The discriminant is a singleton type property that is common in each of the elements of the union. You can read more about Typescript Singleton. Example:
type Action =
| { type: "CORRECT"; payload: number }
| { type: "WRONG"; payload: number }
| { type: "RESET" };
The Union
The union of the discriminants can be simply created as follows:
type StatusState = "CORRECT" | "WRONG" | "RESET";
The Type guard
function ScoreReducer(CurrentScore: number, action: Action) {
switch (action.type) {
case "CORRECT":
return score: CurrentScore + action.payload
case "WRONG":
return score: CurrentScore - action.payload
case "RESET":
return score: 0 ;
}
}
Difference between type & interface
These are two ways by which a static type for a variable is declared. Both are very much similar to each other.
1. Declaration Merging
For interfaces that share the same name, the TypeScript compiler merges two or more interfaces into only one declaration.
interface Person {
name: string;
}
interface Person {
age: number;
}
const siddhi: Person = {
name: "Gourav",
age: 21
};
This is not possible with types as can be seen below
This error is because the type does not accept duplicate entries, it takes the first definition as unique and any more type of the same name is shown error where duplication is possible in the interface.
2. Intersection
We can combine multiple types with the & keyword into a single type. But, we cannot combine them into a single interface.
type Name = {
username: string;
}
type Age = {
age: number;
}
type User = Name & Age; // It's valid
interface Name = {
username: string;
}
interface Age = {
age: number;
}
interface User = Name & Age; // It's invalid and error will be shown
3. Union
It allows us to create a new type that can have a value of one or a few more types. To create a union we have to use the |, which known as pipe character.
type Name = {
username: string;
}
type Age = {
age: number;
}
type User = Name | Age; // It's valid
interface Name = {
username: string;
}
interface Age = {
age: number;
}
interface User = Name | Age; // It's invalid and error will be shown
Conclusion
We can see from all the above explanations that TypeScript is far better than JavaScript with no disadvantages. For someone moving from JavaScript to TypeScript, it's irritating to see so many errors which were syntactically correct in the former.
But this prevents your code from crashing at any point in time if written in a dynamic language. That's the reason TDD is mostly used in every other organisation.
Hope you liked this article. Stay tuned for more such articles. Please share and comment below your views on TypeScript.
Connect with me on LinkedIn.