面试之《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 可以在编译时进行类型检查,确保代码的类型安全性,减少运行时错误。
  • 灵活性:泛型使得代码可以在不同的上下文中使用,只需在使用时指定具体的类型,提高了代码的灵活性和可维护性。
相关推荐
silent_missile9 分钟前
vue3父组件和子组件之间传递数据
前端·javascript·vue.js
IT_陈寒1 小时前
Vue 3.4 实战:这7个Composition API技巧让我的开发效率飙升50%
前端·人工智能·后端
duansamve2 小时前
React 18+TS中使用Cesium 1.95
react.js·typescript·cesium
少年阿闯~~2 小时前
HTML——1px问题
前端·html
Mike_jia3 小时前
SafeLine:自托管WAF颠覆者!一键部署守护Web安全的雷池防线
前端
brzhang3 小时前
把网页的“好句子”都装进侧边栏:我做了个叫 Markbox 的收藏器,开源!
前端·后端·架构
岁岁岁平安3 小时前
SpringBoot3+WebSocket+Vue3+TypeScript实现简易在线聊天室(附完整源码参考)
java·spring boot·websocket·网络协议·typescript·vue
聪明的笨猪猪4 小时前
Java 高并发多线程 “基础”面试清单(含超通俗生活案例与深度理解)
java·经验分享·笔记·面试
VincentFHR4 小时前
Canvas 高性能K线图,支持无限左右滑动
前端·数据可视化·canvas
sophie旭4 小时前
一道面试题,开始性能优化之旅(3)-- DNS查询+TCP(二)
前端·面试·性能优化