Angular - Typescript Fundamentals

Introduction

 

In order to build an application in Angular, we need to know the fundamentals of Typescript. In this article, I'm going to explain the fundamentals of Typescript and object-oriented programing principles. 

 

I'll cover the following topics in this article,

1. Type Annotations.
2. Arrow Functions. 
3. Interfaces.
4. Classes. 
5. Constructors.
6. Access Modifiers
7. Modules 

What is Typescript?

 

Typescript is the superset of javascript. That means any valid javascript code is also a valid typescript code. Typescript brings some object-oriented features that we missed in javascript. We have concepts of classes, interfaces, access modifiers, etc in typescript.

 

Type Annotation 

   

We cannot specify the type of the variable such as boolean, string, number in javascript. But in typescript, we can specify the type of the variable. It helps the compiler in checking the type of the variable and avoids the run time errors. Typescript will give you a compilation error if we do the wrong assignment of value to the variable. For example, you declare var "age" and assign number 5 to it. Later assign some text. it will give a compilation error.

 

 

We need to use type annotations. We can specify the type by using a colon (:) after the variable name.

 

Syntax - var variablename - type

let a: number;
let b: string;
let c: boolean;
let d: any;
let e: any[];

Arrow Functions

   

Arrow functions also works like normal functions but it shortens the syntax. Its also called Lambda functions. If we use arrow notation, no need to use the function keyword. Parameters are passed in brackets and the function expression is enclosed in curly brackets.

 

Syntax

 

(para1, para2... paraN) => { expression } 

let normfunc = function(parameter){
  console.log(parameter);
}

let arrowfunc = (parameter)=>{
  console.log(parameter);
}

Interfaces

 

Interfaces contain only declaration but no implementation. When typescript compiler compiles to javascript, the interface will disappear from the javascript file. Thus, it's only for development purposes only.

 

Syntax

 

interface interface_name
{
   //variable declaration
}

 

For example, without using interface,      

let pinMap =(loc:{lat:number,long:number})=>{

}
pinMap({lat:232434,long:09897});

With using interface, 

interface Location{
  lat:number,
  long:number
}
let pinMap2 =(loc:Location)=>{

}

pinMap2({lat:232434,long:09897});

Classes

 

Typescript is an object-oriented programming language, So it supports one of the main features of object-oriented programming i.e Classes. Classes hold the implementation. A Class keyword is used to declare a class in typescript.

 

Syntax

 

Class class_name
{
   variables;
   methods;
}

 

A class creates an object using new keyword followed by class_name. The new keyword allocates the memory for the object at the runtime.

 

Syntax

 

let object_name = new class_name(); 

 

For example,

Class Location{
  lat:number;
  long:number;

  pinMap(){

  }
}

let map = new Location();
map.lat =21323;
map.long = 4646;
map.pinMap();

Constructors

 

A constructor is the method that is called when we create an instance of the class. Every class has a constructor. For example,  

class Location{
  lat:number;
  long:number;

  constructor(lat:number,long:number){
    this.lat = lat;
    this.long =long;
  }

  pinMap(){

  }
}

let map = new Location(21323,4646);
map.pinMap();

Access Modifiers

 

Access Modifiers are the keywords applied to the member of the class to control its access from the outside. Access Modifiers increase the security of the class members and prevent them from invalid usage. We can also use it to control the visibility of the class members. It's not mandatory to specify the access modifiers if we didn't give, it automatically sets to the public for all the class members.

 

We have three access modifiers,

1. Public - By default all members are public.
2. Private - Members are accessible only inside declared class.
3. Protected - Members are accessible in both declared class and derived class. 

 

Example for private,

  

 

 Example for Protected,

 

 

Summary

 

In this article, we discussed the fundamentals of typescript and objected-oriented principles. We have too many tutorials for basic fundaments but this article explains everything in brief and only the essentials. I hope it's helpful.