TypeScript 教程(六)：泛型编程

前言

在前几章中，我们学习了 TypeScript 的基础知识、函数与对象类型、以及接口和类。在本章中，我们将深入探讨 TypeScript 中的泛型编程，包括泛型函数、泛型接口、泛型类和泛型约束。泛型是一种强大的工具，能够使你的代码更加灵活和可重用。

系列文章列表

• TypeScript 教程(一)：安装和tsc编译
• TypeScript 教程(二)：类型与类型注解
• TypeScript 教程(三)：函数与对象类型
• TypeScript 教程(四)：高级类型与类型操作
• TypeScript 教程(五)：接口与类
• TypeScript 教程(六)：泛型编程
• TypeScript 教程(七)：模块与命名空间
• TypeScript 教程(八)：装饰器与高级类型操控
• TypeScript 教程(九)：类型声明文件与异步编程
• 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 提供坚实的基础。