news 2026/6/21 16:01:06

TypeScript - 泛型 Generics(通俗易懂详细教程)

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
TypeScript - 泛型 Generics(通俗易懂详细教程)

前言

关于概念,本文不会过多叙述。

先来看个例子,体会一下泛型解决的问题吧。

我们定义一个print函数,这个函数的功能是把传入的参数打印出来,最后再返回这个参数,传入参数的类型是string,函数返回类型为string

functionprint(arg:string):string{console.log(arg)returnarg}

假如现在需求变了,我还需要打印number类型,请问怎么办?可使用联合类型来改造!

functionprint(arg:string|number):string|number{console.log(arg)returnarg}

现在需求又变了,我还需要打印string数组、number数组,甚至任何类型,怎么办?直接any

functionprint(arg:any):any{console.log(arg)returnarg}

需要注意的是写any类型不好,毕竟在TS中尽量不要写any

而且这也不是我们想要的结果,只能说传入的值是any类型,输出的值也是any类型,传入和返回并不是统一的。

这么写甚至还会出现bug

constres:string=print(123)

定义string类型来接收print函数的返回值,返回的是个number类型,TS并不会报错提示我们。

这个时候,泛型就出现了,它可以轻松解决输入输出要一致的问题。

另外,泛型不是为了解决这一个问题设计出来的,泛型还解决了很多其他问题,这里是通过这个例子来引出泛型。

基本使用

泛型的语法是<>里写类型参数,一般可以用T来表示。

一、处理函数参数

我们使用泛型来解决前面的问题,如下代码所示:

functionprint<T>(arg:T):T{console.log(arg)returnarg}

这样,我们就做到了输入和输出的类型统一,且可以输入输出任何类型。

如果类型不统一,就会报错:

泛型中的T就像一个占位符、或者说一个变量,在使用的时候可以把定义的类型像参数一样传入,它可以原封不动地输出。

泛型的写法对前端工程师来说是有些古怪,比如<> T,但记住就好,只要一看到<>,就知道这是泛型。


我们在使用的时候可以有两种方式指定类型:

  1. 定义要使用的类型
  2. TS 类型推断,自动推导出类型
print<string>('hello')// 定义 T 为 stringprint('hello')// TS 类型推断,自动推导类型为 string

我们知道,typeinterface都可以定义函数类型,也用泛型来写一下,type这么写:

typePrint=<T>(arg:T)=>TconstprintFn:Print=functionprint(arg){console.log(arg)returnarg}

interface这么写:

interfaceIprint<T>{(arg:T):T}functionprint<T>(arg:T){console.log(arg)returnarg}constmyPrint:Iprint<number>=print

二、默认参数

如果要给泛型加默认参数,可以这么写:

interfaceIprint<T=number>{(arg:T):T}functionprint<T>(arg:T){console.log(arg)returnarg}constmyPrint:Iprint=print

这样默认就是number类型了,怎么样,是不是感觉T就如同函数参数一样呢?

三、处理多个函数参数

现在有这么一个函数,传入一个只有两项的元组,交换元组的第 0 项和第 1 项,返回这个元组。

functionswap(tuple){return[tuple[1],tuple[0]]}

这么写,我们就丧失了类型,用泛型来改造一下。

我们用 T 代表第 0 项的类型,用 U 代表第 1 项的类型。

functionswap<T,U>(tuple:[T,U]):[U,T]{return[tuple[1],tuple[0]]}

这样就可以实现了元组第 0 项和第 1 项类型的控制。

传入的参数里,第 0 项为 string 类型,第 1 项为 number 类型。

在交换函数的返回值里,第 0 项为 number 类型,第 1 项为 string 类型。

第 0 项上全是 number 的方法。

第 1 项上全是 string 的方法。

四、函数副作用操作

泛型不仅可以很方便地约束函数的参数类型,还可以用在函数执行副作用操作的时候。

比如我们有一个通用的异步请求方法,想根据不同的 url 请求返回不同类型的数据。

functionrequest(url:string){returnfetch(url).then(res=>res.json())}

调一个获取用户信息的接口:

request('user/info').then(res=>{console.log(res)})

这时候的返回结果 res 就是一个 any 类型,非常讨厌。

我们希望调用 API 都清晰的知道返回类型是什么数据结构,就可以这么做:

interfaceUserInfo{name:stringage:number}functionrequest<T>(url:string):Promise<T>{returnfetch(url).then(res=>res.json())}request<UserInfo>('user/info').then(res=>{console.log(res)})

这样就能很舒服地拿到接口返回的数据类型,开发效率大大提高:

约束泛型

假设现在有这么一个函数,打印传入参数的长度,我们这么写:

functionprintLength<T>(arg:T):T{console.log(arg.length)returnarg}

因为不确定 T 是否有 length 属性,会报错:

那么现在我想约束这个泛型,一定要有 length 属性,怎么办?

可以和 interface 结合,来约束类型。

interfaceILength{length:number}functionprintLength<TextendsILength>(arg:T):T{console.log(arg.length)returnarg}

这其中的关键就是<T extends ILength>,让这个泛型继承接口 ILength,这样就能约束泛型。

我们定义的变量一定要有 length 属性,比如下面的 str、arr 和 obj,才可以通过 TS 编译。

conststr=printLength('lin')constarr=printLength([1,2,3])constobj=printLength({length:10})

这个例子也再次印证了 interface 的 duck typing。

只要你有 length 属性,都符合约束,那就不管你是 str,arr 还是obj,都没问题。

当然,我们定义一个不包含 length 属性的变量,比如数字,就会报错:

泛型的一些应用

使用泛型,可以在定义函数、接口或类的时候,不预先指定具体类型,而是在使用的时候再指定类型。

一、泛型约束类

定义一个栈,有入栈和出栈两个方法,如果想入栈和出栈的元素类型统一,就可以这么写:

classStack<T>{privatedata:T[]=[]push(item:T){returnthis.data.push(item)}pop():T|undefined{returnthis.data.pop()}}

在定义实例的时候写类型,比如,入栈和出栈都要是 number 类型,就这么写:

consts1=newStack<number>()

这样,入栈一个字符串就会报错:

这是非常灵活的,如果需求变了,入栈和出栈都要是 string 类型,在定义实例的时候改一下就好了:

consts1=newStack<string>()

这样,入栈一个数字就会报错:

特别注意的是,泛型无法约束类的静态成员。

给 pop 方法定义 static 关键字,就报错了

二、泛型约束接口

使用泛型,也可以对 interface 进行改造,让 interface 更灵活。

interfaceIKeyValue<T,U>{key:Tvalue:U}constk1:IKeyValue<number,string>={key:18,value:'lin'}constk2:IKeyValue<string,number>={key:'lin',value:18}

三、泛型定义数组

定义一个数组,我们之前是这么写的:

constarr:number[]=[1,2,3]

现在这么写也可以:

constarr:Array<number>=[1,2,3]

数组项写错类型,报错

实战 - 泛型约束后端接口参数类型

我们来看一个泛型非常有助于项目开发的用法,约束后端接口参数类型。

importaxiosfrom'axios'interfaceAPI{'/book/detail':{id:number,},'/book/comment':{id:numbercomment:string}...}functionrequest<TextendskeyofAPI>(url:T,obj:API[T]){returnaxios.post(url,obj)}request('/book/comment',{id:1,comment:'非常棒!'})

这样在调用接口的时候就会有提醒,比如:

路径写错了:

参数类型传错了:

参数传少了:

写在后面

泛型(Generics),从字面上理解,泛型就是一般的,广泛的。

泛型是指在定义函数、接口或类的时候,不预先指定具体类型,而是在使用的时候再指定类型。


泛型中的 T 就像一个占位符、或者说一个变量,在使用的时候可以把定义的类型像参数一样传入,它可以原封不动地输出

泛型在成员之间提供有意义的约束,这些成员可以是:函数参数、函数返回值、类的实例成员、类的方法等。


用一张图来总结一下泛型的好处:

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/17 12:42:48

互联网大厂Java面试实录:核心技术栈与支付金融场景深度解析

文章内容&#xff1a; 在互联网大厂Java求职面试中&#xff0c;技术考察往往紧密结合实际业务场景。本文以严肃的面试官与搞笑的水货程序员谢飞机三轮问答为线索&#xff0c;围绕Java核心技术、微服务架构、数据库、缓存、安全、消息队列、AI等技术栈&#xff0c;结合支付与金融…

作者头像 李华
网站建设 2026/6/17 12:41:33

美国货币监理署邮件系统遭入侵事件被形容为“惊人且严重“

图片来源&#xff1a;Lightspring / Shutterstock 监管机构向国会通报重大信息安全事件 美国货币监理署(OCC&#xff0c;Office of the Comptroller of the Currency)周二向国会通报了一起涉及系统管理账户的"异常交互"事件。OCC是美国财政部的独立机构&#xff0c…

作者头像 李华
网站建设 2026/6/17 1:33:14

一篇博文『标/题』浅说『标/题/党』的“威势”

夸大惊悚言不实&#xff0c;提纲挈领意预演。 笔记模板由python脚本于2026-01-31 12:45:32创建&#xff0c;本篇笔记适合正确研究标/题的coder翻阅。 学习的细节是欢悦的历程 博客的核心价值&#xff1a;在于输出思考与经验&#xff0c;而不仅仅是知识的简单复述。 Python官网…

作者头像 李华
网站建设 2026/6/17 12:42:47

企业级AI平台架构设计及AI应用架构师的前沿技术应用

目录 一、企业级AI平台架构设计核心要素 1. 基础设施层 2. 数据与治理层 3. AI开发与模型层 4. 服务与部署层 5. 安全与治理层 二、AI应用架构师的前沿技术应用方向 1. 大规模生成式AI集成 2. 实时智能决策系统 3. 边缘AI与物联网融合 4. AI驱动的软件开发革命 5. …

作者头像 李华
网站建设 2026/6/17 12:41:33

基于轮滑网站《无与轮比》购物网 任务书

目录 轮滑网站《无与轮比》购物网任务书介绍网站定位与目标核心功能模块技术支持与运营数据与安全扩展计划 项目技术支持可定制开发之功能亮点源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作 轮滑网站《无与轮比》购物网任务书介绍 网站定…

作者头像 李华
网站建设 2026/6/17 5:52:29

导师严选!8款一键生成论文工具测评:本科生毕业论文全攻略

导师严选&#xff01;8款一键生成论文工具测评&#xff1a;本科生毕业论文全攻略 2026年学术写作工具测评&#xff1a;为何值得一看&#xff1f; 随着高校论文写作需求的不断增长&#xff0c;越来越多的本科生开始寻求高效、专业的论文辅助工具。然而&#xff0c;市面上的AI论文…

作者头像 李华