学习 TypeScript 中的类型操作符-JavaScript中文网-JavaScript教程资源分享门户

TypeScript 是一种 JavaScript 的超集，它通过添加静态类型系统来增强 JavaScript 代码的可读性、可维护性和可扩展性。与 JavaScript 相比，TypeScript 具有更强的类型约束和类型推导能力，这使得开发者可以更轻松地编写复杂的应用程序，并降低了代码的错误率。

TypeScript 中的类型操作符是一组类型系统的工具，它们可以增强类型的表现力和确定性。本文将介绍 TypeScript 中的一些常见类型操作符，并提供相应的示例代码。

类型操作符的分类

TypeScript 中的类型操作符可以分为以下几类：

泛型类型操作符：用于操作泛型类型。
映射类型操作符：用于从现有类型中生成新的类型。
条件类型操作符：用于根据类型条件来确定类型。
其他类型操作符：包括交叉类型和联合类型等。

泛型类型操作符

泛型类型操作符可以用来操作泛型类型，并返回一个新的泛型类型。常用的泛型类型操作符包括：

1. keyof

keyof 可以用于获取一个类型的所有属性名，返回一个由属性名组成的联合类型。例如：

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

type PersonKeys = keyof Person;  // 'name' | 'age'

2. Partial

Partial 可以用于将一个类型的所有属性变为可选属性，返回一个新的类型。例如：

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

type PartialPerson = Partial<Person>;  // { name?: string; age?: number; }

3. Required

Required 可以用于将一个类型的所有属性变为必须属性，返回一个新的类型。例如：

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

type RequiredPerson = Required<Person>;  // { name: string; age: number; }

4. Pick

Pick 可以用于从一个类型中选择特定的属性，返回一个新的类型。例如：

interface Person {
  name: string;
  age: number;
  gender: 'male' | 'female';
}

type PersonNameAge = Pick<Person, 'name' | 'age'>;  // { name: string; age: number; }

映射类型操作符

映射类型操作符可以从一个现有类型中生成新的类型，常用的映射类型操作符包括：

1. Readonly

Readonly 可以将一个类型的所有属性变为只读属性，返回一个新的类型。例如：

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

type ReadonlyPerson = Readonly<Person>;  // { readonly name: string; readonly age: number; }

2. Record

Record 可以将一个类型中的所有属性都映射成一个新的属性值类型，返回一个新的类型。例如：

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

type PersonMap<T> = Record<keyof T, string>;

type PersonStringMap = PersonMap<Person>;  // { name: string; age: string; }

3. Exclude

Exclude 可以从一个联合类型中排除一些类型，返回一个新的类型。例如：

type Union = string | number | boolean;

type WithoutNumber = Exclude<Union, number>;  // string | boolean

条件类型操作符

条件类型操作符可以根据类型条件来确定类型，常用的条件类型操作符包括：

1. Conditional Types

Conditional Types 可以根据条件来确定类型，例如：

type NonNullable<T> = T extends null | undefined ? never : T;

type Panel = string | null | undefined;

type NonNullablePanel = NonNullable<Panel>;  // string

2. Infer

Infer 可以从一个泛型类型中提取出类型变量并作为返回值，例如：

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

function strlen(s: string) {
  return s.length;
}

type StrlenReturn = ReturnType<typeof strlen>;  // number

其他类型操作符

其他常用的类型操作符包括：

1. 交叉类型（&）

交叉类型可以将多个类型合并成一个类型，返回一个新的类型。例如：

// javascriptcn.com 代码示例
interface A {
  name: string;
}

interface B {
  age: number;
}

type C = A & B;  // { name: string; age: number; }

2. 联合类型（|）

联合类型可以表示多个类型中的任意一个，返回一个新的类型。例如：

type Union = string | number | boolean;

function foo(arg: Union) {
  // ...
}

总结

本文介绍了 TypeScript 中的一些常见类型操作符，包括泛型类型操作符、映射类型操作符、条件类型操作符和其他类型操作符，并提供了相应的示例代码。掌握这些类型操作符可以让开发者更加轻松地编写复杂的应用程序，并提高代码的可读性、可维护性和可扩展性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653ded647d4982a6eb78cc96