《TypeScript開發實戰》總結

《TypeScript開發實戰》是極客時間上的課程，是由搜狗營銷事業部高級架構師的梁宵老師出品，總共47章，涵蓋了TypeScript全部用法，以及咱們如何在實戰中應用TS。本課程還覆蓋了一些額外的前端基礎內容，好比webpack配置，react編程範式，很是適合初學者。

下面是老師整理的TypeScript實戰內容：

這是項目相關代碼的github連接，github.com/geektime-ge…

由於我對TS有一點了解，因此全程我都是1.5倍數看完。下面我會整理課程的所有內容，

基礎篇

通常編程語言按類型基礎，分爲強類型和弱類型，動態類型和靜態類型，而JS是弱類型動態語言，在類型轉換的時候，隱式的幫你作了不少操做，減小了開發難度，同時也帶來一些隱患，在你不想要類型轉換的地方作了類型轉換，或者一些動態的類型轉換致使了代碼跑異常，只有在運行時才知道。而TS是一門強類型靜態的語言，強大的類型系統，不只能開發階段推導類型，帶來開發的便利，同時爲每個變量函數聲明類型，有助於代碼的維護和重構。正如講師所說，TS的ROI（投入回報率）是勾型的。小型且不長久的項目慎入，越是須要多人合做和生命週期越長的項目，回報率越高。

如何搭建TS環境，請自行百度。或者經過網站運行TS，www.tslang.cn/play/index.…

• 編寫第一個TS程序

let hello: string = 'Hello TypeScript';
document.querySelectorAll('.app')[0].innerHTML = hello;
複製代碼

• 基本類型

ES6中基本類型，Boolean，Number，String，Array，Function，Object，Symbol，undefined，null。

TS數據類型，包含了ES6中全部類型，同時新增了一些類型，void，any，never，元組，枚舉，高級類型。

• 枚舉類型

經過關鍵字enum實現

enum Role {
    teacher: 1,
    children: 2,
    other: 3
}

const childrenType: Role = Role[children];
複製代碼

• 接口

interface List {
    id: number,
    name: string
}

interface Result {
    data: List[]
}

let result: Result = {
    data: [
        { id: 1, name: 'A' },
        { id: 2, name: 'B' }
    ]
};
複製代碼

固然接口也能夠約束函數

interface Add {
    (x: number, y: number): number
}

let add: Add = (x, y) => x + y;
複製代碼

固然也能夠用類型約束，用關鍵字type

type Add = (x: number, y: number) => number

let add: Add = (x, y) => x + y;
複製代碼

• 類

ts中添加了類型註解

class Dog {
    constructor(name: string) {
        this.name = name
    }

    static food: string = 'bones';

    public run() {}

    protected ;

    private say = 'wangwang';

    readonly dog = 'dog';

}

class Husky extends Dog {
    constructor(name: string, color: string) {
        super(props);
        this.color = color
    }

    color: string
}
複製代碼

抽象類，用關鍵字abstract，只能被繼承，不能被實例化。抽象類能夠實現多態。

abstract class Animal {
    eat() {
        console.log('eat');
    }

    // 抽象方法能夠不在父類中實現
    abstract sleep(): void
}

const animal = new Animal(); // error

class Dog extends Animal{
    constructor(name: string) {
        super();
        this.name = name;
    }

    run() {}

    sleep() {
        console.log('dog sleep');
    }
}

const dog: Dog = new Dog('small dog');

dog.eat() // eat;
dog.sleep(); // dog sleep
複製代碼

類型與接口的關係，借用課程的一張圖，侵刪。

接口之間能夠相互繼承，類之間也能夠相互繼承，實現複用。接口能夠經過類來實現，可是接口只能約束類的共有成員。

• 泛型

簡單點說，類型也是動態傳入，實現類型的靈活。也能夠理解爲，不預先肯定的數據類型，具體類型只有在使用的時候才能肯定。

function add<T>(x: T, y: T): T {
    return x + y;
}

add<number>(1, 2);
複製代碼

• 高級類型

爲了語言的靈活性，引入了高級類型

交叉類型 交叉類型須要實現全部的接口方法

interface DogInterface {
    run() {}
}
interface CatInterface {
    jump() {}
}

class Dog implements DogInterface & CatInterface {
    run() {}
    jump() {}
}
複製代碼

聯合類型

使代碼具備不肯定性，加強代碼的靈活性。

let a: number | string = 'a';
a = 1;

let b: 'a' | 'b' | 'c';

let c: 1 | 2 | 3;
複製代碼

索引類型、映射類型、條件類型，用到的場景比較少，能夠用到時再去查詢。

工程篇與實戰篇

• 配置tsconfig.json

新建一個ts項目

yarn install -g tsc
tsc 'project'
複製代碼

這樣就能新建一個TS項目，同時生成一個tsconfig.json文件。

若是一個目錄下存在一個tsconfig.json文件，那麼它意味着這個目錄是TypeScript項目的根目錄。tsconfig.json文件中指定了用來編譯這個項目的根文件和編譯選項。（來自於html中文網）

www.html.cn/doc/typescr…，這裏面有項目所需配置項說明。

• 編譯工具

通常咱們都是基於前端框架，很難像VsCode同樣，不借助任何前端框架，因此咱們選擇編譯工具的時候，最好不要用ts-loader，由於它缺乏插件支持，而且TS官方團隊也選擇和Babel合做，兼容現有前端的生態，因此推薦使用Babel。

• 投入生產

若是咱們須要在現有項目中使用TS，須要遵循幾個原則，共存原則，寬鬆原則和嚴格原則，根據字面意思，能夠選擇配置tsconfig.json配置項，設置不一樣對嚴格等級。而我推薦對部分開啓嚴格模式，先項目一小部分，其餘部分採用寬鬆原則，這樣項目能正常開發和穩步遷移。

總結

這個課程很全面講解了TS，支不支持梁老師，看你們的意願，而我是經過極客時間送個人7天試用面卡看的視頻。我還看完了《React進階實戰篇》，隨後送達。將注意力focus到能產生改變的領域，與你們共勉。

---

寫做時間：20190915