TypeScript – MAlabdali

install and config with npm

npm install typescript -D -g
npm link typescript
npm install -D ts-node
npm install -P @types/node

add scripts to package.json

"scripts": {
    "start": "node --inspect=5858 -r ts-node/register ./tutorial.ts",
    "build": "tsc  && copyfiles -U 1 ./**/*.env ./dist"
  }

build script convert all ts files to js and move it to ./dist folder

copyfiles is a tool to help you to move files to destination folder

npm install -D copyfiles

tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.

{
    "compilerOptions": {
        "module": "commonjs",
        "moduleResolution": "node",
        "pretty": true,
        "sourceMap": true,
        "target": "es6",
        "outDir": "./dist",
        "baseUrl": ".",
    },
    "include": [
        "./**/*"
    ],
    "exclude": [
        "node_modules",
        ".vscode"
    ]
}

so once you call tsc command it will build all files specified by tsconfig.json to target

let var1:string|number=44;
let var2:object={};
let var3:any;
let var4:void;//null or undefined
//===============================
let strArr:string[];//accept only array of string
let strArr2:[string,number];//tuple string,number
let strArr3:Array<string>;
//========================
let any:any;//take any value
let fun:(a: string) => void;//function type

TypeScript interface

interface Options {
  color: string;
  volume: number;
}
let options = {} as Options;
options.color = "red";
options.volume = 11;

interface User {
  name: string;
  id: number;
}
class UserAccount {
  name: string;
  id: number;
  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}
const user: User = new UserAccount("Murphy", 1);

interface  A{
    val1:string;
    val2:number;
}
class AA{
    val1:string;
    val2:number;
    val3:string;
    constructor(name:string,age:number) {
        this.val1=name;
        this.val2=age;
        this.val3=name+age;
    }
}
let val:A=new AA("hello",12);
console.log(val);

classes and abstract classes

interface IPerson {
    name: string;
    display():void;
}

interface IEmployee {
    empCode: number;
}

class Employee implements IPerson, IEmployee {
    empCode: number;
    name: string;
    
    constructor(empcode: number, name:string) {
        this.empCode = empcode;
        this.name = name;
    }
    
    display(): void {
        console.log("Name = " + this.name +  ", Employee Code = " + this.empCode);
    }
}

let per:IPerson = new Employee(100, "Bill");
per.display(); // Name = Bill, Employee Code = 100

let emp:IEmployee = new Employee(100, "Bill");
emp.display(); //Compiler Error: Property 'display' does not exist on type 'IEmployee'

class Car {
    name: string;
        
    constructor(name: string) {
        this.name = name;
    }
    
    run(speed:number = 0) {
        console.log("A " + this.name + " is moving at " + speed + " mph!");
    }
}

class Mercedes extends Car {
    
    constructor(name: string) {
        super(name);
    }
    
    run(speed = 150) {
        console.log('A Mercedes started')
        super.run(speed);
    }
}

class Honda extends Car {
    
    constructor(name: string) {
        super(name);
    }
    
    run(speed = 100) {
        console.log('A Honda started')
        super.run(speed);
    }
}

let mercObj = new Mercedes("Mercedes-Benz GLA");
let hondaObj = new Honda("Honda City")

mercObj.run();  // A Mercedes started A Mercedes-Benz GLA is moving at 150 mph!
hondaObj.run(); // A Honda started A Honda City is moving at 100 mph!

class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("The value of num is"+ StaticMem.num) 
   } 
} 

StaticMem.num = 12     // initialize the static variable 
StaticMem.disp()      // invoke the static method

abstract class Person {
    abstract name: string;

    display(): void{
        console.log(this.name);
    }
}

class Employee extends Person { 
    name: string;
    empCode: number;
    
    constructor(name: string, code: number) { 
        super(); // must call super()
        
        this.empCode = code;
        this.name = name;
    }
}

let emp: Person = new Employee("James", 100);
emp.display(); //James

class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("The value of num is"+ StaticMem.num) 
   } 
} 

StaticMem.num = 12     // initialize the static variable 
StaticMem.disp()      // invoke the static method

namespace

namespace SomeNameSpaceName { 
   export interface ISomeInterfaceName {      }  
   export class SomeClassName {      }  
} 
SomeNameSpaceName.SomeClassName;

as keyword

const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;

type aliases

type func=(a: string) => void;
type Point = {
  x: number;
  y: number;
};
 
// Exactly the same as the earlier example
function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
 
printCoord({ x: 100, y: 100 });