TypeScript 101: Understanding the basics in 3 minutes!

So, there has been a lot of buzz surrounding typescript for quite a while now. Especially since Angular started using TypeScript as its primary language. Now, you might think: Angular was developed by Google, a company that has pretty smart programmers (top 4%, some might say). If they choose TS over JS, there must be a good reason!

Well, you are right! and here are a few reasons to learn TS, ASAP!

TypeScript is the future of JavaScript (some might disagree!)
Typescript code is like a well-documented code, hence, it’s easier to understand.
It has classes, interfaces, generics, etc. like any other object-oriented programming language.

Let’s have a look at a basic typescript function and then you can be the judge:

function calculateGrade(course1: number, course2: number) : string {

return (course1 + course2) > 70 ? 'A' : 'B';

}

What did we learn? The function calculateGrade accepts two arguments of the type number and returns a grade of type string in the end.

This might look obvious, but if it was JavaScript, there is almost no easy way to know “what kind of variables you should use when calling this function?” or “what will it return, a number or a string?” And thus, leading to potential bugs in the end.

Now, what if after reading the function above, you still make a mistake and try passing a string as an argument to the above function.
Well, in the case of JS, you will only know it when it's already too late.
However, our friendly TS will let us know right away.
If you don’t believe me, see below:

Okay, alright, enough talking. Let’s move on to learning some basics of TypeScript that will help you to get started.

Types

As the name suggests, TypeScript has types! We have already seen the type number and string above. What else…

Classes

Have a look at the code below, don’t you think this kind of code is easier to comprehend and less error-prone.

// Employee class is bascially a blueprint of any employee object that can be instantiated with this piece of code.

class Employee {

public employeeName: string; // A public variable of type STRING

private salary: number; // A private variable of type NUMBER

constructor(employeeName: string, salary: number) {

this.employeeName = employeeName;

this.salary = salary;

} // A contructor to create an employee object with a predefined salary and name.

public promotion(): void {

this.salary += 1000;

} // Adding 1000 to the emplyee's current salary.

public printSalary():void {

console.log(this.employeeName + '\'s salary is: ' + this.salary);

} // This method prints the employee name and his/her salary.

}

// Instantiate (create) an object from a class

let employee = new Employee('Bob', 1000);

employee.printSalary();

employee.promotion();

employee.printSalary();

// Result =>

// Bob's salary is: 1000

// Bob's salary is: 2000

view raw employee.ts hosted with ❤ by GitHub

Code Explanation: Think of the “Employee” class as a blueprint. This piece of code, although pretty basic, explains some of the very important concepts of typescript. Also, note that the salary variable is private. That means we cannot directly access this variable. See the snapshot below:
Typescript compiler lets you know these kinds of errors beforehand. Remember OOP concepts?
For more information on classes (typescriptlang.org): classes.

Interfaces: create your own custom-types
We already know that we can use types like string, number, boolean, etc. What if we want to create our own custom types for enforcing checks in our code. Luckily we can use interfaces for that!

	// Interface can also be called a contract.
	// We can use them to define custom types without creating classes.
	// Interfaces ARE NOT compiled to JavaScript! It's just for checking/validation done by our TypeScript compiler.

	// Employee interface
	interface Employee {
	employeeName: string;
	salary: number;
	mobileNumber?: string; // Optional property => Does not have to be implemented
	}

	let employee: Employee;

	// This value does not satisfy the interface => Compilation error
	// user = { anything: 'anything', anynumber: 5};

	// This value does satisfy the interface
	employee = {employeeName: 'John', salary: 1234};

	console.log(employee);

	// Result => { employeeName: 'John', salary: 1234 }

view raw employeeInterface.ts hosted with ❤ by GitHub

Interfaces can be really useful and are heavily used in frameworks like Angular/React. We can also use “model” classes or “types” depending on the use-case.

For more information on interfaces (typescriptlang.org): interfaces.

Generics

Generics is a very simple, yet powerful feature of typescript. Using generics is widely appreciated while working on services/APIs that other developers might use, especially, open-source ones. It helps to know what kind of data to expect and hence, resulting in reduced errors and confusion.

	// Generics are types which can hold/use several types

	let employeeNamesArray: Array<string>; // This array will only accept strings

	// employeeNamesArray = [123]; // => Error
	employeeNamesArray = ['Bob', 'Sam'];

	console.log(employeeNamesArray); // Result => [ 'Bob', 'Sam' ]

view raw employeeGenerics.ts hosted with ❤ by GitHub

For more information on generics (typescriptlang.org): generics.

I hope to those who are new to typescript, this articles helped you to understand the benefits of using types in your JS code.

Resources

You can find the code in this article here: Link to the Github gists.

Other resources: Official typescript handbook.

Typescript playgrounds used:

https://typescript-play.js.org/

https://www.typescriptlang.org/play/

Thanks for reading. If you have any questions, feel free to leave a response.

The Immigrant Programmers

Search This Blog