面试之TypeScript泛型

JAY.LIN 收录于面试笔记

2025-03-11 约 969 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=146187645

面试之《TypeScript泛型》

在 TypeScript（TS）里，泛型是一项极为重要的特性，它能让你编写可复用、类型安全且灵活的代码。以下从多个方面为你详细介绍 TS 中的泛型：

基本概念

泛型允许你创建可重用的组件，这些组件能够处理多种数据类型，而非单一的数据类型。通过使用泛型，你可以在定义函数、类或接口时不预先指定具体的类型，而是在使用时再确定类型，从而增加代码的灵活性和可复用性。

泛型函数

泛型函数是指在函数定义时使用泛型类型参数的函数，它可以处理不同类型的数据。

// 定义泛型函数
function identity<T>(arg: T): T {
    return arg;
}

// 使用泛型函数
let output1 = identity<string>("myString");
let output2 = identity<number>(100);

// 也可以省略类型参数，让 TypeScript 自动推断
let output3 = identity("anotherString");

在上述代码中， <T> 是泛型类型参数，它代表一种类型，在函数调用时可以替换为具体的类型。 identity 函数接收一个类型为 T 的参数，并返回相同类型的值。

泛型接口

泛型接口是指在接口定义时使用泛型类型参数的接口，它可以用于约束对象的结构，并且能适应不同的数据类型。

// 定义泛型接口
interface GenericIdentityFn<T> {
    (arg: T): T;
}

// 使用泛型接口定义函数
function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: GenericIdentityFn<number> = identity;

这里的 GenericIdentityFn 接口使用了泛型类型参数 T ，它表示该接口所定义的函数接收一个类型为 T 的参数并返回相同类型的值。

泛型类

泛型类是指在类定义时使用泛型类型参数的类，它可以创建能够处理不同数据类型的类实例。

// 定义泛型类
class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

// 使用泛型类
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x, y) { return x + y; };

GenericNumber 类使用泛型类型参数 T ，它可以处理不同类型的数据，在创建实例时需要指定具体的类型。

泛型约束

有时候你可能希望对泛型类型参数进行一些限制，确保它具备某些属性或方法，这时可以使用泛型约束。

// 定义一个接口来约束泛型
interface Lengthwise {
    length: number;
}

// 使用泛型约束
function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}

// 可以传入具有 length 属性的对象
loggingIdentity("hello");
loggingIdentity([1, 2, 3]);

在上述代码中， T extends Lengthwise 表示泛型类型参数 T 必须是实现了 Lengthwise 接口的类型，即必须具有 length 属性。

泛型的好处

可复用性 ：泛型允许你编写通用的代码组件，这些组件可以处理多种数据类型，避免了为每种数据类型重复编写代码。
类型安全 ：在使用泛型时，TypeScript 可以在编译时进行类型检查，确保代码的类型安全性，减少运行时错误。
灵活性 ：泛型使得代码可以在不同的上下文中使用，只需在使用时指定具体的类型，提高了代码的灵活性和可维护性。