TypeScript 的泛型类型与传统类型有何差异？

2023-10-28 08:05:15

前言

在编程领域，类型系统扮演着至关重要的角色。它能够帮助我们轻松地发现和修复错误，还能确保代码的可读性和可维护性。TypeScript 作为一门强大的编程语言，拥有类型系统，并且还提供了 generic 的概念，让代码更加灵活和可重用。

什么是 TypeScript 的泛型？

泛型（Generic）是指在定义函数、类或接口时，使用类型变量作为参数，而这些参数在创建实例时才指定实际类型。泛型允许我们创建可重用代码，而无需为不同类型的数据创建多个不同的函数或类。

泛型与传统类型比较

为了更好地理解泛型，我们可以将它与传统类型进行比较。传统类型是指在定义函数、类或接口时，明确指定类型参数。例如，我们可以定义一个函数来计算两个数字的和：

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

这个函数只适用于数字类型的数据。如果我们想计算两个字符串的和，我们就需要定义一个新的函数：

function sumStrings(a: string, b: string): string {
  return a + b;
}

使用泛型，我们可以定义一个函数来计算任何类型的数据的和，而无需为不同类型的数据创建多个不同的函数。例如：

function sum<T>(a: T, b: T): T {
  return a + b;
}

这个函数可以计算数字、字符串、数组等任何类型的数据的和。

泛型的经典用例

函数编程里，泛型有一个经典的用例，那就是数组的映射。映射是指将数组中的每个元素应用一个函数，然后返回一个新数组。例如，我们可以使用泛型定义一个函数来将数组中的每个数字增加 1：

function map<T>(arr: T[], func: (item: T) => T): T[] {
  const newArr = [];
  for (const item of arr) {
    newArr.push(func(item));
  }
  return newArr;
}

这个函数可以将数组中的每个数字增加 1：

const numbers = [1, 2, 3, 4, 5];
const increasedNumbers = map(numbers, (num) => num + 1);
console.log(increasedNumbers); // [2, 3, 4, 5, 6]

真实世界的示例

在真实世界的开发中，泛型在各种场景中都有广泛的应用。例如：

React 中的泛型组件：React 组件可以是泛型的，这允许我们在组件中使用不同类型的数据。例如，我们可以创建一个泛型组件来显示一个列表，而这个列表可以是任何类型的数据，比如数组、对象等。
Redux 中的泛型 Action：Redux 的 Action 可以是泛型的，这允许我们在 Action 中传递不同类型的数据。例如，我们可以创建一个泛型 Action 来表示一个 API 请求，而这个 Action 可以传递不同的请求参数和数据。
TypeScript 中的泛型函数：TypeScript 中的函数可以是泛型的，这允许我们在函数中使用不同类型的数据。例如，我们可以创建一个泛型函数来计算两个数字的和，而这个函数可以接受不同的数字类型。