TypeScript

Types

/** a is type of any */
let a

/** a is type of number */
let a :number;

/** if initalize when define, will figure out type. Here is number too*/
let a=1

/** possible types */
let a :number
let b :boolean
let c :string
let d :any

/** type aliases */
type Age = number
let age :Age = 55

type Person = {name:string, age:Age}
let driver:Person = {name:"leo", age:age}

/** below is array type */
let e : number[] = [1,2,3]

/** enum type. Red will assign to be 0 .... */
enum Color {Red, Green, Purple, Yellow}
/** use enum */
let myColor = Color.Green
/** will show 1 */
console.log(myColor)

/** tuple tyep. It is similiar to array. However, it can consist different types*/
let person:[string, number] = ['john', 30]
console.log(person.length)

person.push("male")
console.log(person)

/**the following will generate error because boolean is not allowed in person tuple.*/
person.push(true)

Literal types

literal type's value can ONLY be itself. It mostly is used by combining literals into unions

let x: "hello" = "hello";
let i:3=3

Interface as type

interface Point {
    x: number;
    y: number;
}

let p:Point = {x:1, y:2}
console.log(p)

//create array of points
const points: Point[] = [
    {x:1, y:2},
    {x:2, y:8}
]

Type Assertion

Set the type of value and ask compiler not to infer it

/** although code is defined as type any, we can set it to be number*/
let code: any = 123; 
let employeeCode = <number> code; 

/** another way. in jsx, should use this way */
let code: any = 123; 
let employeeCode = code as number;

Class

class Point {
    x: number;
    y: number;
    constructor(x:number, y:number) {
        this.x = x
        this.y = y
    }
    draw() {
        console.log(this.x)
        console.log(this.y)
    }
}

let p = new Point(1,6 )
p.draw()

We can reduce some lines of code for the above example. The below will behave the same as above. Actually, they will generate the same js code.

class Point {
    constructor(public x:number, public y:number) {
        
    }
    draw() {
        console.log(this.x)
        console.log(this.y)
    }
}

let p = new Point(1,6)
p.draw()

Also can make constructor parameter optional

 constructor(x:number, y?:number) {
        this.x = x
        this.y = y
    }

Accessors in class

class Point {
    constructor(private x:number, private y:number) {
        
    }

    get X() {
        return this.x
    }

    set X(val) {
        this.x = val
    }

    draw() {
        console.log(this.x)
        console.log(this.y)
    }
}

/** will output 1, 12, 6*/
let p = new Point(1,6)

/** access x by X */
console.log(p.X)

/** modify x by setter X */
p.X = 12
p.draw()

When complie, get error

tsc main.ts

 error TS1056: Accessors are only available when targeting ECMAScript 5 and higher
 
 //to solve the error:
 tsc -t es5 main.ts
 
 test.ts:2:21 - error TS2583: Cannot find name 'Map'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2015' or later.
//to solve
tsc -t es2015 test.ts

Use tsconfig.json

Create a tsconfig.json

tsc --init

To use it. Only type tsc. Will try to use setting in tsconfig.json and convert ts files into js files.

#watch mode
tsc --watch

Prevent from generating js file if there is error in ts file, set the below

"noEmitOnError": true

To prevent from compiling libraies files(node_modules), set

"skipLibCheck": true

Generics

This is simliar to what Java has done. The type can be dynamic in defining the function and can pass along the type variable. When call the function, specify the type.

function check<Type>(arg:Type):Type {
    return arg
}

let ans = check<string>("good")
console.log("ans:", ans)

let ans2 = check<number>(99)
console.log(ans2)

When we say an array of some type, we can do: Array<T>. Create a new Array of T: new Array<T>()

function cpArray<T>(items : T[] ) : T[] {
    return new Array<T>().concat(items);
}

let myNumArr = cpArray<string>(["a", "b"]);

HashMap

HashMap Methods

//Leetcode 2206
function divideArray(nums: number[]): boolean {
    let myMap = new Map<number, number>();
    
    for (let n of nums) {
        if (myMap.has(n)) {
            myMap.set(n, 1+myMap.get(n))
        } else {
            myMap.set(n, 1)
        }
    }
    
    for (let k of myMap.keys()) {
        if (myMap.get(k)%2 !=0) {
            return false
        }
    }
    return true

};

Install TypeScript locally

npm init -y
install typescript --save-dev

To use it:

npx tsc [cmd]

npx tsc -v

Use stage 2 decorator

• tsc version > 5
• disable experimental decorator config flag!( if enabled, will go back to stag 1 syntax)

Check optional parameter

//output: person age is undefined
interface Person {
  name: string;
  age?: number;
}

let p: Person = {
  name: "leo",
};

if (p.age === undefined) {
  console.log("person age is undefinde");
} else {
  console.log("person age is defined");
}

Solve exports Error

After compile ts file and try to run it in browser, got the following error.

app.js:2 Uncaught ReferenceError: exports is not defined

Here is original ts files

// myModule.ts
export class MyClass {
    public greet() {
        return "Hello from MyClass!";
    }
}

export function myFunction() {
    return "Hello from myFunction!";
}

//app.ts
import { MyClass, myFunction } from './myModule';

const instance = new MyClass();
console.log(instance.greet()); // Output: "Hello from MyClass!"
console.log(myFunction()); // Output: "Hello from myFunction!"

The following is app.js got

//app.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const myModule_1 = require("./myModule");
const instance = new myModule_1.MyClass();
console.log(instance.greet()); // Output: "Hello from MyClass!"
console.log((0, myModule_1.myFunction)()); // Output: "Hello from myFunction!"

To solve the problem

• change index.html

  -  <script src="dist/app.js" defer></script>
  +  <script type="module" src="dist/app.js" ></script>

• change app.ts

  -import { MyClass, myFunction } from './myModule';
  +import { MyClass, myFunction } from './myModule.js';

• change tsconfig.json (in "compilerOptions" section)

  -    "module": "commonjs",                                
  +    "module": "es2015",  

app.js got after applying the above changes

//app.js
import { MyClass, myFunction } from './myModule.js';
const instance = new MyClass();
console.log(instance.greet()); // Output: "Hello from MyClass!"
console.log(myFunction()); // Output: "Hello from myFunction!"