面试之《TypeScript泛型》

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

基本概念

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

泛型函数

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

typescript 复制代码
// 定义泛型函数
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 的参数,并返回相同类型的值。

泛型接口

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

typescript 复制代码
// 定义泛型接口
interface GenericIdentityFn<T> {
    (arg: T): T;
}

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

let myIdentity: GenericIdentityFn<number> = identity;

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

泛型类

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

typescript 复制代码
// 定义泛型类
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,它可以处理不同类型的数据,在创建实例时需要指定具体的类型。

泛型约束

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

typescript 复制代码
// 定义一个接口来约束泛型
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 可以在编译时进行类型检查,确保代码的类型安全性,减少运行时错误。
  • 灵活性:泛型使得代码可以在不同的上下文中使用,只需在使用时指定具体的类型,提高了代码的灵活性和可维护性。
相关推荐
无心水22 分钟前
深入Java线程池:BlockingQueue实现全景解析与实战指南
java·后端·面试
Java水解25 分钟前
JAVA面试题大全(200+道题目)
java·后端·面试
编程岁月31 分钟前
java面试-0305-java线程调度方法?sleep()和wait()区别?
java·开发语言·面试
柯腾啊31 分钟前
“Script error.”的产生原因和解决办法
前端·javascript·浏览器
沙漠之皇34 分钟前
ts 定义重复对象字段
前端
HashTang1 小时前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
前端架构师-老李2 小时前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
一只学java的小汉堡2 小时前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html
用户21496515898753 小时前
从零搭建uniapp环境-记录
前端
努力写代码的熊大4 小时前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript