欢乐颂小说,懒人听书,斗破苍穹续集

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案

你需要知道的TypeScript高級類型

大家好，我是 CUGGZ。

在開發(fā)過程中，為了應對多變的復雜場景，我們需要了解一下 TypeScript 的高級類型。所謂高級類型，是 TypeScript 為了保證語言的靈活性，所使用的一些語言特性。這些特性有助于我們應對復雜多變的開發(fā)場景。

1、字面量類型

在 TypeScript 中，字面量不僅可以表示值，還可以表示類型，即字面量類型。TypeScript 支持以下字面量類型：

字符串字面量類型。
數(shù)字字面量類型。
布爾字面量類型。
模板字面量類型。

（1）字符串字面量類型

字符串字面量類型其實就是字符串常量，與字符串類型不同的是它是具體的值：

type Name = "TS";
const name1: Name = "test"; //  不能將類型“"test"”分配給類型“"TS"”。ts(2322)
const name2: Name = "TS";

實際上，定義單個字面量類型在實際應用中并沒有太大的用處。它的應用場景就是將多個字面量類型組合成一個聯(lián)合類型，用來描述擁有明確成員的實用的集合：

type Direction = "north" | "east" | "south" | "west";
function getDirectionFirstLetter(direction: Direction) {
  return direction.substr(0, 1);
}
getDirectionFirstLetter("test"); //  類型“"test"”的參數(shù)不能賦給類型“Direction”的參數(shù)。
getDirectionFirstLetter("east");

這個例子中使用四個字符串字面量類型組成了一個聯(lián)合類型。這樣在調用函數(shù)時，編譯器就會檢查傳入的參數(shù)是否是指定的字面量類型集合中的成員。通過這種方式，可以將函數(shù)的參數(shù)限定為更具體的類型。這不僅提升了代碼的可讀性，還保證了函數(shù)的參數(shù)類型。

除此之外，使用字面量類型還可以為我們提供智能的代碼提示：

（2）數(shù)字字面量類型

數(shù)字字面量類型就是指定類型為具體的數(shù)值：

type Age = 18;
interface Info {
  name: string;
  age: Age;
}
const info: Info = {
  name: "TS",
  age: 28 //  不能將類型“28”分配給類型“18”
};

可以將數(shù)字字面量類型分配給一個數(shù)字，但反之是不行的：

let val1: 10|11|12|13|14|15 = 10;
let val2 = 10;
val2 = val1;
val1 = val2; //  不能將類型“number”分配給類型“10 | 11 | 12 | 13 | 14 | 15”。

（3）布爾字面量類型

布爾字面量類型就是指定類型為具體的布爾值（true或false）：

let success: true;
let fail: false;
let value: true | false;
success = true;
success = false;  //  不能將類型“false”分配給類型“true”

由于布爾字面量類型只有true或false?兩種，所以下面 value 變量的類型是一樣的：

let value: true | false;
let value: boolean;

（4）模板字面量類型

在 TypeScript 4.1 版本中新增了模板字面量類型。什么是模板字面量類型呢？它一字符串字面量類型為基礎，可以通過聯(lián)合類型擴展成多個字符串。它與 JavaScript 的模板字符串語法相同，但是只能用在類型定義中使用。

基本語法

當使用模板字面量類型時，它會替換模板中的變量，返回一個新的字符串字面量。

type attrs = "Phone" | "Name";
type target = `get${attrs}`;
// type target = "getPhone" | "getName";

可以看到，模板字面量類型的語法簡單，并且易讀且功能強大。

假如有一個CSS內邊距規(guī)則的類型，定義如下：

type CssPadding = 'padding-left' | 'padding-right' | 'padding-top' | 'padding-bottom';

上面的類型是沒有問題的，但是有點冗長。margin? 和 padding 的規(guī)則相同，但是這樣寫我們無法重用任何內容，最終就會得到很多重復的代碼。

下面來使用模版字面量類型來解決上面的問題：

type Direction = 'left' | 'right' | 'top' | 'bottom';
type CssPadding = `padding-${Direction}`
// type CssPadding = 'padding-left' | 'padding-right' | 'padding-top' | 'padding-bottom'

這樣代碼就變得更加簡潔。如果想創(chuàng)建margin?類型，就可以重用Direction類型：

type CssMargin = `margin-${Direction}`

如果在 JavaScript 中定義了變量，就可以使用 typeof 運算符來提取它：

const direction = 'left';
type CssPadding = `padding-${typeof direction}`;
// type CssPadding = "padding-left"

變量限制

模版字面量中的變量可以是任意的類型嗎？可以使用對象或自定義類型嗎？來看下面的例子：

type CustomObject = {
  foo: string
}
type target = `get${CustomObject}`
//  不能將類型“CustomObject”分配給類型“string | number | bigint | boolean | null | undefined”。
type complexUnion = string | number | bigint | boolean | null | undefined;
type target2 = `get${complexUnion}`  //

可以看到，當在模板字面量類型中使用對象類型時，就報錯了，因為編譯器不知道如何將它序列化為字符串。實際上，模板字面量類型中的變量只允許是string、number、bigint、boolean、null、undefined或這些類型的聯(lián)合類型。

實用程序

Typescript 提供了一組實用程序來幫助處理字符串。它們不是模板字面量類型獨有的，但與它們結合使用時很方便。完整列表如下：

Uppercase：將類型轉換為大寫。
Lowercase：將類型轉換為小寫。
Capitalize：將類型第一個字母大寫。
Uncapitalize：將類型第一個字母小寫。

這些實用程序只接受一個字符串字面量類型作為參數(shù)，否則就會在編譯時拋出錯誤：

type nameProperty = Uncapitalize<'Name'>;
// type nameProperty = 'name';
type upercaseDigit = Uppercase<10>;
//  類型“number”不滿足約束“string”。
type property = 'phone';
type UppercaseProperty = Uppercase;
// type UppercaseProperty = 'Property';

下面來看一個更復雜的場景，將字符串字面量類型與這些實用程序結合使用。將兩種類型進行組合，并將第二種類型的首字母大小，這樣組合之后的類型符合駝峰命名法：

type actions = 'add' | 'remove';
type property = 'name' | 'phone';
type result = `${actions}${Capitalize}`;
// type result = addName | addPhone | removeName | removePhone

類型推斷

在上面的例子中，我們使用使用模版字面量類型將現(xiàn)有的類型組合成新類型。下面來看看如何使用模板字面量類型從組合的類型中提取類型。這里就需要用到infer關鍵字，它允許我們從條件類型中的另一個類型推斷出一個類型。

下面來嘗試提取字符串字面量 marginRight 的根節(jié)點：

type Direction = 'left' | 'right' | 'top' | 'bottom';
type InferRoot = T extends `${infer K}${Capitalize}` ? K : T;
type Result1 = InferRoot<'marginRight'>;
// type Result1 = 'margin';
type Result2 = InferRoot<'paddingLeft'>;
// type Result2 = 'padding';

可以看到，模版字面量還是很強大的，不僅可以創(chuàng)建類型，還可以解構它們。

作為判別式

在TypeScript 4.5 版本中，支持了將模板字面量串類型作為判別式，用于類型推導。來看下面的例子：

interface Message {
    type: string;
    url: string;
}
interface SuccessMessage extends Message {
    type: `${string}Success`;
    body: string;
}
interface ErrorMessage extends Message {
    type: `${string}Error`;
    message: string;
}
function handler(r: SuccessMessage | ErrorMessage) {
    if (r.type === "HttpSuccess") { 
        let token = r.body;
    }
}

在這個例子中，handler? 函數(shù)中的 r? 的類型就被推斷為 SuccessMessage?。因為根據 SuccessMessage? 和 ErrorMessage? 類型中的type字段的模板字面量類型推斷出 HttpSucces? 是根據SuccessMessage?中的type創(chuàng)建的。

2、聯(lián)合類型

（1）基本使用

聯(lián)合類型是一種互斥的類型，該類型同時表示所有可能的類型。聯(lián)合類型可以理解為多個類型的并集。聯(lián)合類型用來表示變量、參數(shù)的類型不是某個單一的類型，而可能是多種不同的類型的組合，它通過 | 來分隔不同的類型：

type Union = "A" | "B" | "C";

在編寫一個函數(shù)時，該函數(shù)的期望參數(shù)是數(shù)字或者字符串，并根據傳遞的參數(shù)類型來執(zhí)行不同的邏輯。這時就用到了聯(lián)合類型：

function direction(param: string | number) {
  if (typeof param === "string") {
    ...
  }
  if (typeof param === "number") {
    ...
  }
  ...
}

這樣在調用 direction? 函數(shù)時，就可以傳入string或number類型的參數(shù)。當聯(lián)合類型比較長或者想要復用這個聯(lián)合類型的時候，就可以使用類型別名來定義聯(lián)合類型：

type Params = string | number | boolean;

再來看一個字符串字面量聯(lián)合類型的例子，setStatus 函數(shù)只能接受某些特定的字符串值，就可以將這些字符串字面量組合成一個聯(lián)合類型：

type Status = 'not_started' | 'progress' | 'completed' | 'failed';
const setStatus = (status: Status) => {
  db.object.setStatus(status);
};
setStatus('progress');
setStatus('offline'); //  類型“"offline"”的參數(shù)不能賦給類型“Status”的參數(shù)。

在調用函數(shù)時，如果傳入的參數(shù)不是聯(lián)合類型中的值，就會報錯。

（2）限制

聯(lián)合類型僅在編譯時是可用的，這意味著我們不能遍歷這些值。進行如下嘗試：

type Status = 'not_started' | 'progress' | 'completed' | 'failed';
console.log(Object.values(Status)); //  “Status”僅表示類型，但在此處卻作為值使用。

這時就會拋出一個錯誤，告訴我們不能將 Status 類型當做值來使用。

如果想要遍歷這些值，可以使用枚舉來實現(xiàn)：

enum Status {
  'not_started',
  'progress',
  'completed',
  'failed'
}
console.log(Object.values(Status));

（3）可辨識聯(lián)合類型

在使用聯(lián)合類型時，如何來區(qū)分聯(lián)合類型中的類型呢？類型保護是一種條件檢查，可以幫助我們區(qū)分類型。在這種情況下，類型保護可以讓我們準確地確定聯(lián)合中的類型（下文會詳細介紹類型保護）。

有很多方式可以做到這一點，這很大程度上取決于聯(lián)合類型中包含哪些類型。有一條捷徑可以使聯(lián)合類型中的類型之間的區(qū)分變得容易，那就是可辨識聯(lián)合類型?？杀孀R聯(lián)合類型是聯(lián)合類型的一種特殊情況，它允許我們輕松的區(qū)分其中的類型。

這是通過向具有唯一值的每個類型中添加一個字段來實現(xiàn)的，該字段用于使用相等類型保護來區(qū)分類型。例如，有一個表示所有可能的形狀的聯(lián)合類型，根據傳入的不同類型的形狀來計算該形狀的面積，代碼如下：

type Square = {
  kind: "square";
  size: number;
}
type Rectangle = {
  kind: "rectangle";
  height: number;
  width: number;
}
type Circle = {
  kind: "circle";
  radius: number;
}
type Shape = Square | Rectangle | Circle; 
function getArea(s: Shape) {
  switch (s.kind) {
    case "square":
      return s.size * s.size;
    case "rectangle":
      return s.height * s.width;
    case "circle":
      return Math.PI * s.radius ** 2;
  }
}

在這個例子中，Shape? 就是一個可辨識聯(lián)合類型，它是三個類型的聯(lián)合，而這三個類型都有一個 kind? 屬性，且每個類型的 kind? 屬性值都不相同，能夠起到標識作用。函數(shù)內應該包含聯(lián)合類型中每一個接口的 case?，以保證每個**case**都能被處理。

如果函數(shù)內沒有包含聯(lián)合類型中每一個類型的 case，在編寫代碼時希望編譯器應該給出代碼提示，可以使用以下兩種完整性檢查的方法。

strictNullChecks

對于上面的例子，先來新增一個類型，整體代碼如下：

type Square = {
  kind: "square";
  size: number;
}
type Rectangle = {
  kind: "rectangle";
  height: number;
  width: number;
}
type Circle = {
  kind: "circle";
  radius: number;
}
type Triangle = {
  kind: "triangle";
  bottom: number;
  height: number;
}
type Shape = Square | Rectangle | Circle | Triangle; 
function getArea(s: Shape) {
  switch (s.kind) {
    case "square":
      return s.size * s.size;
    case "rectangle":
      return s.height * s.width;
    case "circle":
      return Math.PI * s.radius ** 2;
  }
}

這時，Shape 聯(lián)合類型中有四種類型，但函數(shù)的 switch? 里只包含三個 case?，這個時候編譯器并沒有提示任何錯誤，因為當傳入函數(shù)的是類型是 Triangle? 時，沒有任何一個 case? 符合，則不會執(zhí)行任何 return? 語句，那么函數(shù)是默認返回 undefined?。所以可以利用這個特點，結合 strictNullChecks? 編譯選項，可以在tsconfig.json?配置文件中開啟 strictNullChecks：

{
  "compilerOptions": {
    "strictNullChecks": true,
  }
}

讓函數(shù)的返回值類型為 number?，那么當返回 undefined 時就會報錯：

function getArea(s: Shape): number {
    case "square":
      return s.size * s.size;
    case "rectangle":
      return s.height * s.width;
    case "circle":
      return Math.PI * s.radius ** 2;
  }
}

上面的number?處就會報錯：

never

當函數(shù)返回一個錯誤或者不可能有返回值的時候，返回值類型為 never?。所以可以給 switch? 添加一個 default? 流程，當前面的 case? 都不符合的時候，會執(zhí)行 default 中的邏輯：

function assertNever(value: never): never {
  throw new Error("Unexpected object: " + value);
}
function getArea(s: Shape) {
  switch (s.kind) {
    case "square":
      return s.size * s.size;
    case "rectangle":
      return s.height * s.width;
    case "circle":
      return Math.PI * s.radius ** 2;
    default:
      return assertNever(s); // error 類型“Triangle”的參數(shù)不能賦給類型“never”的參數(shù)
  }
}

采用這種方式，需要定義一個額外的 asserNever 函數(shù)，但是這種方式不僅能夠在編譯階段提示遺漏了判斷條件，而且在運行時也會報錯。

3、交叉類型

（1）基本實用

交叉類型是將多個類型合并為一個類型。這讓我們可以把現(xiàn)有的多種類型疊加到成為一種類型，合并后的類型將擁有所有成員類型的特性。交叉類型可以理解為多個類型的交集。可以使用以下語法來創(chuàng)建交叉類型，每種類型之間使用 & 來分隔：

type Types = type1 & type2 & .. & .. & typeN;

如果我們僅僅把原始類型、字面量類型、函數(shù)類型等原子類型合并成交叉類型，是沒有任何意義的，因為不會有變量同時滿足這些類型，那這個類型實際上就等于never類型。

（2）使用場景

上面說了，一般情況下使用交叉類型是沒有意義的，那什么時候該使用交叉類型呢？下面就來看看交叉類型的使用場景。

合并接口類型

交叉類型的一個常見的使用場景就是將多個接口合并成為一個：

type Person = {
 name: string;
  age: number;
} & {
 height: number;
  weight: number;
} & {
 id: number;
}
const person: Person = {
 name: "zhangsan",
  age: 18,
  height: 180,
  weight: 60,
  id: 123456
}

這里就通過交叉類型使 Person 同時擁有了三個接口中的五個屬性。那如果兩個接口中的同一個屬性定義了不同的類型會發(fā)生了什么情況呢？

type Person = {
 name: string;
  age: number;
} & {
  age: string;
 height: number;
  weight: number;
}

兩個接口中都擁有age?屬性，并且類型分別是number和string?，那么在合并后，age?的類型就是string & number?，也就是 never 類型：

const person: Person = {
 name: "zhangsan",
  age: 18,   //  不能將類型“number”分配給類型“never”。
  height: 180,
  weight: 60,
}

如果同名屬性的類型兼容，比如一個是 number?，另一個是 number? 的子類型——數(shù)字字面量類型，合并后 age 屬性的類型就是兩者中的子類型：

type Person = {
 name: string;
  age: number;
} & {
  age: 18;
 height: number;
  weight: number;
}
const person: Person = {
 name: "zhangsan",
  age: 20,  //  不能將類型“20”分配給類型“18”。
  height: 180,
  weight: 60,
}

第二個接口中的age?是一個數(shù)字字面量類型，它是number?類型的子類型，所以合并之后的類型為字面量類型18。

合并聯(lián)合類型

交叉類型另外一個常見的使用場景就是合并聯(lián)合類型?？梢詫⒍鄠€聯(lián)合類型合并為一個交叉類型，這個交叉類型需要同時滿足不同的聯(lián)合類型限制，也就是提取了所有聯(lián)合類型的相同類型成員：

type A = "blue" | "red" | 999;
type B = 999 | 666;
type C = A & B; // type C = 999;
const c: C = 999;

如果多個聯(lián)合類型中沒有相同的類型成員，那么交叉出來的類型就是never類型：

type A = "blue" | "red";
type B = 999 | 666;
type C = A & B;
const c: C = 999; //  不能將類型“number”分配給類型“never”。

4、索引類型

在介紹索引類型之前，先來了解兩個類型操作符：索引類型查詢操作符和索引訪問操作符。

（1）索引類型查詢操作符

使用 keyof 操作符可以返回一個由這個類型的所有屬性名組成的聯(lián)合類型：

type UserRole = 'admin' | 'moderator' | 'author';
type User = {
  id: number;
  name: string;
  email: string;
  role: UserRole;
}
type UserKeysType = keyof User; // 'id' | 'name' | 'email' | 'role';

（2）索引訪問操作符

索引訪問操作符就是[]，其實和訪問對象的某個屬性值是一樣的語法，但是在 TS 中它可以用來訪問某個屬性的類型：

type User = {
  id: number;
  name: string;
  address: {
    street: string;
    city: string;
    country: string;
  };
}
type Params = {
  id: User['id'],
  address: User['address']
}

這里我們沒有使用number?來描述id?屬性，而是使用 User['id']? 引用User?中的id屬性的類型，這種類型成為索引類型，它們看起來與訪問對象的屬性相同，但訪問的是類型。

當然，也可以訪問嵌套屬性的類型：

type City = User['address']['city']; // string

可以通過聯(lián)合類型來一次獲取多個屬性的類型：

type IdOrName = User['id' | 'name']; // string | number

（3）應用

我們可以使用以下方式來獲取給定對象中的任何屬性：

function getProperty(obj: T, key: K) {
  return obj[key];
}

TypeScript 會推斷此函數(shù)的返回類型為 T[K]，當調用 getProperty 函數(shù)時，TypeScript 將推斷我們將要讀取的屬性的實際類型：

const user: User = {
  id: 15,
  name: 'John',
  email: '[email protected]',
  role: 'admin'
};

getProperty(user, 'name'); // string
getProperty(user, 'id');   // number

name?屬性被推斷為string?類型，age?屬性被推斷為number類型。當訪問User中不存在的屬性時，就會報錯：

getProperty(user, 'property'); //  類型“"property"”的參數(shù)不能賦給類型“keyof User”的參數(shù)。

5、條件類型

（1）基本概念

條件類型根據條件來選擇兩種可能的類型之一，就像 JavaScript 中的三元運算符一樣。其語法如下所示：

T extends U ? X : Y

上述類型就意味著當 T? 可分配給（或繼承自）U? 時，類型為 X?，否則類型為 Y。

看一個簡單的例子，一個值可以是用戶的出生日期或年齡。如果是出生日期，那么這個值的類型就是 number；如果是年齡，那這個值的類型就是 string。下面定義了三個類型：

type Dob = string;
type Age = number;
type UserAgeInformation = T extends number ? number : string;

其中 T? 是 UserAgeInformation? 的泛型參數(shù)，可以在這里傳遞任何類型。如果 T? 擴展了 number?，那么類型就是 number?，否則就是 string?。如果希望 UserAgeInformation? 是 number?，就可以將 Age? 傳遞給 T?，如果希望是一個 string?，就可以將 Dob? 傳遞給 T：

type Dob = string;
type http://fisionsoft.com.cn/article/coesoii.html