关于前端:现代TypeScript高级教程泛型和类型体操

泛型和类型体操

泛型和类型体操（Type Gymnastics）是 TypeScript 中高级类型零碎的重要组成部分。它们提供了弱小的工具和技巧，用于解决简单的类型操作和转换。

泛型（Generics）

1. 泛型函数

泛型函数容许咱们在函数定义中应用类型参数，以便在函数调用时动静指定类型。例如：

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

let result = identity<number>(42);  // result 的类型为 number

在下面的示例中，identity 函数应用类型参数 T，并返回与输出类型雷同的值。通过显式传递泛型参数，咱们能够确保在函数调用时指定了具体的类型。

2. 泛型接口

泛型接口容许咱们在接口定义中应用类型参数，以便在实现该接口时指定具体的类型。例如：

interface Container<T> {value: T;}

let container: Container<number> = {value: 42};

在下面的示例中，咱们定义了一个泛型接口 Container，它蕴含一个类型参数 T。通过指定 Container<number>，咱们创立了一个具体的实现，其中的 value 属性类型为 number。

3. 泛型类

泛型类容许咱们在类定义中应用类型参数，以便在创立类的实例时指定具体的类型。例如：

class Stack<T> {private items: T[] = [];

  push(item: T) {this.items.push(item);
  }

  pop(): T | undefined {return this.items.pop();
  }
}

let stack = new Stack<number>();
stack.push(1);
stack.push(2);
let item = stack.pop();  // item 的类型为 number | undefined

在下面的示例中，咱们定义了一个泛型类 Stack，它应用类型参数 T 来示意堆栈中的元素类型。通过创立 Stack<number> 的实例，咱们限度了堆栈中的元素必须为 number 类型。

类型体操（Type Gymnastics）

1. 条件类型（Conditional Types）

条件类型容许咱们依据输出类型的条件判断后果来抉择不同的类型。条件类型的语法模式为：

T extends U ? X : Y

其中，T 是待查看的类型，U 是条件类型，X 是满足条件时返回的类型，Y 是不满足条件时返回的类型。

上面是一个应用条件类型的示例：

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

type Result = Check<string>;  // Result 的类型为 true

在下面的示例中，咱们定义了一个条件

类型 Check<T>，它承受一个类型参数 T。如果 T 是 string 类型，那么 Check<T> 的类型将是 true，否则为 false。

2. keyof 操作符和索引拜访类型

keyof 操作符用于获取类型的所有属性名，联合索引拜访类型能够从一个类型中获取属性的具体类型。

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

type PersonKeys = keyof Person;  // "name" | "age"
type PersonNameType = Person['name'];  // string

在下面的示例中，咱们应用 keyof 操作符获取了 Person 接口的属性名汇合，并通过索引拜访类型获取了 Person 接口中 name 属性的类型。

3. infer 关键字

infer 关键字用于在条件类型中推断类型，并将其赋值给一个类型变量。

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

function add(a: number, b: number): number {return a + b;}

type AddReturnValue = ReturnType<typeof add>;  // 类型为 number

在下面的示例中，ReturnType 类型承受一个类型参数 T，并应用条件类型和 infer 关键字推断函数类型的返回类型。通过调用 ReturnType<typeof add>，咱们推断出 add 函数的返回类型为 number。

当波及到泛型时，还有一些重要的概念和内置泛型函数能够深入分析。让咱们持续探讨 extends 关键字、TS 官网内置的一些泛型函数以及它们的应用。

extends 关键字和类型束缚

在泛型中，咱们能够应用 extends 关键字来对泛型类型进行束缚。这样能够确保传递给泛型的类型满足特定条件。

function printProperty<T extends {name: string}>(obj: T): void {console.log(obj.name);
}

printProperty({name: 'John', age: 25});  // 输入 'John'

在下面的示例中，printProperty 函数承受一个泛型参数 T，该参数必须满足一个约束条件：具备 name 属性，且 name 的类型为 string。通过应用 extends 关键字和类型束缚，咱们能够确保 obj 参数具备所需的属性和类型，从而避免出现谬误。

泛型函数 Util

TypeScript 提供了一些内置的泛型函数，这些函数被宽泛用于解决各种类型操作。以下是一些常见的官网内置泛型函数：

Partial<T>

Partial<T> 是 TypeScript 中的一个内置泛型类型，它能够将给定类型 T 中的所有属性转换为可选属性。这对于创立局部残缺的对象十分有用。

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

type PartialPerson = Partial<Person>;

const partialPerson: PartialPerson = {name: 'John'};  // age 属性是可选的 

在下面的示例中，Partial<Person> 将 Person 接口中的所有属性变为可选属性，从而创立了一个局部残缺的 PartialPerson 类型。

Required<T>

Required<T> 是 TypeScript 中的另一个内置泛型类型，它能够将给定类型 T 中的所有可选属性转换为必须属性。这对于确保对象的完整性十分有用。

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

type RequiredPerson = Required<Person>;

const requiredPerson: RequiredPerson = {name: 'John', age: 25};  // name 和 age 属性是必须的 

在下面的示例中，Required<Person> 将 Person 接口中的所有可选属性变为必须属性，从而创立了一个要求完整性的 RequiredPerson 类型。

Pick<T, K>

Pick<T, K> 是 TypeScript 中的另一个内置泛型函数，它能够从给定类型 T 中抉择指定的属性 K 组成一个新的类型。

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

type NameAndAge = Pick<Person, 'name' | 'age'>;

const person: NameAndAge = { name:

 'John', age: 25 };  // 只蕴含 name 和 age 属性 

在下面的示例中，Pick<Person, 'name' | 'age'> 从 Person 接口中抉择了 'name' 和 'age' 属性，创立了一个新的类型 NameAndAge。

咱们还能够联合泛型和内置泛型函数来实现更简单的类型操作。以下是一个示例，展现了如何应用 Pick 和泛型来创立一个函数，该函数从给定对象中抉择指定属性，并返回一个新的对象。

function pickProperties<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {const result: Partial<T> = {};
  for (const key of keys) {result[key] = obj[key];
  }
  return result as Pick<T, K>;
}

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

const person: Person = {
  name: 'John',
  age: 25,
  address: '123 Main St'
};

const nameAndAge = pickProperties(person, ['name', 'age']);  // 只蕴含 name 和 age 属性
console.log(nameAndAge);  // 输入: {name: 'John', age: 25}

在下面的示例中，pickProperties 函数承受一个泛型参数 T 和一个属性数组 keys。通过应用 Pick<T, K>，咱们将从给定对象 obj 中抉择指定的属性 keys，并创立一个新的对象。

这个例子联合了泛型、内置泛型函数 Pick、keyof 操作符和 extends 关键字，展现了如何在 TypeScript 中解决简单的类型操作和转换。

当波及到官网内置的泛型函数时，还有一些重要的函数值得剖析。让咱们持续探讨一些罕用的官网内置泛型函数以及它们的应用。

Exclude<T, U>

Exclude<T, U> 是 TypeScript 中的一个内置泛型函数，用于从类型 T 中排除类型 U。它返回一个新类型，该新类型蕴含在 T 中存在但不在 U 中存在的成员类型。

type T = Exclude<"a" | "b" | "c", "a" | "b">;  // T 的类型为 "c"

在下面的示例中，Exclude<"a" | "b" | "c", "a" | "b"> 排除了类型 "a" 和 "b"，返回类型为 "c"。

Omit<T, K>

Omit<T, K> 是 TypeScript 中的另一个内置泛型函数，它返回一个新类型，该新类型排除了类型 T 中指定的属性 K。

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

type PersonWithoutAddress = Omit<Person, "address">;

在下面的示例中，Omit<Person, "address"> 返回了一个新类型 PersonWithoutAddress，该类型排除了 Person 接口中的 address 属性。

Readonly<T>

Readonly<T> 是 TypeScript 中的另一个内置泛型函数，它将类型 T 中的所有属性转换为只读属性。

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

type ReadonlyPerson = Readonly<Person>;

在下面的示例中，Readonly<Person> 将 Person 接口中的所有属性变为只读属性，创立了一个新类型 ReadonlyPerson。

总结

泛型和类型体操是 TypeScript 中弱小的类型零碎的要害组成部分。通过应用泛型，咱们能够创立可重用、灵便和类型平安的代码。内置泛型函数提供了一些罕用的类型转换工具，如 Partial、Required 和 Pick，能够帮忙咱们更不便地解决类型操作。

通过联合泛型、extends 关键字、内置泛型函数和其余高级类型概念，咱们可能在 TypeScript 中编写更简单、类型平安的代码，并利用 TypeScript 的弱小类型零碎来进步代码的可读性、可维护性和可扩展性。