Understanding TypeScript Basics

Photo by Mimi Thian on Unsplash

Javascript is a flexible programming language. People who are familiar with programming languages like Java, C++, may have difficulties in using Javascript. Those languages are object-oriented, unlike classic Javascript (ES5).

However, Javascript has evolved a lot in the last years. We are now able to write object-oriented JS code, with ES6. (If you don’t know ES6, click here for more). But there is also another way with additional features: Typescript.

NOTE: In order to understand Typescript, you need to have at least some basic knowledge of Javascript and Object-Oriented Programming.

What is this Typescript?

Typescript can be explained as a superset of Javascript. It means that every Javascript (also ES6 & newer versions) code is valid Typescript code, but Typescript comes with some additional features:

• Strong-typed variables
• Object-oriented programming

In Typescript, we can define a variable’s type with the strong-typing feature like we define a variable in Java or C++. Additionally, we are able to write object-oriented code with Typescript.

Another important point is that Angular uses Typescript. So if you want to learn Angular, it’s an advantage to know some Typescript first. Let’s see how to start using Typescript…

Installation

Before we can use Typescript, we need to install it on our computer. We can install Typescript with NPM, so if you don’t have Node.js installed on your machine, you can download it from here.

Node.js official website

After the installation is completed, go to your terminal and type node -v to check the version:

Installing Typescript

Now you can install Typescript with NPM. Again from your terminal, type the following command to install Typescript:

npm install -g typescript

This command will install Typescript globally so you can use it in any project. After the installation completed, you can verify it with tsc -v .

Now you can start using Typescript. Create a new file from your code editor and the extension of the file must be .ts.

NOTE: Typescript files have a .ts extension.

Browsers don’t understand Typescript code, so later it needs to get translated to Javascript.

tsc yourFileName.ts

This command creates a Javascript file automatically and translates your Typescript code JS.

Strong Typing

Let’s move on with the main features of Typescript. Different from JS, we can define the types of our variables as number, string, boolean, array, any and much more.

Below you can see some examples of strong typing:

let name: string;       // for strings
let age: number;        // for any kind of numbers
let isChecked: boolean; // true or false
let data: any;          // can be changed later to any type
let array: number[];    // array of numbers

Object-Oriented Features

Class & Interface

Another important feature of TS is that we can write object-oriented code. For example, we can define classes and interfaces:

class Student {
  firstName: String;
  lastName: String;
  studentId: number;
getGrades() {
      // some code
  }
}

We have created a Student class and later we can create instances with the new keyword:

let student = new Student();     // an instance of Student class

After assigning the Student( ) object, we don’t need to declare its type again. It will be done automatically by Typescript.

Constructors

In Object-Oriented Programming, we have an important method called constructor( ). Every class has actually a default constructor method, and it is called when we create an instance of that class:

class Student {
  firstName: String;
  lastName: String;
constructor(firstName?: string, lastName?: string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
getGrades() {      
    // some code
  }
}

The question mark makes the parameters optional.

Access Modifiers

In Object-Oriented Programming, access modifiers are being used for restricting or allowing to access the variables of a class from outside. There are 3 types of access modifiers:

• Public — Allows access from outside of a class
• Private — Doesn’t allow access from outside of a class
• Protected — Allows access only within a class and its derived classes

All members of a class are Public by default, this is also an interview question :)

So we can (and should) restrict access from outside by adding the private keyword to a class’s members:

class Student {
  private firstName: String;
  private lastName: String;
constructor(firstName?: string, lastName?: string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
getGrades() {      
    // some code
  }
}

Javascript is evolving and will continue to evolve. Typescript is just one of the branches. I hope now you have a better understanding of Typescript, if you have any questions, don’t hesitate to ask them in the comment section.

Thank you for your time & support!