TS 入门(六)：TypeScript泛型编程

前言

在前三章中，我们介绍了 TypeScript 的基础知识、函数与对象类型。在本章中，我们将探讨更高级的类型和类型操作，包括联合类型、交叉类型、字面量类型、类型断言、类型兼容性和类型守卫等内容。通过这些高级特性，你将能够编写出更加灵活和强大的代码。

• TS 入门(一)：TypeScript 简介与安装
• TS 入门(二)：Typescript类型与类型注解
• TS 入门(三)：Typescript函数与对象类型
• TS 入门(四)：TypeScript 高级类型与类型操作
• TS 入门(五)：TypeScript接口与类

回顾接口与类

在上一章中，我们学习了以下内容：

• 接口：包括基本接口、可选属性和只读属性、函数类型接口、可索引类型、接口继承。
• 类：包括基本类、类的成员、构造函数、继承和派生类、公有、私有和受保护的修饰符、静态属性和方法、抽象类。

---

正文开始 ， 如果觉得文章对您有帮助，请帮我三连+订阅，谢谢💖💖💖

---

1. 泛型函数

泛型函数允许你在定义函数时指定类型参数，而不是具体的类型。这样可以在函数内部使用不同的类型。

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

let output1 = identity<string>("我的名字"); // 输出类型为 'string'
let output2 = identity<number>(100); // 输出类型为 'number'
console.log(output1); // "我的名字"
console.log(output2); // 100

泛型函数还可以使用类型推断，根据传入的参数自动确定类型。

let output3 = identity("自动推断类型"); // 输出类型为 'string'
console.log(output3); // "自动推断类型"

2. 泛型接口

你可以使用泛型为接口定义类型参数，从而使接口更加灵活。

interface GenericIdentityFn<T> {
  (arg: T): T;
}

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

let myIdentity: GenericIdentityFn<number> = identity2;
console.log(myIdentity(42)); // 42

3. 泛型类

泛型也可以应用于类，使类能够处理不同的类型。

class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;

  constructor(zeroValue: T, addFn: (x: T, y: T) => T) {
    this.zeroValue = zeroValue;
    this.add = addFn;
  }
}

let myGenericNumber = new GenericNumber<number>(0, (x, y) => x + y);
console.log(myGenericNumber.add(5, 10)); // 15

4. 泛型约束

有时候我们希望泛型类型满足一定的条件，可以通过泛型约束来实现。

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length); // 现在我们知道arg有length属性了
  return arg;
}

loggingIdentity({ length: 10, value: 3 }); // 输出: 10
// loggingIdentity(3); // 错误，number类型没有length属性

5. 多重类型参数与默认类型

a. 多重类型参数

泛型函数和类可以接受多个类型参数。

function map<T, U>(array: T[], transform: (item: T) => U): U[] {
  let result: U[] = [];
  for (let item of array) {
    result.push(transform(item));
  }
  return result;
}

let numbers = [1, 2, 3];
let strings = map(numbers, num => num.toString());
console.log(strings); // ["1", "2", "3"]

b. 默认类型参数

你可以为泛型参数指定默认类型，这样在没有明确传入类型参数时将使用默认类型。

class Container<T = string> {
  content: T;
  
  constructor(content: T) {
    this.content = content;
  }
}

let stringContainer = new Container("这是一个字符串");
console.log(stringContainer.content); // "这是一个字符串"

let numberContainer = new Container<number>(42);
console.log(numberContainer.content); // 42

结语

通过本章的学习，你应该对 TypeScript 中的泛型编程有了更深入的理解。掌握泛型将使你能够编写更加灵活和可重用的代码。在下一章中，我们将继续探讨 TypeScript 中的模块与命名空间，包括导入和导出、默认导出、重命名导入和导出、命名空间等内容。务必掌握好每个概念，它们将为你后续学习 TypeScript 提供坚实的基础。