📄 Table of contents

Introduction

migrate from JS to TS

function displayPerson(name, age, height) {
let str1 = "Person named " + name + ", " + age + " years old";
let str2 = (height !== undefined) ? (" and " + height + " feet tall") : '';
console.log(str1 + str2);
}
displayPerson( "John", 32);
function displayPerson( name: string, age: number, height?: number) {
let str1: string = "Person named " + name + ", " + age + " years old";
let str2: string = (height !== undefined) ? (" and " + height + " feet tall") : '';

console.log(str1 + str2);
}
let employee = {};
employee.code = 10;
employee.name = "John";
console.log(employee);
let employee = {
code: 10,
name: "John"
};
interface Employee {
code: number,
name: string
}
let empObj = {} as Employee;
empObj.code = 10;
empObj.name = "John";

Types

Types vs. interfaces

Declaration merging

Duplicate identifier Song.

Extends and implements

interface NewCar extends Car {...}
class NewestCar implements NewCar

Intersection

Union

Tuples

type Reponse = [string, number]

Interfaces

interface IEmployee {
empCode: number;
empName: string;
getSalary: (number) => number; // arrow function
getManagerName(number): string;
}
Child_interface_name extends Parent_interface_name
Child_interface_name extends Parent1_interface_name, 
Parent2_interface_name,…,ParentN_interface_name

Classes

class Parent {
static num:number; # static variable
str:string = "hello"
private str2:string = "world" # private variable
}
super.call_Function_from_parent();

Classes can also implement interfaces.

namespace

namespace SomeNameSpaceName { 
export interface InterfaceName{ }
class ClassName { }
}

Generic Interface

interface IProcessor<T> 
{
result:T;
process(a: T, b: T) => T;
}
NOTE => Using "T" is a convention but not mandatory ...we can use any other alphabet.

Generic Classes

class KeyValuePair<T,U>
{
private key: T;
private val: U;
setKeyValue(key: T, val: U): void {
this.key = key;
this.val = val;
}
display():void {
console.log(`Key = ${this.key}, val = ${this.val}`);
}
}
let kvp1 = new KeyValuePair<number, string>();
kvp1.setKeyValue(1, "Steve");
kvp1.display(); //Output: Key = 1, Val = Steve
let kvp2 = new KayValuePair<string, string>();
kvp2.SetKeyValue("CEO", "Bill");
kvp2.display(); //Output: Key = CEO, Val = Bill

Modules

Syntax

//FileName : SomeInterface.ts 
export interface SomeInterface {
//code declarations
}
import someInterfaceRef = require(“./SomeInterface”);

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.