Typescript代碼實例解析

簡介：

TypeScript 是一種由微軟開發的自由和開源的編程語言，它是JavaScript的一個超集，擴展了JavaScript的語法。

語法特性

• 類 Classes
• 接口 Interfaces
• 模塊 Modules
• 類型註解 Type annotations
• 編譯時類型檢查Compile time type checking
• Arrow 函數 (類似 C# 的 Lambda 表達式)

JavaScript 與 TypeScript 的區別

TypeScript 是 JavaScript 的超集，擴展了 JavaScript 的語法，因此現有的 JavaScript 代碼可與 TypeScript 一起工作無需任何修改，TypeScript 通過類型註解提供編譯時的靜態類型檢查。
TypeScript 可處理已有的 JavaScript 代碼，並只對其中的 TypeScript 代碼進行編譯。

一、基礎類型

1、字符串新特性

可以使用模版字符串，它可以定義多行文本和內嵌表達式。 這種字符串是被反引號包圍（ `），並且以${ expr }這種形式嵌入表達式

let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }.

I'll be ${ age + 1 } years old next month.`;

2、數組的使用

TypeScript像JavaScript一樣可以操作數組元素。 有兩種方式可以定義數組。 第一種，可以在元素類型後面接上 []，表示由此類型元素組成的一個數組：

let list: number[] = [1, 2, 3];

第二種方式是使用數組泛型，Array<元素類型>：

let list: Array<number> = [1, 2, 3];

3、枚舉

enum類型是對JavaScript標準數據類型的一個補充。 像C#等其它語言一樣，使用枚舉類型可以爲一組數值賦予友好的名字。

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

可以手動賦值

enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;

枚舉類型提供的一個便利是你可以由枚舉的值得到它的名字。 例如，我們知道數值爲2，但是不確定它映射到Color裏的哪個名字，我們可以查找相應的名字：

let colorName: string = Color[2];
alert(colorName);

枚舉是在運行時真正存在的一個對象。 其中一個原因是因爲這樣可以從枚舉值到枚舉名進行反向映射。

enum Enum {
    A
}
let a = Enum.A;
let nameOfA = Enum[a]; // "A"

有時候需求卻比較嚴格。 當訪問枚舉值時，爲了避免生成多餘的代碼和間接引用，可以使用常數枚舉。 常數枚舉是在 enum關鍵字前使用const修飾符。

const enum Enum {
    A = 1,
    B = A * 2
}

4、Any

有時候，我們會想要爲那些在編程階段還不清楚類型的變量指定一個類型。 這些值可能來自於動態的內容，比如來自用戶輸入或第三方代碼庫。 這種情況下，我們不希望類型檢查器對這些值進行檢查而是直接讓它們通過編譯階段的檢查。 那麼我們可以使用 any類型來標記這些變量：

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

你可能認爲 Object有相似的作用，就像它在其它語言中那樣。 但是 Object類型的變量只是允許你給它賦任意值 - 但是卻不能夠在它上面調用任意的方法，即便它真的有這些方法

5、Void

某種程度上來說，void類型像是與any類型相反，它表示沒有任何類型。 當一個函數沒有返回值時，你通常會見到其返回值類型是 void：

function warnUser(): void {
    alert("This is my warning message");
}

6、Null 和 Undefined 和 Never

作用不大

7、類型斷言

類型斷言有兩種形式。 其一是“尖括號”語法：

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

let strLength: number = (someValue).length;
另一個爲as語法：

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

二、參數新特性

• 參數類型
• 默認值
• 可選參數

function test(a:string,b?:string,c:string="jojo"){
    console.log(a);
    console.log(b);
    console.log(c);
}

test("aaa");

三、變量聲明

let和const是ES6裏新特性

1、let和const都有塊級作用域

• 塊或for之外不可訪問
• 不能被聲明前讀或寫
• 不可重定義
• 內層屏蔽外層，應避免

2、不同

const雖然與let有相同的塊級作用域規則，但不可重新賦值。

四、函數新特性

1、Rest和Spread

//傳入任意多的參數
function test(...args){
    args.forEach(function (arg) {
        console.log(arg);
    })
}

console.log(1,2,3,4,5,6);

//傳的參數不固定，但真正傳入的按照函數來定
function test2(a,b,c){
    console.log(a);
    console.log(b);
    console.log(c);
}

var args1 = [1,2,3,4,5];
test2(...args1);
//雖然報錯，但是生成的js文件可實現功能
//在angular4的項目中ng build --prod時會自動進行AOT預編譯，
//ts代碼報錯會無法編譯通過，因此不能在有預編譯的項目中使用

2、Generator

控制函數執行過程，手動暫停和恢復代碼執行

function* test(){
    console.log("start");
    yield ;
    console.log("start");
}

3、析構函數distructuring

function getStock(){
    return {
        code:"IBM",
        price:100
    }
}

var {code,price} = getStock();
console.log(code);
console.log(price);


function getStock2(){
    return {
        code:"ibm",
        price:{
            price1:600,
            price2:400
        }
    }
}
var {code:codex,price:{price2}} = getStock2();
console.log(codex);
console.log(price2);


var arr1 = [1,2,3,4];
var [a,b]=arr1;
console.log(a);
console.log(b);
var [, ,c,d]=arr1;
console.log(c);
console.log(d);
var [m,n,...others]=arr1;
console.log(m);
console.log(n);
console.log(others);

四、表達式與循環

1、箭頭表達式

var fun1 = () =>{
}

var arr1 = [1,2,3,4];
console.log(arr1.filter((value)=> value%2==0 ));
//
//
//最主要的作用是正確指向this
function getNum() {
    this.i=1;
    setInterval(() => {
        console.log(this.i);
    },1000);
}

2、of循環

of循環與in循環的區別：

var arr1 = [1,2,3,4];
for(var n in arr1){
    console.log(arr1[n]);
}

for(var n of arr1){
    console.log(n);
}

五、面向對象的特性

1、類

class Person{
    constructor(public name:string){

    }
    eat(){
        console.log(this.name);
    }
}

var p = new Person("frank");
p.eat();

繼承Person類–extends

class Employee extends Person {
    code:string;
    work(){
        console.log(this.name+" is working");
    }
}
var e = new Employee("eric");
e.work();

super–子類調父類調構造函數

class Employee2 extends Person {
    constructor(name:string,code:string){
        super(name);
        this.code = code;
    }
    code:string;
    work(){
        super.eat();
    }
}
var e2 = new Employee2("eric","0");
e2.work();

2、泛型

參數化的類型，一般用來限制集合的內容

class Person{
    constructor(public name:string){

    }
    eat(){
        console.log(this.name);
    }
}
var workers : Array<Person> = [];

3、接口

interface IPerson{
    name:string;
    age:number;
}
class Person{
    constructor(public config:IPerson){

    }
}
var p = new Person({
    name:"frank",
    age:18
});

//implements

interface animal{
    eat();
}
class tiger implements animal{
    eat(){
        console.log("i like meat");
    }
}
class sheep implements animal{
    eat(){
        console.log("i like grass");
    }
}

4、模塊

可重用的單元，開發者自己決定模塊中哪些資源（類、變量、函數）暴露出去給外部使用，哪些自己使用

module1.ts:

export var prop1;
export function fun1(){};
export class Person{};

module2.ts:

import {prop1,fun1,Person} from './module1';

var p = new Person();
var prop = prop1;

export class ModuleTest{
    constructor(private props:prop1){

    }
}

5、註解 annoation

註解:爲程序的元素(類、方法、變量)添加更直觀的說明,這些說明與程序的業務邏輯無關,而是供指定的工具或框架使用。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'platform',
  templateUrl: './platformAccount.component.html',

})
export class test{
         ......
}