系列文章目錄

引入一：Typescript基礎(chǔ)引入（基礎(chǔ)類型、元組、枚舉）
引入二：Typescript面向?qū)ο笠?#xff08;接口、類、多態(tài)、重寫、抽象類、訪問修飾符）
第一章：Typescript基礎(chǔ)知識(shí)（Typescript介紹、搭建TypeScript環(huán)境、基本數(shù)據(jù)類型）
第二章：Typescript常用類型（任意值any、數(shù)組Array、函數(shù)Function、元組Tuple、類型推論、聯(lián)合類型）
第三章：Typescript基礎(chǔ)知識(shí)（類型斷言、類型別名、字符串字面量類型、枚舉、交叉類型）

---

---

一、類型斷言

類型斷言（Type Assertion）可以用來手動(dòng)指定一個(gè)值的類型。

1.1 語法

值 as 類型

或者

<類型>值

在 tsx 語法（React 的 jsx 語法的 ts 版）中必須使用前者，即值 as 類型，因此我們更推薦使用 as 語法。

形如 的語法在 tsx 中表示的是一個(gè) ReactNode，在ts中除了表示類型斷言之外，也可能是表示一個(gè)泛型。

1.2 斷言的用途

1.2.1 將一個(gè)聯(lián)合類型斷言為其中一個(gè)類型

• 當(dāng) TypeScript 不確定一個(gè)聯(lián)合類型的變量到底是哪個(gè)類型的時(shí)候，我們只能訪問此聯(lián)合類型的所有類型中共有的屬性或方法。
• 當(dāng)我們確實(shí)需要在還不確定類型的時(shí)候就訪問其中一個(gè)類型特有的屬性或方法時(shí)，就會(huì)報(bào)錯(cuò)。

interface Cat {name: string;run(): void;
}
interface Fish {name: string;swim(): void;
}function getName(animal: Cat | Fish) {return animal.name;
}function isFish(animal: Cat | Fish) {if (typeof animal.swim === 'function') {return true;}return false;
}
// index.ts:11:23 - error TS2339: Property 'swim' does not exist on type 'Cat | Fish'.
//   Property 'swim' does not exist on type 'Cat'.

此時(shí)可以使用類型斷言，將 animal 斷言成 Fish：

interface Cat {name: string;run(): void;
}
interface Fish {name: string;swim(): void;
}function isFish(animal: Cat | Fish) {if (typeof (animal as Fish).swim === 'function') {return true;}return false;
}

1.2.2 將一個(gè)父類斷言為更加具體的子類

當(dāng)類之間有繼承關(guān)系時(shí)，類型斷言也是很常見：

class ApiError extends Error {code: number = 0;
}
class HttpError extends Error {statusCode: number = 200;
}function isApiError(error: Error) {if (typeof (error as ApiError).code === 'number') {return true;}return false;
}

上述例子中，由于父類 Error 中沒有 code 屬性，故直接獲取 error.code 會(huì)報(bào)錯(cuò)，需要使用類型斷言獲取 (error as ApiError).code。

上述例子中有一個(gè)更合適的方式來判斷是不是 ApiError，那就是使用 instanceof：

class ApiError extends Error {code: number = 0;
}
class HttpError extends Error {statusCode: number = 200;
}function isApiError(error: Error) {if (error instanceof ApiError) {return true;}return false;
}

但是當(dāng) ApiError 和 HttpError 不是一個(gè)真正的類，而是一個(gè) TypeScript 的接口（interface），接口是一個(gè)類型，不是一個(gè)真正的值，它在編譯結(jié)果中會(huì)被刪除，就無法使用 instanceof 來做運(yùn)行時(shí)判斷，此時(shí)就只能用類型斷言，通過判斷是否存在 code 屬性，來判斷傳入的參數(shù)是不是 ApiErro：

interface ApiError extends Error {code: number;
}
interface HttpError extends Error {statusCode: number;
}
/*
function isApiError(error: Error) {if (error instanceof ApiError) {return true;}return false;
}// index.ts:9:26 - error TS2693: 'ApiError' only refers to a type, but is being used as a value here.
*/function isApiError(error: Error) {if (typeof (error as ApiError).code === 'number' ) {return true;}return false;
}

1.2.3 將任何一個(gè)類型斷言為any

當(dāng)我們需要將 window 上添加一個(gè)屬性 foo，但 TypeScript 編譯時(shí)會(huì)報(bào)錯(cuò)，提示我們 window 上不存在 foo 屬性。

window.foo = 1;// index.ts:1:8 - error TS2339: Property 'foo' does not exist on type 'Window & typeof globalThis'.

此時(shí)我們可以使用 as any 臨時(shí)將 window 斷言為 any 類型：

(window as any).foo = 1;

注意： 將一個(gè)變量斷言為 any 可以說是解決 TypeScript 中類型問題的最后一個(gè)手段。它極有可能掩蓋了真正的類型錯(cuò)誤，所以如果不是非常確定，就不要使用 as any。

1.2.4 將 any 斷言為一個(gè)具體的類型

開發(fā)中，我們不可避免的需要處理 any 類型的變量，遇到 any 類型的變量時(shí)，我們可以選擇無視它，任由它滋生更多的 any。

我們也可以選擇改進(jìn)它，通過類型斷言及時(shí)的把 any 斷言為精確的類型：

function getCacheData(key: string): any {return (window as any).cache[key];
}interface Cat {name: string;run(): void;
}const tom = getCacheData('tom') as Cat;
tom.run();

1.3 非空斷言運(yùn)算符（ ! 后綴）

在上下文中當(dāng)類型檢查器無法斷定類型時(shí)，一個(gè)新的后綴表達(dá)式操作符 ! 可以用于斷言操作對(duì)象是非 null 和非 undefined 類型。 ! 在任何表達(dá)式之后寫入代表一種類型斷言，即該值不是 null or undefined ：

let mayNullOrUndefinedOrString: null | undefined | string;
mayNullOrUndefinedOrString!.toString(); // ok
mayNullOrUndefinedOrString.toString(); // error

function liveDangerously(x?: number | null) { console.log(x!.toFixed()); 
}

1.4 確定賦值斷言

允許在實(shí)例屬性和變量聲明后面放置一個(gè) ! 號(hào)，從而告訴 TypeScript 該屬性會(huì)被明確地賦值。

let x: number;
initialize();console.log(2 * x); // Variable 'x' is used before being assigned.(2454)
function initialize() {x = 10;
}

上述例子中，該異常信息是說變量 x 在賦值前被使用了，要解決該問題，我們可以使用確定賦值斷言

let x!: number;
initialize();console.log(2 * x);
function initialize() {x = 10;
}

二、類型別名

類型別名用來給一個(gè)類型起個(gè)新名字（類型別名常用于聯(lián)合類型）

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {if (typeof n === "string") {return n;} else {return n();}
}function test() {return "hello";
}
console.log(getName("zs"));//zs
console.log(getName(test));//hello

三、字面量類型

3.1 字符串字面量類型

字符串字面量類型用來約束取值只能是某幾個(gè)字符串中的一個(gè)。

type Direction = 'up' | 'down';function move(dir: Direction) {console.log(dir)
}
move('up'); // up
move('right'); // error：Argument of type '"right"' is not assignable to parameter of type 'Direction'

相較于使用 string 類型，使用字面量類型可以將函數(shù)的參數(shù)限定為更具體的類型。這不僅提升了程序的可讀性，還保證了函數(shù)的參數(shù)類型，可謂一舉兩得。

3.2 數(shù)字字面量類型及布爾字面量類型

數(shù)字字面量類型和布爾字面量類型的使用與字符串字面量類型的使用類似，我們可以使用字面量組合的聯(lián)合類型將函數(shù)的參數(shù)限定為更具體的類型:

interface Config {size: 'small' | 'big';isEnable:  true | false;margin: 0 | 2 | 4;
}let conf: Config = {size: "big",isEnable: true,margin: 1,//error: Type '1' is not assignable to type '0 | 2 | 4'
};

四、枚舉

枚舉（Enum）類型用于取值被限定在一定范圍內(nèi)的場(chǎng)景.枚舉使用 enum 關(guān)鍵字來定義。

枚舉成員會(huì)被賦值為從 0 開始遞增的數(shù)字，同時(shí)也會(huì)對(duì)枚舉值到枚舉名進(jìn)行反向映射。

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};console.log(Days);
/*
{'0': 'Mon','1': 'Tue','2': 'Wed','3': 'The','4': 'Fri','5': 'Sat',Sun: 'text',Mon: 0,Tue: 1,Wed: 2,The: 3,Fri: 4,Sat: 5
}
*/
console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // trueconsole.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true

var Days;
(function (Days) {Days[Days["Sun"] = 0] = "Sun";Days[Days["Mon"] = 1] = "Mon";Days[Days["Tue"] = 2] = "Tue";Days[Days["Wed"] = 3] = "Wed";Days[Days["The"] = 4] = "The";Days[Days["Fri"] = 5] = "Fri";Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));
console.log(Days);
console.log(Days.Sun);
console.log(Days["Mon"]);
console.log(Days["The"]);
console.log(Days[0]);
console.log(Days[1]);
console.log(Days[4]);

4.1 手動(dòng)賦值

我們也可以給枚舉項(xiàng)手動(dòng)賦值，未手動(dòng)賦值的枚舉項(xiàng)會(huì)接著上一個(gè)枚舉項(xiàng)遞增。如果未手動(dòng)賦值的枚舉項(xiàng)與手動(dòng)賦值的重復(fù)了，TypeScript 是不會(huì)察覺到這一點(diǎn)的：

enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};console.log(Days["Sun"] === 7); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

上面的例子中，遞增到 3 的時(shí)候與前面的 Sun 的取值重復(fù)了，但是 TypeScript 并沒有報(bào)錯(cuò)，導(dǎo)致 Days[3] 的值先是 “Sun”，而后又被 “Wed” 覆蓋了。編譯的結(jié)果是：

var Days;
(function (Days) {Days[Days["Sun"] = 3] = "Sun";Days[Days["Mon"] = 1] = "Mon";Days[Days["Tue"] = 2] = "Tue";Days[Days["Wed"] = 3] = "Wed";Days[Days["Thu"] = 4] = "Thu";Days[Days["Fri"] = 5] = "Fri";Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));

所以使用的時(shí)候需要注意，最好不要出現(xiàn)這種覆蓋的情況。
手動(dòng)賦值的枚舉項(xiàng)可以不是數(shù)字，可以是其他類型：

enum Color {Red,Green,Blue = "blur",
}
console.log(Color); //{ '0': 'Red', '1': 'Green', Red: 0, Green: 1, Blue: 'blur' }

五、交叉類型

交叉類型是將多個(gè)類型合并為一個(gè)類型。它包含了所需的所有類型的特性，使用&定義交叉類型。

{type Useless = string & number;
}

如果我們僅僅把原始類型、字面量類型、函數(shù)類型等原子類型合并成交叉類型，是沒有任何意義的。在上述的代碼中，類型別名 Useless 的類型就是個(gè) never。

交叉類型真正的用處是將多個(gè)接口類型合并成一個(gè)類型，從而實(shí)現(xiàn)等同接口繼承的效果，也就是所謂的合并接口類型，如下代碼所示：

type IntersectionType = { id: number; name: string; } & { age: number };
const mixed: IntersectionType = {id: 1,name: 'name',age: 18}

在上述示例中，我們通過交叉類型，使得 IntersectionType 同時(shí)擁有了 id、name、age 所有屬性，這里我們可以試著將合并接口類型理解為求并集。