摘要：泛型通過(guò)在函數(shù)接口類變量名后使用定義。抽象類可以包括具體實(shí)現(xiàn)一個(gè)類只能繼承一個(gè)類，但是可以實(shí)現(xiàn)多個(gè)接口。該開(kāi)源項(xiàng)目目前由社區(qū)進(jìn)行維護(hù)。通常通過(guò)中的字段，或者聲明文件進(jìn)行聲明。

TypeScript 是 Javascript 的一個(gè)超集，提高了代碼的可讀性和可維護(hù)性。Typescript 官網(wǎng)提供的文檔已經(jīng)相當(dāng)完善，但完整地看一遍需要一定的時(shí)間，本文試將 TypeScript 中要點(diǎn)提出，縮略為一文，用于瀏覽要點(diǎn)、快速?gòu)?fù)習(xí)。

boolean/number/string/null/undefined

其中 null/undefined 是 TypeScript 中任何類型的子類型。

void/any/enum/never

void 指空值，若用于變量，則該變量只能賦值為 null/undefined；若用于函數(shù)，則該函數(shù)返回值為 空/null/undefined。

any 指任意值。TypeScript 中變量賦值后類型是無(wú)法改變的，但 any 類型的變量可以改變?yōu)槿我庵怠＃暶髯兞壳覠o(wú)法類型推論時(shí)默認(rèn)為 any 類型）

enum 指枚舉類型，取值可以枚舉出來(lái)。

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

never 指不存在的值的類型，例如異常，函數(shù)無(wú)限循環(huán)無(wú)法返回等。

TypeScript 中數(shù)組類型有多種定義方式，羅列如下：

1.類型 + 方括號(hào)

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

2.數(shù)組泛型 Array<元素類型>

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

3.元組 Tuple

表示一個(gè)已知元素?cái)?shù)量和類型的數(shù)組

let x: [string, number] = ["1", 2]

4.接口定義類型

interface NumberArray {
  [index: number]: number;
}
let x: NumberArray = [1, 1, 2, 3, 5];

TypeScript 中函數(shù)類型有多種定義方式，羅列如下：

1.函數(shù)聲明中類型定義

function add(x: number, y: number): number {
  return x + y;
}

2.函數(shù)表達(dá)式中類型定義

let myAdd = function(x: number, y: number): number {
  return x + y;
}

3.箭頭函數(shù)中類型定義

let myAdd = (x: number, y: number): number => {
  return x + y;
}

4.接口定義類型

interface Add {
  (x: number, y: number): number;
}
let myAdd: Add = function(num1, num2) {
  return num1 + num2;
}

TypeScript 中對(duì)象類型有多種定義方式，羅列如下：

1.object

let obj: object = {test: 1};

2.接口定義類型

interface SquareConfig {
  color: string;
  width: number;
}
let newSquare: SquareConfig = {
  color: "white",
  width: 100
};

聯(lián)合類型表示值為多種類型中的一種，用 | 進(jìn)行類型聯(lián)合

泛型指在定義函數(shù)、接口、類時(shí)，不預(yù)先指定類型，在使用時(shí)再指定。泛型通過(guò)在函數(shù)、接口、類變量名后使用 <> 定義。（類型斷言中 <> 位于變量名前）

function identity(arg: T): T {
    return arg;
}

identity("myString")

在沒(méi)有指定類型時(shí)，Typescript 會(huì)根據(jù)類型推論推斷出類型。

// 推論類型為 number
let x = 1;

// 推論類型為 any
let y;

類型斷言指對(duì)變量指定一個(gè)比現(xiàn)在類型更明確的類型。

類型斷言有兩種形式。

1."尖括號(hào)"語(yǔ)法：

// 聲明 someValue
let someValue: any = "this is a string";

// 對(duì) someValue 類型斷言，類型為 string，比原先 any 類型更明確
let strLength: number = (someValue).length;

2."as" 語(yǔ)法（在 tsx 中只能使用 as 語(yǔ)法，因?yàn)?jsx 中 <> 會(huì)和"尖括號(hào)"語(yǔ)法混淆）

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

類型別名不會(huì)新建類型，是通過(guò)新建名字來(lái)引用已有類型。通過(guò) type 進(jìn)行別名定義。

type Name = string;
let x: Name = "1";

類的概念是 ES6 中提出的，類的本質(zhì)是構(gòu)造函數(shù)的語(yǔ)法糖，通過(guò) class 來(lái)創(chuàng)建。

TypeScript 中提供了 public、private 和 protected 三種修飾符，分別代表屬性或方法是共有的、私有的、受保護(hù)的。

TypeScript 中 static 修飾符修飾屬性或方法，代表屬性或方法是靜態(tài)的，即無(wú)需實(shí)例化，可以直接通過(guò)類調(diào)用。

TypeScript 中 readonly 修飾符修飾屬性，代表屬性只讀，即初始化之后不可修改。

抽象類指對(duì)類或類中部分方法進(jìn)行抽象，作為其他類繼承的基類，不能直接實(shí)例化。派生類必須實(shí)現(xiàn)抽象類中的抽象方法。

通過(guò) abstract 關(guān)鍵字定義抽象類和抽象類內(nèi)部定義的抽象方法，extends 來(lái)繼承類。

abstract class Animal {
  // 必須在派生類中實(shí)現(xiàn)
  abstract makeSound(): void;
  // 無(wú)須在派生類中實(shí)現(xiàn)
  move(): void {
    console.log("roaming the earch...");
  }
}

class Dog extends Animal {
  makeSound (): void {
    console.log("barking");
  }
}

接口和抽象類有些類似，接口是對(duì)屬性和方法的抽象，不能直接實(shí)例化。接口和抽象類的區(qū)別如下：

接口是 100% 的抽象，不能含有具體的實(shí)現(xiàn)。抽象類可以包括具體實(shí)現(xiàn)

一個(gè)類只能繼承一個(gè)類，但是可以實(shí)現(xiàn)多個(gè)接口。接口可以繼承接口、類。

接口通過(guò) interface 定義，implements 實(shí)現(xiàn)。

interface ClockInterface {
  alert(): void;
}

class Clock implements ClockInterface {
  alert() {
    console.log("Clock alert");
  }
}

TypeScript 根據(jù) JavaScript 提供了相關(guān)的內(nèi)置對(duì)象，如 Date、Document、HTMLElement、Event、NodeList 等。具體可參考定義文件。

以 npm 包為例，將第三方包安裝到 TypeScript 項(xiàng)目時(shí)，需要聲明文件，聲明該第三方包中導(dǎo)出內(nèi)容的相關(guān)類型，這樣 TypeScript 才能進(jìn)行編譯檢查。聲明文件以 .d.ts 結(jié)尾的文件，有以下3個(gè)來(lái)源：

1.@types
TypeScript 2.0 默認(rèn)查看 ./node_modules/@types 文件夾，獲取模塊的類型定義。例如可以通過(guò)安裝 npm install --save-dev @types/node 獲取 node 類型相關(guān)聲明。該開(kāi)源項(xiàng)目 DefinitelyTyped 目前由社區(qū)進(jìn)行維護(hù)。

2.第三方包已有聲明文件
第三方包已有聲明文件，則不需要再額外安裝包，可以直接使用。通常通過(guò) package.json 中的 types 字段，或者 index.d.ts 聲明文件進(jìn)行聲明。

3.書(shū)寫(xiě)聲明文件
當(dāng)前面兩種方法都無(wú)效時(shí)，可以在項(xiàng)目中書(shū)寫(xiě)聲明文件，如創(chuàng)建 types 目錄，用來(lái)管理聲明文件。聲明文件寫(xiě)法可以參考 DefinitelyTyped 中相關(guān)示例，如下為其中一個(gè)示例：

// 聲明 createABigTriangle 方法
declare function createABigTriangle(gl: WebGLRenderingContext): void;

// 第三方庫(kù)是 commonjs 規(guī)范的，導(dǎo)出聲明使用 export= 這種語(yǔ)法
// 第三方庫(kù)是 ES6 規(guī)范的，導(dǎo)出聲明使用 export default 和 export 這種語(yǔ)法
export = createABigTriangle;

本文首發(fā)于個(gè)人博客：https://www.aquatalking.com/b...

（完）