如果你認(rèn)為這段代碼非常神秘 —— 那么我同意你的意見。但是（我希望證明）這些符號(hào)還是相對(duì)容易學(xué)習(xí)的。一旦你能理解它們，就能馬上全面、精確的理解這種代碼，從而無(wú)需再去閱讀冗長(zhǎng)的英文說(shuō)明。

TypeScript 有一個(gè)在線運(yùn)行環(huán)境。為了得到最全面的信息，你應(yīng)該在 “Options” 菜單中打開所有選項(xiàng)開關(guān)。這相當(dāng)于在 --strict 模式下運(yùn)行TypeScript編譯器。

我在用 TypeScript 時(shí)總是喜歡打開 --strict 開關(guān)設(shè)置。沒有它，程序可能會(huì)稍微好寫一點(diǎn)，但是你也失去了靜態(tài)類型檢查的好處。目前此設(shè)置能夠開啟以下子設(shè)置：

--noImplicitAny：如果 TypeScript 無(wú)法推斷類型，則必須指定它。這主要用于函數(shù)和方法的參數(shù)：使用此設(shè)置，你必須對(duì)它們進(jìn)行注釋。

--noImplicitThis：如果 this 的類型不清楚則會(huì)給出提示信息。

--alwaysStrict：盡可能使用 JavaScript 的嚴(yán)格模式。

--strictNullChecks：null 不屬于任何類型（除了它自己的類型，null），如果它是可接受的值，則必須明確指定。

--strictFunctionTypes：對(duì)函數(shù)類型更加嚴(yán)格的檢查。

--strictPropertyInitialization：如果屬性的值不能是 undefined ，那么它必須在構(gòu)造函數(shù)中進(jìn)行初始化。

更多信息：TypeScript 手冊(cè)中的“編譯器選項(xiàng)”一章。

在本文中，我們把類型看作是一組值的集合。 JavaScript 語(yǔ)言（不是TypeScript！）有7種類型：

Undefined：具有唯一元素 undefined 的集合。

Null：具有唯一元素“null”的集合。

Boolean：具有兩個(gè)元素 false 和 true 的集合。

Number：所有數(shù)字的集合。

String：所有字符串的集合。

Symbol：所有符號(hào)的集合。

Object：所有對(duì)象的集合（包括函數(shù)和數(shù)組）。

所有這些類型都是 dynamic：可以用在運(yùn)行時(shí)。

TypeScript 為 JavaScript 帶來(lái)了額外的層：靜態(tài)類型。這些僅在編譯或類型檢查源代碼時(shí)存在。每個(gè)存儲(chǔ)位置（變量或?qū)傩裕┒加幸粋€(gè)靜態(tài)類型，用于預(yù)測(cè)其動(dòng)態(tài)值。類型檢查可確保這些預(yù)測(cè)能夠?qū)崿F(xiàn)。還有很多可以進(jìn)行 靜態(tài) 檢查（不運(yùn)行代碼）的東西。例如，如果函數(shù) f(x) 的參數(shù) x 是靜態(tài)類型 number，則函數(shù)調(diào)用 f("abc") 是非法的，因?yàn)閰?shù) "abc" 是錯(cuò)誤的靜態(tài)類型。

變量名后的冒號(hào)開始 類型注釋：冒號(hào)后的類型簽名用來(lái)描述變量可以接受的值。例如以代碼告訴 TypeScript 變量 “x” 只能存儲(chǔ)數(shù)字：

let x: number;

你可能想知道用 undefined 去初始化 x 是不是違反了靜態(tài)類型。 TypeScript 不會(huì)允許這種情況出現(xiàn)，因?yàn)樵跒樗x值之前不允許操作 x。

即使在 TypeScript 中每個(gè)存儲(chǔ)位置都有靜態(tài)類型，你也不必總是明確的去指定它。 TypeScript 通?？梢詫?duì)它的類型進(jìn)行推斷。例如如果你寫下這行代碼：

let x = 123;

然后 TypeScript 會(huì)推斷出 x 的靜態(tài)類型是 number。

在類型注釋的冒號(hào)后面出現(xiàn)的是所謂的類型表達(dá)式。這些范圍從簡(jiǎn)單到復(fù)雜，并按如下方式創(chuàng)建。

基本類型是有效的類型表達(dá)式：

對(duì)應(yīng) JavaScript 動(dòng)態(tài)類型的靜態(tài)類型：

- `undefined`, `null`
- `boolean`, `number`, `string`
- `symbol`
- `object`

注意：值 undefined 與類型 undefined（取決于所在的位置）

TypeScript 的特定類型：

Array（從技術(shù)上講不是 JS 中的類型）

any（所有值的類型）

等等其他類型

請(qǐng)注意，“undefined作為值“ 和 ”undefined作為類型” 都寫做 undefined。根據(jù)你使用它的位置，被解釋為值或類型。 null 也是如此。

你可以通過類型運(yùn)算符對(duì)基本類型進(jìn)行組合的方式來(lái)創(chuàng)建更多的類型表達(dá)式，這有點(diǎn)像使用運(yùn)算符 union（∪）和intersection（∩）去合并集合。

下面介紹 TypeScript 提供的一些類型運(yùn)算符。

數(shù)組在 JavaScript 中扮演以下兩個(gè)角色（有時(shí)是兩者的混合）：

列表：所有元素都具有相同的類型。數(shù)組的長(zhǎng)度各不相同。

元組：數(shù)組的長(zhǎng)度是固定的。元素不一定具有相同的類型。

數(shù)組 arr 被用作列表有兩種方法表示 ，其元素都是數(shù)字：

let arr: number[] = [];
let arr: Array = [];

通常如果存在賦值的話，TypeScript 就可以推斷變量的類型。在這種情況下，實(shí)際上你必須幫它解決類型問題，因?yàn)樵谑褂每諗?shù)組時(shí)，它無(wú)法確定元素的類型。

稍后我們將回到尖括號(hào)表示法（Array）。

如果你想在數(shù)組中存儲(chǔ)二維坐標(biāo)點(diǎn)，那么就可以把這個(gè)數(shù)組當(dāng)作元組去用?？瓷先ナ沁@個(gè)樣子：

let point: [number, number] = [7, 5];

在這種情況下，你不需要類型注釋。

另外一個(gè)例子是 Object.entries(obj) 的返回值：一個(gè)帶有一個(gè) [key，value] 對(duì)的數(shù)組，它用于描述 obj 的每個(gè)屬性。

> Object.entries({a:1, b:2})
[ [ "a", 1 ], [ "b", 2 ] ]

Object.entries() 的返回值類型是：

Array<[string, any]>

以下是函數(shù)類型的例子：

(num: number) => string

這個(gè)類型是一個(gè)函數(shù)，它接受一個(gè)數(shù)字類型參數(shù)并且返回值為字符串。在類型注釋中使用這種類型（String 在這里是個(gè)函數(shù)）的例子：

const func: (num: number) => string = String;

同樣，我們一般不會(huì)在這里使用類型注釋，因?yàn)?TypeScript 知道 String 的類型，因此可以推斷出 func 的類型。

以下代碼是一個(gè)更實(shí)際的例子：

function stringify123(callback: (num: number) => string) {
  return callback(123);
}

由于我們使用了函數(shù)類型來(lái)描述 stringify123() 的參數(shù) callback，所以TypeScript 拒絕以下函數(shù)調(diào)用。

f(Number);

但它接受以下函數(shù)調(diào)用：

f(String);

對(duì)函數(shù)的所有參數(shù)進(jìn)行注釋是一個(gè)很好的做法。你還可以指定返回值類型（不過 TypeScript 非常擅長(zhǎng)去推斷它）：

function stringify123(callback: (num: number) => string): string {
  const num = 123;
  return callback(num);
}

void 是函數(shù)的特殊返回值類型：它告訴 TypeScript 函數(shù)總是返回 undefined（顯式或隱式）：

function f1(): void { return undefined } // OK
function f2(): void { } // OK
function f3(): void { return "abc" } // error

標(biāo)識(shí)符后面的問號(hào)表示該參數(shù)是可選的。例如：

function stringify123(callback?: (num: number) => string) {
  const num = 123;
  if (callback) {
    return callback(num); // (A)
  }
  return String(num);
}

在 --strict 模式下運(yùn)行 TypeScript 時(shí)，如果事先檢查時(shí)發(fā)現(xiàn) callback 沒有被省略，它只允許你在 A 行進(jìn)行函數(shù)調(diào)用。

TypeScript支持 ES6 參數(shù)默認(rèn)值：

function createPoint(x=0, y=0) {
  return [x, y];
}

默認(rèn)值可以使參數(shù)可選。通?？梢允÷灶愋妥⑨?，因?yàn)?TypeScript 可以推斷類型。例如它可以推斷出 x 和 y 都是 number 類型。

如果要添加類型注釋，應(yīng)該這樣寫：

function createPoint(x:number = 0, y:number = 0) {
  return [x, y];
}

你還可以用 ES6 rest operator 進(jìn)行 TypeScript 參數(shù)定義。相應(yīng)參數(shù)的類型必須是數(shù)組：

function joinNumbers(...nums: number[]): string {
    return nums.join("-");
}
joinNumbers(1, 2, 3); // "1-2-3"

在JavaScript中，有時(shí)候變量會(huì)是有幾種類型之中的一種。要描述這些變量，可以使用 union types。例如，在下面的代碼中，x 是 null 類型或 number 類型：

let x = null;
x = 123;

x 的類型可以描述為 null | number：

let x: null|number = null;
x = 123;

類型表達(dá)式 s | t 的結(jié)果是類型 s 和 t 在集合理論意義上的聯(lián)合（正如我們之前看到的那樣，兩個(gè)集合）。

下面讓我們重寫函數(shù) stringify123()：這次我們不希望參數(shù) callback 是可選的。應(yīng)該總是調(diào)用它。如果調(diào)用者不想傳入一個(gè)函數(shù)，則必須顯式傳遞 null。實(shí)現(xiàn)如下。

function stringify123(
  callback: null | ((num: number) => string)) {
  const num = 123;
  if (callback) { // (A)
    return callback(123); // (B)
  }
  return String(num);
}

請(qǐng)注意，在行 B 進(jìn)行函數(shù)調(diào)用之前，我們必須再次檢查 callback 是否真的是一個(gè)函數(shù)（行A）。如果沒有檢查，TypeScript 將會(huì)報(bào)告錯(cuò)誤。

類型為 T 的可選參數(shù)和類型為 undefined|T 的參數(shù)非常相似。 （另外對(duì)于可選屬性也是如此。）

主要區(qū)別在于你可以省略可選參數(shù)：

function f1(x?: number) { }
f1(); // OK
f1(undefined); // OK
f1(123); // OK

But you can’t omit parameters of type
但是你不能省略 undefined|T 類型的參數(shù)：

function f2(x: undefined | number) { }
f2(); // error
f2(undefined); // OK
f2(123); // OK

在許多編程語(yǔ)言中，null 是所有類型的一部分。例如只要 Java 中的參數(shù)類型為 String，就可以傳遞 null 而Java 不會(huì)報(bào)錯(cuò)。

相反，在TypeScript中，undefined 和 null 由多帶帶的不相交類型處理。如果你想使它們生效，必須要有一個(gè)類型聯(lián)合，如 undefined|string 和 null|string。

與Arrays類似，對(duì)象在 JavaScript 中扮演兩個(gè)角色（偶爾混合和/或更加動(dòng)態(tài)）：

記錄：在開發(fā)時(shí)已知的固定數(shù)量的屬性。每個(gè)屬性可以有不同的類型。

字典：在開發(fā)時(shí)名稱未知的任意數(shù)量的屬性。所有屬性鍵（字符串和/或符號(hào)）都具有相同的類型，屬性值也是如此。

我們將在本文章中忽略 object-as-dictionaries。順便說(shuō)一句，無(wú)論如何，map 通常是比字典的更好選擇。

接口描述 objects-as-records 。例如：

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

TypeScript 類型系統(tǒng)的一大優(yōu)勢(shì)在于它的結(jié)構(gòu)上，而不是在命名上。也就是說(shuō)，接口 Point 能夠匹配適當(dāng)結(jié)構(gòu)的所有對(duì)象：

function pointToString(p: Point) {
  return `(${p.x}, ${p.y})`;
}
pointToString({x: 5, y: 7}); // "(5, 7)"

相比之下，Java 的標(biāo)稱類型系統(tǒng)需要類來(lái)實(shí)現(xiàn)接口。

如果可以省略屬性，則在其名稱后面加上一個(gè)問號(hào)：

interface Person {
  name: string;
  company?: string;
}

接口內(nèi)還可以包含方法：

interface Point {
  x: number;
  y: number;
  distance(other: Point): number;
}

使用靜態(tài)類型，可以有兩個(gè)級(jí)別：

值存在于對(duì)象級(jí)別。

類型存在于元級(jí)別。

同理：

普通變量定義在對(duì)象級(jí)別之上。

類型變量存在于元級(jí)別之上。它們是值為類型的變量。

普通變量通過 const，let 等引入。類型變量通過尖括號(hào)（ <> ）引入。例如以下代碼包含類型變量 T，通過 引入。

interface Stack {
  push(x: T): void;
  pop(): T;
}

你可以看到類型參數(shù) T 在 Stack 的主體內(nèi)出現(xiàn)兩次。因此，該接口可以直觀地理解如下：

Stack 是一堆值，它們都具有給定的類型 T。每當(dāng)你提到 Stack 時(shí)，必須寫 T。接下來(lái)我們會(huì)看到究竟該怎么用。

方法 .push() 接受類型為 T 的值。

方法 .pop() 返回類型為 T 的值。

如果使用 Stack，則必須為 T 指定一個(gè)類型。以下代碼顯示了一個(gè)虛擬棧，其唯一目的是匹配接口。

const dummyStack: Stack = {
  push(x: number) {},
  pop() { return 123 },
};

map 在 TypeScript 中的定義。例如：

const myMap: Map = new Map([
  [false, "no"],
  [true, "yes"],
]);

函數(shù)（和方法）也可以引入類型變量：

function id(x: T): T {
  return x;
}

你可以按以下方式使用此功能。

id(123);

由于類型推斷，還可以省略類型參數(shù)：

id(123);

函數(shù)可以將其她的類型參數(shù)傳給接口、類等：

function fillArray(len: number, elem: T) {
  return new Array(len).fill(elem);
}

類型變量 T 在這段代碼中出現(xiàn)三次：

fillArray：引入類型變量

elem:T：使用類型變量，從參數(shù)中選擇它。

Array：將 T 傳遞給 Array 的構(gòu)造函數(shù)。

這意味著：我們不必顯式指定Array的類型 T —— 它是從參數(shù) elem中推斷出來(lái)的：

const arr = fillArray(3, "*");
  // Inferred type: string[]

讓我們用前面學(xué)到的知識(shí)來(lái)理解最開始看到的那段代碼：

interface Array {
  concat(...items: Array): T[];
  reduce(
    callback: (state: U, element: T, index: number, array: T[]) => U,
    firstState?: U): U;
  ···
}