返回

TypeScript 类型注解:高级类型详细解析

前端

在编写 TypeScript 代码时,使用类型注解可以帮助我们更好地理解代码的意图,并防止出现类型错误。TypeScript 中的类型注解分为基本类型和高级类型两类,基本类型包括字符串、数字、布尔值、数组、元组、枚举和未知类型,而高级类型则包括联合类型、交叉类型、keyof T、T[K]、索引类型、映射类型、条件类型、类型保护和泛型。

联合类型

联合类型允许一个变量可以同时存储多个不同类型的な値。联合类型的语法是使用 | 将多个类型连接起来,比如:

let x: string | number;

这个代码表示变量 x 可以存储字符串或数字。

交叉类型

交叉类型允许我们创建新的类型,该类型包含多个其他类型的特征。交叉类型的语法是使用 & 将多个类型连接起来,比如:

interface Person {
  name: string;
}

interface Employee extends Person {
  employeeId: number;
}

这个代码创建了一个新的类型 Employee,它包含了 Person 类型的所有特征,还增加了 employeeId 属性。

keyof T

keyof T 操作符返回类型 T 的属性名的联合类型。比如:

interface Person {
  name: string;
  age: number;
}

type PersonKeys = keyof Person;

这个代码定义了一个类型 PersonKeys,它包含了 Person 类型的所有属性名,即 "name""age"

T[K]

T[K] 操作符返回类型 T 的属性 K 的类型。比如:

interface Person {
  name: string;
  age: number;
}

type NameType = Person["name"];

这个代码定义了一个类型 NameType,它包含了 Person 类型属性 name 的类型,即 string

索引类型

索引类型允许我们创建新的类型,该类型表示对象的索引签名。索引类型的语法是使用 []: 来指定索引的类型,比如:

interface Person {
  [index: string]: any;
}

这个代码创建了一个新的类型 Person,它允许我们使用字符串作为索引来访问对象中的属性。

映射类型

映射类型允许我们创建新的类型,该类型表示对象的每个属性的类型。映射类型的语法是使用 {[key: string]: type} 来指定映射的键和值类型,比如:

type Person = {
  [key: string]: any;
};

这个代码创建了一个新的类型 Person,它允许我们使用字符串作为键来访问对象中的属性,并且这些属性的类型都是 any

条件类型

条件类型允许我们创建新的类型,该类型取决于另一个类型的真假值。条件类型的语法是使用 extends? 来指定条件,比如:

type IsString<T> = T extends string ? true : false;

这个代码定义了一个条件类型 IsString,它可以判断一个类型是否为字符串。

类型保护

类型保护是指我们可以使用某种方法来检查一个变量的类型。TypeScript 提供了两种类型保护:类型别名和类型谓词。

类型别名允许我们创建一个新的类型,该类型表示另一个类型的子类型。比如:

type StringType = string;

这个代码定义了一个新的类型 StringType,它表示字符串类型的子类型。

类型谓词允许我们创建一个函数,该函数可以判断一个变量是否属于某种类型。比如:

function isString(x: any): x is string {
  return typeof x === "string";
}

这个函数可以判断一个变量 x 是否为字符串。

泛型

泛型允许我们创建可重用的组件,这些组件可以用于不同类型的数据。泛型的语法是使用尖括号 <> 来指定类型参数,比如:

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

这个函数可以接受任何类型的数据,并返回相同类型的数据。

以上是对 TypeScript 类型注解中高级类型的一些介绍。这些类型可以帮助我们更好地理解代码的意图,防止出现类型错误,并提高代码的可重用性。