深入淺出 Typescript

TypeScript 是 JavaScript 的一個超集，支持 ECMAScript 6 標准。

TypeScript 由微軟開發的自由和開源的編程語言。

TypeScript 設計目標是開發大型應用，它可以編譯成純 JavaScript，編譯出來的 JavaScript 可以運行在任何瀏覽器上。

以上為網上對 Typescript 的一些解釋，那我們為什么要學 Typescript？

提到前端我們首先會想到 HTML，CSS，JavaScript 三大家族，我們掌握這三個就可以在前端界獲得一席之地，怎么突然又冒出個 Typescript，真心是學不動了，但是眾所周知，Vue 創始人尤雨溪尤大大已經宣布 Vue3.x 代碼庫將使用 Typescript 編寫，並且在知乎上對於"Typescript 不適合在 Vue 開發業務中使用嗎？" 的提問中做出回答，傳送門：https://www.zhihu.com/question/310485097/answer/591869966，Vue 又是現在國內主流的前端框架之一，只能說，如果不學 Typescript，尤大大都救不了你了。

眾所周知，從本質上來說，JavaScript是一種自由松散語言，它的語法規則並不是那么嚴格。正因為如此，我們就更容易犯錯，而且，即使是在運行的時候，我們也不能找到所有的錯誤。鑒於此，TypeScript作為JavaScript的增強版，它的語法更嚴格，我們在編寫代碼的時候就能夠發現大部分錯誤。不僅如此，按照TypeScript官方的說法，TypeScript使得我們能夠以JavaScript的方式實現自己的構思。TypeScript對面向對象的支持也非常完善，它擁有面向對象編程語言的所有特性。

TypeScript最大的目的是讓程序員更具創造性，提高生產力，它將極大增強JavaScript編寫應用的開發和調試環節，讓JavaScript能夠方便用於編寫大型應用和進行多人協作。

不過目前最后運行時還需要將TypeScript編譯為JavaScript。

那接下來我們就來看看如何安裝使用 Typescript。

在安裝 Typescript 之前我們要先安裝 NodeJs，然后運行

npm install -g typescript

以上命令會在全局環境下安裝 tsc 命令，安裝完成之后，我們就可以在任何地方執行 tsc 命令了。

編譯一個 TypeScript 文件很簡單：

tsc demo.ts

運行上面的代碼，我們就可以將 demo.ts 生成一個可以讓瀏覽器解析的 demo.js 的文件。

我們約定使用 TypeScript 編寫的文件以 .ts 為后綴，用 TypeScript 編寫 React 時，以 .tsx 為后綴。

那么我們在編寫代碼的時候不能每次都手動編譯 .ts 文件，我們想要的是實時編譯 .ts 文件，接下來我們就以 webstorm 編輯器來使 .ts 文件進行實時編譯。其他編輯器可自行百度如何實時編譯。

webstorm 版本：

創建一個 demo 項目，然后在項目中創建一個 tsconfig.json 的文件，內容如下：

這里只是簡單的配置，詳細參數配置：https://www.tslang.cn/docs/handbook/tsconfig-json.html

 

打開Webstorm,為TypeScript文件更改編譯設置，File->Settings->Tool->File Watchers->TypeScript，這里我們需要選擇TypeScript，但是File Watchers下默認是不存在的。需要點擊右側“+”號，選擇,彈出 New Watcher，設置好圈紅線的部分，點擊ok。勾選“TypeScript”，點擊ok。

 

 

 

File->Settings->Languages & Frameworks->TypeScript

 

 

 根據上面的操作我們就可以實時編譯 .ts 文件了。

目錄結構如下，在 index.html 中銀潤 test.js

test.ts 會實時編譯為 test.js 文件。

test.ts

 

test.js 

 

index.html 開發者工具中的打印日志

 根據上面的步驟我們就可以對 ts 文件進行實時編譯了，接下來我們就來看一下 Typescript 的一些基本用法。

 從上圖我們可以看出 Typescript 包含了 ES6 和 ES5，那我們就可以在 typescript 中使用 es5 和 es6，同時進行了擴展，語法上跟我們之前講的 Java 語法有很多相似。

 

Typescript 基礎類型

Typescript 基礎類型有：布爾類型（boolean）、數字類型（number）、字符串類型（string）、數組類型（array）、元組類型（tuple）、枚舉類型（enum）、任意類型（any）、null 和 undefined 、void、never 類型等，接下來我們就一一來看一下這些類型的應用。

/**
 * 在定義完參數進行賦值時，
 * 必須按照給定的參數類型進行賦值
 * 否則會出現編譯問題
 * 但在頁面當中還是會進行編譯
 * 但是不提倡這么做
 */
// boolean
let flag: boolean = true;
console.log(flag); // true
// let flag1:boolean = 123; // Type '123' is not assignable to type 'boolean'.

// number
let num: number = 123;
console.log(num); // 123

// string
let str: string = "abc";
console.log(str); // abc

// array 兩種定義方式
let arrS: string[] = ["123", "abc"]; // 數組內元素必須為 string
let arrA: Array<number> = [123, 456]; // 數組內元素必須為 number
console.log(arrS); // ["123", "abc"]
console.log(arrA); // [123, 456]

// tuple 元祖類型，屬於數組的一種，可以為每個元素指定類型
let tup: [number, string] = [123, "abc"];
console.log(tup); // [123, "abc"]
// let tup1:[number,string] = ["abc",123];  // 報錯

// enum 枚舉類型
/**
 * 在日常生活或者開發中
 * 很多都不能或者不容易使用數據表達
 * 如：顏色，日期，角色，性別等
 * 例如在開發中我們常用 -1 表示 error，用 0 表示 success
 * 這個就可以成為枚舉
 */
enum Flag {
    error = -1,
    success = 0
}

let e: Flag = Flag.error;
console.log(e); // -1

/**
 * 如果枚舉元素不賦值，則默認取值為下標
 * 如果某個元素取值為數字 n
 * 后面的元素如果不取值則默認為 n+1，以此類推
 * 如果某個元素取值為 string 類型
 * 后面的元素則必須取值，取值類型無要求
 */
enum Color {
    red, blue, black = 4, yellow, green = "green", white = 123
}

let red: Color = Color.red;
let blue: Color = Color.blue;
let black: Color = Color.black;
let yellow: Color = Color.yellow;
let green: Color = Color.green;
let white: Color = Color.white;
console.log(red, blue, black, yellow, green, white); // 0 1 4 5 "green" 123

// undefined
let un: undefined;
console.log(un); // undefined

// 我們也可以通過 | 來賦值多種類元素
let uns: number | undefined;

// any 類型，可以為任意類型
let an: any = 123;
console.log(an); // 13
an = "abc";
console.log(an) // abc

在上面的代碼中，我們演示了一下 Typescript 中的一些基本類型的使用，接下來我們再來看一下在函數中數據類型的應用。

Typescript 函數方法

// 如果沒有返回值，則在方法名后面加 :void
function test(): void {
    console.log("test")
}

test(); // test

// 如果有返回值，則在方法名后面加 :返回值的類型
function num(): number {
    return 123;
}

console.log(num()); // 123

function str(): string {
    return "abc";
}

console.log(str()); // "abc"

// 定義傳參
function getData(name: string, age: number): void {
    console.log(`${name}--${age}`)
}

getData("張三", 18); // 張三--18
// getData("張三"); // 報錯 Expected 2 arguments, but got 1.
// getData("張三","18"); // 報錯 Argument of type '"18"' is not assignable to parameter of type 'number'.

/**
 * 方法可選參數
 * 在參數后面添加 ?
 * 表示該參數為可選參數
 */
function getInfo(name: string, age?: number): string {
    if (age) {
        return `${name}--${age}`
    } else {
        return `${name}`
    }
}

console.log(getInfo("張三", 18)); // 張三--18
console.log(getInfo("張三")); // 張三

/**
 * 方法默認參數
 * 在參數后面直接賦值
 * 表示該參數直接當做了被傳入參數
 */
function getUser(name: string, age: number = 18): string {
    if (age) {
        return `${name}--${age}`
    } else {
        return `${name}`
    }
}

console.log(getUser("張三", 18)); // 張三--18
console.log(getUser("張三")); // 張三--18

/**
 * 剩余參數
 * 如果在傳參過程中
 * 前面的參數已經給定
 * 在調用函數傳參時會先將
 * 傳入的參數作為指定參數
 * 剩余參數必須為最后一個參數傳入
 */
// 正常的傳參
function sum1(...arr: number[]): number {
    let sum: number = 0;
    for (let i = 0; i < arr.length; i++) {
        sum += arr[i];
    }
    return sum;
}
console.log(sum1(1, 2, 3, 4)); // 10

// a 作為第一個參數，其余的為剩余參數，即 (a,剩余參數)
function sum2(a: number, ...arr: number[]): number {
    let sum: number = 0;
    for (let i = 0; i < arr.length; i++) {
        sum += arr[i];
    }
    return sum;
}
console.log(sum2(1, 2, 3, 4)); // 10

 在上面的代碼中，我們實現了在 ts 中如何定義方法和如何進行方法傳參，跟定義基本類型一樣需要對方法進行有效的規定。

接下來我們再來看一下在 ts 中如何實現類和類的繼承。

Typescript 類

在 ES5 中，我們是通過構造方法和原型鏈的方式進行繼承的，在之前的文章中我們也講過如何實現繼承，傳送門：https://www.cnblogs.com/weijiutao/p/12090916.html，Typescript 包含 ES6，所以本章着重講解一下 ES6 中 class 關鍵字的類和繼承。

// 在 ts 中定義類
class Person {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

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

    setName(name: string): string {
        return this.name = name;
    }

    work(): void {
        console.log("父類在工作")
    }
}

let p = new Person("張三");
p.getName(); // 張三
p.setName("李四");
p.getName(); // 李四
p.work(); // 父類在工作

// 在 ts 中實現繼承
/**
 * 通過 extends 繼承了 Person 的屬性和方法
 */
class Student extends Person {
    constructor(name: string) {
        super(name);
    }

    // 子類自己的方法
    run(): void {
        console.log(this.name + "在運動")
    }

    // 子類重寫父類的方法
    work(): void {
        console.log("子類在工作")
    }

}

let s = new Student("王五");
s.getName(); // 王五
s.run(); // 王五在運動
s.work(); // 子類在工作

* 類里面的修飾符
* Typescript 里面定義屬性的時候
* 給我們提供了三種修飾符
* public：公有類型，在類里面、子類、類外面都可以訪問
* protected：保護類型，在類里面，子類里面可以訪問，類外面無法訪問
* private：私有類型，在類里面可以訪問，子類，類外面無法訪問
* 屬性不加修飾符，默認為公有屬性

/**
 * 類里面的修飾符
 * Typescript 里面定義屬性的時候
 * 給我們提供了三種修飾符
 * public：公有類型，在類里面、子類、類外面都可以訪問
 * protected：保護類型，在類里面，子類里面可以訪問，類外面無法訪問
 * private：私有類型，在類里面可以訪問，子類，類外面無法訪問
 * 屬性不加修飾符，默認為公有屬性
 */

class Person {
    name: string;
    public age: number = 18;
    protected sex: string = "男";
    private city: string = "北京";

    constructor(name: string) {
        this.name = name;
    }

    // 在本類中訪問 public 類型
    getName(): void {
        console.log(this.name);
    }

    // 在本類中訪問 public 類型
    getAge(): void {
        console.log(this.age);
    }

    // 在本類中訪問 protected 類型
    getSex(): void {
        console.log(this.sex);
    }

    // 在本類中訪問 private 類型
    getCity(): void {
        console.log(this.city);
    }

}

let p = new Person("張三");
// 外部訪問 public 類型
console.log(p.name); // 張三
// 外部訪問 public 類型
console.log(p.age); // 18
// 外部訪問 protected 類型
// console.log(p.sex); // 報錯 Property 'sex' is protected and only accessible within class 'Person' and its subclasses.
// 外部訪問 private 類型
// console.log(p.city); // 報錯 Property 'city' is private and only accessible within class 'Person'.

class Student extends Person {
    constructor(name: string) {
        super(name);
    }

    getInfo(): void {
        // 在子類中訪問 public 屬性
        console.log(this.name);
        // 在子類中訪問 private 屬性
        console.log(this.age);
        // 在子類中訪問 protected 屬性
        console.log(this.sex);
        // 在子類中訪問 private 屬性
        // console.log(this.city) // 報錯 Property 'city' is private and only accessible within class 'Person'.
    }
}

let s = new Student("王五");
s.getInfo(); // 王五 18 男

在上面的代碼中我們實現了一下 class 中的修飾符，接下來我們再來看一下 class 的靜態屬性、靜態方法

/**
 * 通過 static 關鍵字可以定義靜態屬性和靜態方法
 * 靜態屬性和靜態方法直接通過 類. 來實現
 */

class Person {
    name: string;
    static age: number = 18;

    constructor(name: string) {
        this.name = name;
    }

    run(): void {
        console.log(`${this.name}在運動`)
    }

    /**
     * 靜態方法無法通過 this 調用類里面的屬性
     * 通過 類. 調用
     */
    static work(): void {
        console.log("父類靜態方法" + Person.age)
    }
}

let p = new Person("張三");
p.run(); // 張三在運動
console.log(p.name); // 張三

console.log(Person.age); // 18
Person.work(); // 父類靜態方法18

在上面的代碼中我們實現了一下 class 中的靜態屬性、靜態方法，接下來我們再來看一下 class 的多態

/**
 * 我們在定義類方法后
 * 子類繼承該類，並根據實際情況
 * 來實現自己所需要的類方法
 */
class Person {
    name: string;
    age: number;

    constructor(name: string) {
        this.name = name;
    }

    work(): void {
        console.log(`${this.name}在工作`)
    }


}

class Student extends Person {
    constructor(name: string) {
        super(name);
    }

    run(): void {
        console.log(`${this.name}在學習`)
    }
}
let s = new Student("張三");
s.run(); // 張三在學習

class Teacher extends Person {
    constructor(name: string) {
        super(name);
    }

    run(): void {
        console.log(`${this.name}在講課`)
    }
}
let t = new Teacher("李四");
t.run(); // 李四在講課

在上面的代碼中，我們定義了 Person 類並定義了一個 work 方法，然后 Student 和 Teacher 類分別繼承了 Person，但是根據自己的角色重寫了 work 方法，這就是一種多態。

接下來我們再來看一下 class 中的抽象類

/**
 * 抽象類是提供其他類繼承的基類，不能被實例化
 * abstract 關鍵字定義抽象類和抽象方法
 * 子抽象類中的抽象方法不能包含具體實現，必須在實現類中實現
 * 抽象類和抽象方法只是用來定義標准
 */
abstract class Person {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    abstract work(): any;
}

// 無法被實例化
// let p = new Person(); // 報錯 error TS2511: Cannot create an instance of an abstract class.

class Student extends Person {
    constructor(name: string) {
        super(name);
    }

    work(): any {
        console.log(`${this.name}在學習`)
    }
}

let s = new Student("張三");
s.work(); // 張三在學習

 

Typescript 接口

在面向對象的編程中，接口是一種規范的定義，它定義了行為和動作的規范，在程序設計里面，幾口是一種限制和規范的作用。接口定義了某一批類所需要遵循的規范，接口不關心這些類的內部狀態數據，也不關心這些類里面方法的實現細節，它只規定這批類里面必須提供某些方法，提供這些方法的類就可以滿足實際需要，Typescript 中的接口類似於 Java，同時還增加了更靈活的接口類型，包括屬性、函數、數組類等。

 在日常生活中，我們會接觸到很多類似接口的問題，比如 USB 接口，我們在電腦上插鼠標，鍵盤，U盤的時候不用去考慮它到底能不能插進去，只要型號對了就肯定能插進去，接口就相當於一個標准，你要想把鼠標插到我的電腦上，在出廠時就必須遵守該電腦定義的接口標准。

接下來我們就來看一下接口：

1、屬性和類接口

interface FullName {
    firstName:string,
    lastName:string,
    sayHi: ()=>string
}

let person:FullName = {
    firstName:"張",
    lastName:"三",
    sayHi: ():string =>{return "hell world"}
};

console.log(person.firstName); // 張
console.log(person.lastName); // 三
console.log(person.sayHi()); // hello world

在上面的代碼中，我們通過 interface 編寫了一個 FullName 的接口，然后定義了一個 person 的變量來實現這個接口，那么我們就可以使用該接口里面的屬性了。

 2、函數類型接口

// 對方法傳入的參數以及返回值進行約束
interface encrypted {
    (key: string, value: string): string
}

// key 和 value 必須符合 encrypted 接口的 string 類型約束
let getData: encrypted = (key: string, value: string) => {
    return `${key}--${value}`;
};
// 錯誤寫法
// let getData:encrypted = (key:number,value:string)=>{
//     return `${key}--${value}`;
// };
console.log(getData("name", "張三")); // name--張三

3、數組類型接口

interface nameArray {
    [index:number]:string
}

let list:nameArray = ["張三","李四"];
// let list:namelist = ["張三","李四",123]; // 錯誤元素 123 不是 string 類型

4、接口的繼承

/**
 * 通過 implements 來實現接口的繼承
 * 同時接口內的屬性和方法在子類中必須重新定義
 * 可以實現多繼承，class 子類 implements 接口1, 接口2{ }
 */

interface Person {
    name: string,
    work: () => void
}

class Student implements Person {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    work(): void {
        console.log(`${this.name}在學習`)
    }
}

let s = new Student("張三");
s.work(); // 張三在學習

5、接口的擴展

/**
 * 通過 extends 來實現接口的擴展
 * 在實現接口的時候，接口的擴展接口也必須重新定義
 */

interface Animals {
    name: string,
}

interface Person extends Animals {
    age: number,
}

let person:Person = {
    name:"張三",
    age: 18
};
console.log(person); // {name: "張三", age: 18}

 

Typescript 泛型

在軟件工程中，我們不僅要創建一致的定義良好的 API，同時也要考慮可重用性，組件不僅能夠支持當前的數據類型，同時也能支持未來的數據類型，這在創建大型系統時為你提供了十分靈活的功能。

在 C# 和 Java 這樣的語言中，可以使用泛型來創建可重用的組件，一個組件可以支持多種類型的數據，這樣用戶就可以有自己的數據類型來使用組件。

 通俗理解，泛型就是解決函數、類、接口 的復用性，以及對不特定數據類型的支持。

1、泛型函數

現在需要寫一個方法實現，我們傳入的參數和返回的參數保持一致，並且參數必須為 string 或者 number，按照正常的思維我們代碼應該是這樣：

function getData1(value: string): string {
    return value;
}

function getData2(value: number): number {
    return value;
}

// 返回 string 類型
getData1("abc");
// 返回 number 類型
getData2(123);

在上面的代碼中，我們需要定義兩個不同的方法來分別實現 string 和 number 類型數據的返回，這樣會造成大量重復代碼，當然我們可以將返回類型變為 any 類型來解決，如下：

function getData(value: any): any {
    return value;
}

// 返回 string 類型
getData("abc");
// 返回 number 類型
getData(123);

使用 any 類型可以解決我們的問題，但是其實是放棄了類型檢驗，和普通 js 就沒有什么區別了。

接下來我們來看一下泛型是如何解決該問題的：

/**
 * 定義泛型類型 T
 * 我們需要 T 是什么類型
 * 直接定義 T 的類型即可
 * @param value
 */
function getData<T>(value: T): T {
    return value;
}

// 返回 string 類型
getData<string>("abc");
// 返回 number 類型
getData<number>(123);

// 錯誤寫法
// getData<string>(456); // 報錯 rgument of type '456' is not assignable to parameter of type 'string'.

在上面的代碼中，我們通過 T 來定義方法的泛型，這樣方法在傳入時需要先定義參數的類型，然后定義返回數據類型，這樣就實現了上面的問題。

2、泛型類

現在有這樣一個問題，我們要定義一個類，該類中 toString 方法返回值為一個二維坐標系上的某個點，按照之前我們講的類的內容，可以寫出如下代碼：

class Point {
    x: number;
    y: number;

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

    toString() {
        return "(" + this.x + "," + this.y + ")";
    }
}

let p = new Point(1, 2);
// 坐標系點 (1,2)
console.log(p.toString()); // (1,2)

上面的代碼可以實現我們想要的功能，但是現在又有新需求，坐標系上的點可以為 string 類型的數據，入（一，二），而我們在定義傳入 x，y 時候已經定義了它傳入的類型必須是 number 類型，如果向函數泛型那樣定義 any 類型的話其實就失去了類型校驗，跟普通的 js 沒有什么區別了，這時候就需要泛型來解決了，如下：

/**
 * Point 類的泛型 T
 * Point 需要傳入什么參數類型
 * 就讓 T 是什么類型即可
 */
class Point<T> {
    x: T;
    y: T;

    constructor(x: T, y: T) {
        this.x = x;
        this.y = y;
    }

    toString() {
        return "(" + this.x + "," + this.y + ")";
    }
}

let p1 = new Point<number>(1, 2);
// 坐標系點 (1,2)
console.log(p1.toString()); // (1,2)

let p2 = new Point<string>("一", "二");
// 坐標系點 (一,二)
console.log(p1.toString()); // (一,二)

在上面的代碼中，我們通過 T 實現了 Point 類型的泛型，Point 需要傳入什么類型的參數，我們就將 T 定義成什么類型的數據即可。

3、泛型接口

還是上面的問題，不過這次我們是將 Point 寫成接口的形式，如下：

interface Point {
    (x: number, y: number): string
}

let getPoint: Point = (x, y): string => "(" + x + "," + y + ")";

console.log(getPoint(1, 2)); // (1,2)

在上面的代碼中，我們將 x 和 y 定義為 number 類型，這樣在傳入參數時就只能是 number 類型了，按照上面泛型函數和泛型類的方法，我們將 number 變為 T，如下：

interface Point<T> {
    (x: T, y: T): string
}

let getPoint1: Point<number> = (x, y): string => "(" + x + "," + y + ")";
// 坐標系點 (1,2)
console.log(getPoint1(1, 2)); // (1,2)

let getPoint2: Point<string> = (x, y): string => "(" + x + "," + y + ")";
// 坐標系點 (一,二)
console.log(getPoint2("一", "二")); // (一,二)

通過 T 我們將 Point 接口傳入的參數 x,y 進行泛型，這樣我們就可以根據自己的需求傳入我們想要的參數類型了。

TypeScript 模塊

TypeScript 模塊的設計理念是可以更換的組織代碼。

模塊是在其自身的作用域里執行，並不是在全局作用域，這意味着定義在模塊里面的變量、函數和類等在模塊外部是不可見的，除非明確地使用 export 導出它們。類似地，我們必須通過 import 導入其他模塊導出的變量、函數、類等。

兩個模塊之間的關系是通過在文件級別上使用 import 和 export 建立的。

模塊使用模塊加載器去導入其它的模塊。 在運行時，模塊加載器的作用是在執行此模塊代碼前去查找並執行這個模塊的所有依賴。 大家最熟知的JavaScript模塊加載器是服務於 Node.js 的 CommonJS 和服務於 Web 應用的 Require.js。

此外還有有 SystemJs 和 Webpack。

模塊導出使用關鍵字 export 關鍵字，要在另外一個文件使用該模塊就需要使用 import 關鍵字來導入。

接下來我們就來實現一下：

 

 在上圖中我們通過 module.ts 中 export 關鍵字導出我們封裝好的屬性和方法，在 test.ts 中我們就可以使用 import 關鍵字來導入我們想要的屬性和放大了。

我們也可以通過 export default 來導出模塊，如下

 

 但是 export default 在模塊導出只能引用一次，導入時也不能使用 { }，而是直接導入模塊即可。

 

Typescript 命名空間

在代碼量較大的情況下，為了避免各種命名沖突，可將相似功能的函數，類，接口等放置到命名空間內。同 Java 的包，.net 的命名空間一樣，Typescript 的命名空間可以將代碼包括起來，只對外暴露需要在外部訪問的對象，命名空間內的對象通過 export 導出。

舉個栗子：假如現在有 A 和 B 兩個開發者同時定義了一個 Person 的類，那么這兩個類就會引起沖突，為了避免沖突，就不得不再引入其他標識來辨別這兩個 Person，空間命名就是為了解決該問題，如下：

 

/**
 * 通過 namespace 來定義命名空間
 *分別定義了 A 和 B 兩個命名空間
 * 我們可以根據需求來調用 A 或 B 里面類和方法
 */
namespace A {
    interface Person {
        name: string,

        work(): void,
    }

    export class Student implements Person {
        name: string;

        constructor(name: string) {
            this.name = name;
        }

        work() {
            console.log(`${this.name}在學習`)
        }
    }
}

namespace B {
    interface Person {
        name: string,

        work(): void,
    }

    export class Student implements Person {
        name: string;

        constructor(name: string) {
            this.name = name;
        }

        work() {
            console.log(`${this.name}在寫作業`)
        }
    }
}

let a = new A.Student("張三");
a.work(); // 張三在學習
let b = new B.Student("李四");
b.work(); // 李四在寫作業

空間命名用起來很簡單，只需要通過 namespace 關鍵字來命名空間即可。

 

Typescript 裝飾器

裝飾器是一種特殊類型的生命，它能夠被附加到類聲明，方法，屬性或參數上，可以修改類的行為。通俗的講裝飾器就是一個方法，可以注入到類，方法，屬性參數上來擴展類，屬性，方法，參數的功能。

常見的裝飾器有：類裝飾器，屬性裝飾器，方法裝飾器，參數裝飾器。

裝飾器的寫法有：普通裝飾器（無法傳參），裝飾器工廠（可傳參）

裝飾器是過去幾年中 js 最大的成就之一，也是 ES7 的標准特性之一。

 

1、類裝飾器：

/**
 * 類小黃使其在聲明之前被聲明（緊靠着類聲明）
 * 類裝飾器應用於類構造函數
 * 可以用來監視，修改或替換類定義
 */
function log(params: any) {
    console.log(params); // ƒ Person() {}
    params.prototype.name = "動態屬性";
    params.prototype.func = () => {
        console.log("動態方法");
    }
}

@log
class Person {

}

let p: any = new Person();
console.log(p.name); // 動態屬性
p.func(); // 動態方法

在上面的代碼中，我們通過 @log 的形式來定義裝飾器，在 log 方法中傳入一個 params 的參數，通過打印我們發現它就是 Person 方法了，那么我們就可以通過原型鏈 prototype 的形式添加屬性和方法了。

上面@log 並沒有傳參，接下來我們看一下在調用裝飾器的時候傳入我們想要的參數：

/**
 * 在 log 方法中，我們通過 return 方式
 * 將該方法返回，那就跟無參裝飾器一樣了
 * 這樣我們就可以在 log 方法中傳參了，如 params
 */
function log(params: string) {
    return function (target: any) {
        console.log(params); // 張三
        console.log(target); // f Person() {}
        target.prototype.name = params;
        target.prototype.work = function (): void {
            console.log(`${params}在工作`)
        }
    }
}

@log("張三")
class Person {

}

let p: any = new Person();
console.log(p.name); // 張三
p.work(); // 張三在工作

 

2、屬性裝飾器

/**
 * 屬性裝飾器表達式會在運行時當作函數被調用
 * 傳入下列 2 個參數
 * 1、對於靜態成員來說是類的構造函數，對於實例成員是類的原型對象
 * 2、成員的名字
 */
function log(param: any) {
    return function (target: any, key: string) { // 分別傳入 2 個參數
        console.log(param); // 張三
        console.log(target); // {constructor: ƒ}
        console.log(key); // name
        target[key] = param;
    }
}


class Person {
    @log("張三")
    name: string;

    constructor() {
    }

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

let p: any = new Person();
console.log(p.name); // 張三
p.getName(); // 張三

在上面的代碼中，我們在 name:string 上面添加了 @log 的裝飾器，這就是屬性裝飾器，同時我們對裝飾器進行了傳參“張三”，我們將 log 方法返回，通過打印發現返回的方法的第一個參數 target 為 constructor 構造器，第二個參數為 name，那我們就可以根據 target[key] 的形式對 name 屬性進行賦值了。

 3、方法裝飾器

/**
 * 方法裝飾器會被應用到方法的屬性描述符上
 * 用來修改，監視和替換方法定義
 * 方法裝飾器在運行時傳入下列三個參數
 * 1、對於靜態成員來說是類的構造函數，對於實例成員來說是類的原型對象
 * 2、成員的名字
 * 3、成員的屬性描述符
 */
function log(param: any) {
    return function (target: any, key: any, description: any) { // 分別傳入三個參數
        console.log(param); // 張三
        console.log(target); // {getName: ƒ, constructor: ƒ}
        console.log(key); // getName
        console.log(description); // {writable: true, enumerable: true, configurable: true, value: ƒ}
        console.log(description.value); // ƒ () {console.log(this.name) }
        target.age = 20; // 添加屬性
        target.work = () => console.log(`${param}在工作`); // 添加方法
        // 修改 getName 方法
        description.value = ():void => console.log(`${param}---我是被修改的 getName 方法`);
    }
}


class Person {
    name: string;

    constructor() {
    }

    @log("張三")
    getName(): void {
        console.log(this.name);
    }
}

let p: any = new Person();
console.log(p.age); // 20
p.work(); // 張三在工作
p.getName(); // 張三---我是被修改的 getName 方法

4、方法參數裝飾器

/**
 * 方法參數裝飾器會在運行時當中函數被調用
 * 可以使用參數裝飾器為類的原型增加一些元素數據
 * 傳入下列 3 個參數
 * 1、對於靜態成員來說是類的構造函數，對於實例成員來說是類的原型對象
 * 2、方法的名字
 * 3、參數在函數參數列表中的索引
 */
function log(param: any) {
    return function (target: any, methodName: any, index: any) { // 分別傳入三個參數
        console.log(param); // name
        console.log(target); // {getData: ƒ, constructor: ƒ}
        console.log(methodName); // getData
        console.log(index); // 0
        target.age = 18;
        target.work = (): void => console.log(`我在工作`)
    }
}


class Person {
    constructor() {
    }

    getData(@log("name") name: string): void {
        console.log(name);
    }
}

let p: any = new Person();
p.getData("張三"); // 張三
console.log(p.age); // 18
p.work(); // 我在工作

方法參數裝飾器跟其他裝飾器不同的是需要將 @log 寫在方法的參數內，比較怪，一般情況下方法裝飾器就能解決方法參數裝飾器所實現的功能，所以一般我們使用方法參數器即可。

裝飾器的執行順序：屬性裝飾器>方法裝飾器>方法參數裝飾器>類裝飾器，如果有多個相同裝飾器，則先執行后面的裝飾器。

 

以上就是本人目前學習 Typescript 的一些整理歸納，好記性不如爛筆頭，謹以此記，與君共勉！