借势泛型，JavaScript升级篇

前端

2024-01-13 01:56:28

TypeScript 中的泛型是一种强大的工具，它允许您创建可重用的组件，这些组件可以在不同的数据类型上工作。这使得您的代码更加灵活和健壮。

什么是泛型？

泛型是允许您创建可用于多种数据类型的函数、类或接口的一种方法。这意味着您可以编写一次代码，然后在不同的数据类型上使用它，而无需每次都重复编写代码。

为什么要使用泛型？

泛型有很多好处，包括：

可重用性： 泛型组件可以重用于不同的数据类型，这可以节省时间并减少代码重复。
灵活性： 泛型组件可以轻松地适应新的数据类型，而无需更改代码。
健壮性： 泛型组件在处理不同数据类型时更健壮，因为它们可以验证传入的数据类型并处理无效数据。

如何使用泛型？

要使用泛型，您需要在函数、类或接口的定义中指定一个类型参数。类型参数可以是任何有效的 TypeScript 类型，例如 number、string 或 boolean。

例如，以下代码定义了一个函数，它接受一个类型参数 T，并返回该类型的数组：

function createArray<T>(length: number, value: T): T[] {
  return new Array(length).fill(value);
}

这个函数可以用来创建任何类型的数组，例如：

const numbers = createArray<number>(5, 0); // [0, 0, 0, 0, 0]
const strings = createArray<string>(5, "hello"); // ["hello", "hello", "hello", "hello", "hello"]
const booleans = createArray<boolean>(5, true); // [true, true, true, true, true]

泛型的类型参数

泛型的类型参数可以是任何有效的 TypeScript 类型，包括：

基本类型（例如 number、string 和 boolean）
联合类型（例如 number | string 和 string | boolean）
数组类型（例如 number[] 和 string[]）
对象类型（例如 { name: string; age: number; } 和 { x: number; y: number; }）
类类型（例如 class Person { name: string; age: number; } 和 class Animal { name: string; age: number; }）

泛型的约束

泛型的类型参数可以受到约束，这意味着它们只能是满足某些条件的类型。例如，您可以约束泛型类型参数只能是数字类型：

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

这个函数只能用来对数字求和，例如：

const sum1 = sum(1, 2); // 3
const sum2 = sum(1.5, 2.5); // 4
const sum3 = sum("hello", "world"); // 错误：参数类型不匹配

泛型的默认类型参数

泛型类型参数可以指定默认类型。这允许您在不指定类型参数的情况下使用泛型组件。例如，以下代码定义了一个函数，它接受一个类型参数 T，并返回该类型的数组。该函数的默认类型参数为 number：

function createArray<T = number>(length: number, value: T): T[] {
  return new Array(length).fill(value);
}

这个函数可以用来创建任何类型的数组，例如：

const numbers = createArray(5, 0); // [0, 0, 0, 0, 0]
const strings = createArray(5, "hello"); // ["hello", "hello", "hello", "hello", "hello"]
const booleans = createArray(5, true); // [true, true, true, true, true]