一篇文章帶你過一遍 TypeScript

TypeScript 是 Javascript 的一個超集，提升了代碼的可讀性和可維護性。Typescript 官網提供的 文檔已經至關完善，但完整地看一遍須要必定的時間，本文試將 TypeScript 中要點提出，縮略爲一文，用於瀏覽要點、快速複習。

1. 類型

1.1 原始類型定義

boolean/number/string/null/undefined

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

1.2 空值、任意值、枚舉、Never

void/any/enum/never

void 指空值，若用於變量，則該變量只能賦值爲 null/undefined；若用於函數，則該函數返回值爲 空/null/undefined。

any 指任意值。TypeScript 中變量賦值後類型是沒法改變的，但 any 類型的變量能夠改變爲任意值。（聲明變量且沒法類型推論時默認爲 any 類型）

enum 指枚舉類型，取值能夠枚舉出來。

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

never 指不存在的值的類型，例如異常，函數無限循環沒法返回等。

1.3 數組類型定義

TypeScript 中數組類型有多種定義方式，羅列以下：

1.類型 + 方括號

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

2.數組泛型 Array<元素類型>

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

3.元組 Tuple

表示一個已知元素數量和類型的數組

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

4.接口定義類型

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

1.4 函數類型

TypeScript 中函數類型有多種定義方式，羅列以下：

1.函數聲明中類型定義

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

2.函數表達式中類型定義

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

3.箭頭函數中類型定義

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;
}

1.5 對象類型

TypeScript 中對象類型有多種定義方式，羅列以下：

1.object

let obj: object = {test: 1};

2.接口定義類型

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

1.6 聯合類型

聯合類型表示值爲多種類型中的一種，用 | 進行類型聯合

1.7 泛型

泛型指在定義函數、接口、類時，不預先指定類型，在使用時再指定。泛型經過在函數、接口、類變量名後使用 <> 定義。（類型斷言中 <> 位於變量名前）

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

identity<string>('myString')

2. 類型操做

2.1 類型推論

在沒有指定類型時，Typescript 會根據類型推論推斷出類型。

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

// 推論類型爲 any
let y;

2.2 類型斷言

類型斷言指對變量指定一個比如今類型更明確的類型。

類型斷言有兩種形式。

1."尖括號"語法：

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

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

2."as" 語法（在 tsx 中只能使用 as 語法，由於 jsx 中 <> 會和"尖括號"語法混淆）

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

2.3 類型別名

類型別名不會新建類型，是經過新建名字來引用已有類型。經過 type 進行別名定義。

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

3. 類和接口

3.1 類

類的概念是 ES6 中提出的，類的本質是構造函數的語法糖，經過 class 來建立。

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

TypeScript 中 static 修飾符修飾屬性或方法，表明屬性或方法是靜態的，即無需實例化，能夠直接經過類調用。

TypeScript 中 readonly 修飾符修飾屬性，表明屬性只讀，即初始化以後不可修改。

3.2 抽象類

抽象類指對類或類中部分方法進行抽象，做爲其餘類繼承的基類，不能直接實例化。派生類必須實現抽象類中的抽象方法。

經過 abstract 關鍵字定義抽象類和抽象類內部定義的抽象方法，extends 來繼承類。

abstract class Animal {
  // 必須在派生類中實現
  abstract makeSound(): void;
  // 無須在派生類中實現
  move(): void {
    console.log('roaming the earch...');
  }
}

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

3.3 接口

接口和抽象類有些相似，接口是對屬性和方法的抽象，不能直接實例化。接口和抽象類的區別以下：

1. 接口是 100% 的抽象，不能含有具體的實現。抽象類能夠包括具體實現
2. 一個類只能繼承一個類，可是能夠實現多個接口。接口能夠繼承接口、類。

接口經過 interface 定義，implements 實現。

interface ClockInterface {
  alert(): void;
}

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

4. 其餘

4.1 內置對象

TypeScript 根據 JavaScript 提供了相關的內置對象，如 Date、Document、HTMLElement、Event、NodeList 等。具體可參考定義文件。

4.2 聲明文件

以 npm 包爲例，將第三方包安裝到 TypeScript 項目時，須要聲明文件，聲明該第三方包中導出內容的相關類型，這樣 TypeScript 才能進行編譯檢查。聲明文件以 .d.ts 結尾的文件，有如下3個來源：

1.@types
TypeScript 2.0 默認查看 ./node_modules/@types 文件夾，獲取模塊的類型定義。例如能夠經過安裝 npm install --save-dev @types/node 獲取 node 類型相關聲明。該開源項目 DefinitelyTyped 目前由社區進行維護。

2.第三方包已有聲明文件
第三方包已有聲明文件，則不須要再額外安裝包，能夠直接使用。一般經過 package.json 中的 types 字段，或者 index.d.ts 聲明文件進行聲明。

3.書寫聲明文件
當前面兩種方法都無效時，能夠在項目中書寫聲明文件，如建立 types 目錄，用來管理聲明文件。聲明文件寫法能夠參考 DefinitelyTyped 中相關示例，以下爲其中一個示例：

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

// 第三方庫是 commonjs 規範的，導出聲明使用 export= 這種語法
// 第三方庫是 ES6 規範的，導出聲明使用 export default 和 export 這種語法
export = createABigTriangle;

本文首發於我的博客：https://www.aquatalking.com/b...

（完）