摘要：要為變量或者常量指定類(lèi)型也很簡(jiǎn)單，就是在變量常量名后面加個(gè)冒號(hào)，再指定類(lèi)型即可，比如聲明函數(shù)是類(lèi)型，即返回值是類(lèi)型聲明參數(shù)是類(lèi)型聲明是無(wú)返回值的聲明是這段代碼演示了對(duì)函數(shù)類(lèi)型參數(shù)類(lèi)型和變量類(lèi)型地聲明。變量函數(shù)參數(shù)和返回值需要申明類(lèi)型。

從 JavaScript 語(yǔ)法改寫(xiě)為 TypeScript 語(yǔ)法，有兩個(gè)關(guān)鍵點(diǎn)，一點(diǎn)是類(lèi)成員變量(Field)需要聲明，另一點(diǎn)是要為各種東西(變量、參數(shù)、函數(shù)/方法等)聲明類(lèi)型。而這兩個(gè)點(diǎn)直接引出了兩個(gè)關(guān)鍵性的問(wèn)題，有哪些類(lèi)型？怎樣聲明？

在說(shuō) TypeScript 的類(lèi)型之前，我們先復(fù)習(xí)一下 JavaScript 的七種類(lèi)型：

undefined

function

boolean

number

string

object

symbol

這七種類(lèi)型都是可以通過(guò) typeof 運(yùn)算符算出來(lái)的，但其中并沒(méi)有我們常見(jiàn)的 Array、null，Date 之類(lèi)的類(lèi)型——因?yàn)樗鼈兤鋵?shí)都是 object。

TypeScript 的重要特性之一就是類(lèi)型，所以 TypeScript 中的類(lèi)型要講究得多，除了 JavaScript 中的類(lèi)型之外，還定義了其它一些(不完全列表)

Array，或 T[]，表示 T 類(lèi)型的數(shù)組

null，空類(lèi)型，其作用與 strictNullChecks 編譯參數(shù)有關(guān)

Tuple(元組)，形如 [Number, String]

enum T，定義枚舉類(lèi)型 T，可理解為集中對(duì)數(shù)值常量進(jìn)行命名

interface T，接口，T 是一種接口類(lèi)型

class T，類(lèi)，T 是一種類(lèi)型

any，代表任意類(lèi)型

void，表示沒(méi)有類(lèi)型，用于聲明函數(shù)類(lèi)型

never，表示函數(shù)不可返回的神奇類(lèi)型

……

具體的類(lèi)型這里就不詳述了，官方 Handbook 的 Basic Type、Interfaces、Classes、Enum、Advanced Types 這幾部分說(shuō)得非常清楚。

不過(guò)仍然有一種類(lèi)型相關(guān)的特性不得不提——泛型。如果只是說(shuō)數(shù)據(jù)類(lèi)型，純粹的 JSer 們還可以理解，畢竟類(lèi)型不是新鮮玩意兒，只是擴(kuò)展了點(diǎn)種類(lèi)。但是泛型這個(gè)東西，純粹的 JSer 們可能就沒(méi)啥概念了。

泛型主要是用一個(gè)符號(hào)來(lái)表示一些類(lèi)型，只要是符合約束條件(默認(rèn)無(wú)約束)的類(lèi)型，都可以替換掉這個(gè)類(lèi)型符號(hào)來(lái)使用，比如

function test(v: T) {
    console.log(v);
}

test(true);    // 顯式指定 T 由 boolean 替代
test("hello");          // 推斷(隱式) T 被 string 替代
test(123);              // 推斷(隱式) T 被 number 替代

泛型與強(qiáng)類(lèi)型相關(guān)，即需要進(jìn)行嚴(yán)格的類(lèi)型檢查，又想少寫(xiě)相似代碼，所以干脆用某個(gè)符號(hào)來(lái)代替類(lèi)型。泛型這個(gè)名稱(chēng)本身可能并不是很好理解，但是如果借用 C++ 的“模板”概念，就好理解了。比如上面的泛型函數(shù)，根據(jù)后面的調(diào)用，可以被解釋為三個(gè)函數(shù)，相當(dāng)于套用模板，用實(shí)際類(lèi)型代替了 T：

function test(v: boolean) { ... }
function test(v: string) { ... }
function test(v: number) { ... }

關(guān)于泛型，更詳細(xì)的內(nèi)容可以參考 Handbook 的 Generic 部分。

類(lèi)型就簡(jiǎn)述到這里，簡(jiǎn)單的類(lèi)型一看就能明白，高級(jí)一點(diǎn)的類(lèi)型我們以后再開(kāi)專(zhuān)題來(lái)詳述。不過(guò)既然選擇使用 TypeScript，必然會(huì)用到它的靜態(tài)類(lèi)型特性，那就必須強(qiáng)化識(shí)別類(lèi)型的意識(shí)，并養(yǎng)成這樣的習(xí)慣。對(duì)于純 JSer 來(lái)說(shuō)，這是一個(gè)巨大的挑戰(zhàn)。

聲明類(lèi)型，主要是指聲明變量/常量，函數(shù)/方法和類(lèi)成員的類(lèi)型。JS 中使用 var 聲明一個(gè)變量，ES6 擴(kuò)展了 let 和 const。這幾種聲明 TypeScript 都支持。要為變量或者常量指定類(lèi)型也很簡(jiǎn)單，就是在變量/常量名后面加個(gè)冒號(hào)，再指定類(lèi)型即可，比如

// # typescript

// 聲明函數(shù) pow 是 number 類(lèi)型，即返回值是 number 類(lèi)型
// 聲明參數(shù) n 是 number 類(lèi)型
function pow(n: number): number {
    return n * n;
}

// 聲明 test 是無(wú)返回值的
function test(): void {
    for (let i: number = 0; i < 10; i++) {  // 聲明 i 是 number
        console.log(pow(i));
    }
}

這段代碼演示了對(duì)函數(shù)類(lèi)型、參數(shù)類(lèi)型和變量類(lèi)型地聲明。這相對(duì)于 JavaScript 代碼來(lái)說(shuō)，似乎變得更復(fù)雜了。但是考慮下，如果我們?cè)谀程幉恍⌒倪@樣調(diào)用了 pow：

// # javascript

let n = "a";
let r = pow(n);     // 這里存在一個(gè)潛在的錯(cuò)誤

JavaScript 不會(huì)提前檢查錯(cuò)誤的，只有在執(zhí)行到 r = pow(n) 的時(shí)候給 r 賦值為 NaN。然后如果別處又用到 r，可能就會(huì)造成連鎖錯(cuò)誤，可能很要調(diào)試一陣才把問(wèn)題找得出來(lái)。

不過(guò)上面兩行代碼在 TypeScript 里是通不過(guò)轉(zhuǎn)譯的，它會(huì)報(bào)告一個(gè)類(lèi)型不匹配的錯(cuò)誤：

Argument of type "string" is not assignable to parameter of type "number".

這時(shí)先來(lái)看一段 JavaScript 代碼

// # javascript (es6)

class Person {
    constructor(name) {
        this._name = name;
    }

    get name() {
        return this._name;
    }
}

這段 JavaScript 代碼如果翻譯成 TypeScript 代碼，會(huì)是這樣

// # typescript

class Person {
    private _name: string;

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

    public get name(): string {
        return this._name;
    }
}

注意到 private _name: string，這句話(huà)是在聲明類(lèi)成員變量 _name。JavaScript 里是不需要聲明的，對(duì) this._name 賦值，它自然就有了，但在 TypeScript 里如果不聲明，就會(huì)報(bào)告屬性不存在的錯(cuò)誤：

Property "_name" does not exist on type "Person".

雖然寫(xiě)起來(lái)麻煩了一點(diǎn)，但是我也能理解 TypeScript 的苦衷。如果沒(méi)有這些聲明，tsc 就搞不清楚你在使用 obj.xxxx 或者 this.xxxx 的時(shí)候，這個(gè) xxxx 到底確實(shí)是你想要添加的屬性名稱(chēng)呢，還是你不小心寫(xiě)錯(cuò)了的呢？

另外要注意到的是 private 和 public 修飾符。JavaScript 中存在私有成員，為了實(shí)現(xiàn)私有，大家都想了不少辦法，比如閉包。

TypeScript 提供了 private 來(lái)修飾私有成員，protected 修改保護(hù)(子類(lèi)可用)成員，public 修飾公共成員。如果不添加修飾符，默認(rèn)作為 public，以兼容 JavaScript 的類(lèi)成員定義。不過(guò)特別需要注意的是，這些修飾符只在 TypeScript 環(huán)境(比如轉(zhuǎn)譯過(guò)程)有效，轉(zhuǎn)譯成 JavaScript 之后，仍然所有成員都是公共訪(fǎng)問(wèn)權(quán)限的。比如上例中的 TypeScript 代碼轉(zhuǎn)譯出來(lái)基本上就是之前的 JavaScript 代碼，其 _name 屬性在外部仍可訪(fǎng)問(wèn)。

當(dāng)然在 TypeScript 代碼中，如果外部訪(fǎng)問(wèn)了 _name，tsc 是會(huì)報(bào)告錯(cuò)誤的

Property "_name" is private and only accessible within class "Person".

所以應(yīng)用內(nèi)使用 private 完全沒(méi)問(wèn)題，但是如果你寫(xiě)的東西需要做為第三方庫(kù)發(fā)布，那就要想一些手段來(lái)進(jìn)行“私有化”了，其手段和 JavaScript 并沒(méi)什么不同。

從 JavaScript 語(yǔ)法改寫(xiě) TypeScript 語(yǔ)法，我們來(lái)做個(gè)簡(jiǎn)單的總結(jié)：

類(lèi)成員需要聲明。

變量、函數(shù)參數(shù)和返回值需要申明類(lèi)型。

如果所有這些東西都要聲明類(lèi)型，工作量還是滿(mǎn)大的，所以我建議：就接口部分聲明類(lèi)型。也就是說(shuō)，類(lèi)成員、函數(shù)/方法的參數(shù)和返回類(lèi)型要聲明類(lèi)型，便于編輯器進(jìn)行語(yǔ)法提示，局部使用的變量或者箭頭函數(shù)，在能明確推導(dǎo)出其類(lèi)型的時(shí)候，可以不聲明類(lèi)型。

從 JavaScript 到 TypeScript - 模塊化和構(gòu)建

從 JavaScript 到 TypeScript - 泛型

從 JavaScript 到 TypeScript - 接口

關(guān)注作者的公眾號(hào)“邊城客?！?→