news 2026/5/1 9:47:40

Typescript——泛型

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Typescript——泛型

一、问题的引入

需求:创建一个函数,我想要传入啥参数,就返回啥,传入的参数和返回的值的类型相同,那么针对这个需求,我们应该如何去做,大家很快就会想到下面的这种办法。

functionhhh(value:number):number{returnvalue}

但是这样写只能接收数字们不能适合其他的类型,这样就不能实现需求,

那如何写呢?

functionhhh(value:any):any{returnvalue}

这样将参数的类型修改成any,这个能实现,但是意义在哪,这不就失去了TS最本身的对类型的保护了吗,这样写实在是不安全。

那么我们该如何写:

functionhhh<Type>(value:Type):Type{returnvalue}functionhhh<T>(value:T):T{returnvalue}

二、什么是泛型?

泛型就是可以在保证类型安全的前提下,让函数等多种类型一起工作,从而去实现复用。

常见使用的地方:函数、接口、class中。

定义泛型函数:
functionhhh<Type>(value:Type):Type{returnvalue}functionhhh<T>(value:T):T{returnvalue}

在函数名称的后面添加 <>(尖括号),尖括号中添加类型变量,比如此处的 Type ,是一种特殊类型的变量,它处理类型而不是值该类型变量相当于一个类型容器,能够捕获用户提供的类型,就是你写的是啥类型,就会可以给你捕获出来,可以实现任意合法变量传入和返回值需求的实现。

泛型函数的调用:
constnum=hhh<number>(10)conststr=hhh<string>('a')
简化的写法:
// 省略 <number> 调用函数letnum=hhh(10)letstr=hhh('a')
  • 推荐:使用这种简化的方式调用泛型函数,使代码更短,更易于阅读

  • 说明:当编译器无法推断类型或者推断的类型不准确时,就需要显式地传入类型参数

三、泛型的约束

默认情况下,泛型函数的类型变量 Type 可以代表多个类型,这导致无法访问任何属性,比如length属性,这个时候就要为泛型添加约束来收缩类型。有两个方式:

直接指定添加的具体的类型
functionid<Type>(value:Type[]):Type[]{console.log(value.length)returnvalue}

这个时候就能访问这个length属性了。

添加约束
  1. 创建描述约束的接口 ILength,该接口要求提供 length 属性

  2. 通过 extends关键字使用该接口,为泛型(类型变量)添加约束

  3. 该约束表示:传入的类型必须具有 length 属性

// 创建一个接口interfaceILength{length:number}// Type extends ILength 添加泛型约束functionhhh<TypeextendsILength>(value:Type):Type{console.log(value.length)returnvalue}

四、泛型可以有多个变量类型

泛型的类型变量可以有多个,并且类型变量之间还可以约束(比如,第二个类型变量受第一个类型变量约束) 比如,创建一个函数来获取对象中属性的值:

functionhhh<Type,KeyextendskeyofType>(obj:Type,key:Key){returnobj[key]}letperson={name:'jack',age:18}hhh(person,'name')

五、泛型接口和泛型的配合

// 泛型接口作为函数返回值类型interfaceResult<T>{success:boolean;data:T;}// 函数返回泛型接口,适配不同返回值类型functiongetResult<T>(data:T):Result<T>{return{success:true,data};}// 使用:传入字符串,返回Result<string>constres1=getResult("Hello 泛型");// 传入对象,返回Result<{name: string}>constres2=getResult({name:"张三"});
  • 泛型接口核心:interface 接口名 { … },用T占位类型;

  • 使用时:接口名<具体类型>,比如Data、Result;

  • 优势:一套接口适配多种类型,不用重复写多个相似接口。

六、总结

核心解决的问题

  • 泛型弥补了 “单一类型函数复用性差” 和 “any 类型丢失类型保护” 的缺陷,既能实现函数 / 接口 / 类的通用化,又能严格约束输入输出的类型一致性。

核心语法与使用

  • 定义:在函数 / 接口 / 类名称后通过<T>(T 为类型变量,可自定义命名)声明泛型,T 作为 “类型容器” 捕获用户传入的具体类型;

  • 调用:推荐省略显式类型(如hhh(10)),TS 会自动推断类型,仅在推断失效时显式指定(如hhh<string>('a'))。

关键扩展能力

  • 泛型约束:通过extends关键字收缩类型范围(如Type extends ILength),解决泛型无法访问属性的问题;

  • 多泛型变量:支持多个类型变量且可相互约束(如Key extends keyof Type),适配对象属性访问等复杂场景;

  • 泛型接口:接口定义时声明<T>,使用时指定具体类型(如Result<string>),实现一套接口适配多类数据结构。

核心优势

  • 兼顾 “复用性” 与 “类型安全”,避免重复编写相似的类型定义,同时保留 TS 的类型校验能力,是实现通用化、可扩展 TS 代码的核心手段。
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/1 5:44:17

为什么现代 C++ 更推荐用引用,而不是指针?

现代 C&#xff08;C11 及以后&#xff09;强烈推荐优先使用引用&#xff08;references&#xff09;而不是裸指针&#xff08;raw pointers&#xff09;&#xff0c;核心原因可以用一句话概括&#xff1a; 引用在表达意图、安全性、可读性和现代设计模式上都比裸指针更优秀&a…

作者头像 李华
网站建设 2026/4/30 20:10:20

白盒测试 接口测试 自动化测试

一、什么是白盒测试 白盒测试是一种测试策略&#xff0c;这种策略允许我们检查程序的内部结构&#xff0c;对程序的逻辑结构进行检查&#xff0c;从中获取测试数据。白盒测试的对象基本是源程序&#xff0c;所以它又称为结构测试或逻辑驱动测试&#xff0c;白盒测试方法一般分为…

作者头像 李华
网站建设 2026/4/18 23:44:54

CTF Writeup:Web题型之XSS漏洞挖掘与利用技巧

引言 一、XSS漏洞分类 存储型XSS&#xff1a;恶意脚本被存储到服务器数据库&#xff0c;每次访问页面都会执行&#xff0c;危害最大&#xff1b; 反射型XSS&#xff1a;恶意脚本通过URL参数注入&#xff0c;仅在当前请求中执行&#xff0c;需诱导用户点击&#xff1b; DOM型…

作者头像 李华
网站建设 2026/5/1 5:46:46

2026 网络安全 0 到 1!保姆级学习路线,零基础直接抄作业

网络安全从0到1&#xff0c;保姆级学习路线&#xff08;2026&#xff09; 一、前言&#xff1a;网络安全为什么值得学&#xff1f; 在数字化浪潮下&#xff0c;网络攻击事件频发&#xff08;数据泄露、勒索病毒、APT 攻击等&#xff09;&#xff0c;企业对安全人才的需求缺口持…

作者头像 李华
网站建设 2026/5/1 8:38:26

基于python的家教预约服务平台vue3

目录 家教预约服务平台的技术架构核心功能模块技术实现要点扩展功能方向 项目技术支持可定制开发之功能亮点源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作 家教预约服务平台的技术架构 该平台采用前后端分离架构&#xff0c;前端使用Vue3…

作者头像 李华