当前位置: 首页 > news >正文

TypeScript-泛型

泛型(Generics)

指在定义接口,函数等类型的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性,使用泛型可以复用类型并且让类型更加灵活

泛型接口-interface

语法:在 interface 接口类型的名称后面使用 <T> 即可声明一个泛型参数,接口里的其他成员都能使用该参数的类型

interface ResData<T> {}

效果:

思路:

1️⃣ 找到可变的类型部分通过泛型<T>抽象为泛型参数(定义参数)

// 定义泛型,把可变的部分抽象成泛型参数T
interface ResData<T> {code: numbermsg: stringdata:T
}

2️⃣ 在使用泛型的时候,把具体类型传入到泛型参数位置(传参)

// 定义具体类型,使用泛型的时候传入到参数的位置
interface User {name: stringage: number
}interface Goods {id: numbergoodName: string
}let User:ResData<User> = {code:200,msg:'success',data:{name: 'lili',age:18}
}
let Goods:ResData<Goods> = {code:200,msg:'success',data:{id: 1,goodName:'裙子'}
}
console.log(User)
console.log(Goods)

泛型别名type

语法:在类型别名type的后面使用<T>即可声明一个泛型参数,接口里的其他成员都能使用该参数的类型

type ResData<T> = {}
// 定义泛型,把可变的部分抽象成泛型参数T
type ResData<T> = {code: numbermsg: stringdata:T
}
// 定义具体类型,使用泛型的时候传入到参数的位置
type User = {name: stringage: number
}type Goods = {id: numbergoodName: string
}let User:ResData<User> = {code:200,msg:'success',data:{name: 'lili',age:18}
}
let Goods:ResData<Goods> = {code:200,msg:'success',data:{id: 1,goodName:'裙子'}
}
console.log(User)
console.log(Goods)

泛型函数

语法:在函数名称的后面使用<T>即可声明一个泛型参数,整个函数中(参数、返回值、函数体) 的变量都可以使用该参数的类型

function fn<T>(){}
// 泛型函数
function createArray<T>(length: number,value: T){let res = []for(let i = 0; i < length; i++) {res[i] = value}return res
}createArray<number>(3,100)
createArray<string>(3,'100')

泛型约束

作用:泛型的特点:灵活不确定;有时候泛型函数的内部需要访问一些特定类型的数据才有的属性,此时会有类型错误,需要通过泛型约束解决

interface LengthObj {length: number
}// 限制了obj身上必须y有length属性才能通过校验
function logLen1<T extends LengthObj>(obj: T){console.log(obj.length)
}logLen1({length: 10})
logLen1(['100'])

总结:

1️⃣ 泛型的好处是什么?

增加类型的 复用性 和 灵活性

2️⃣ 泛型实现的基本方法是什么?

找到类型不确定的类型部分,定义泛型参数
定义具体类型,传入泛型参数的位置

3️⃣ 泛型约束的作用是什么?

既可以保留泛型的灵活性,又做了特定的限制

相关文章:

  • 提升(或降低)插入的内容的位置:\raisebox
  • 第十四届蓝桥杯c++研究生组
  • python 第四章 函数 (pycharm) (2)
  • 二分答案思想下的二进制问题
  • Python爬虫技术深度解析与实战案例
  • 基于51单片机简易温度计
  • 商品发布功能
  • 在VS Code中进行Java的单元测试
  • 【MySQL精通之路】InnoDB(9)-表和页压缩(1)-表压缩
  • 自由应用大本营?开源免费的Android应用商店:F-Droid Client
  • UniApp 2.0可视化开发工具:引领前端开发新纪元
  • 【前端】面试八股文——BFC
  • ubuntu-24.04系统静态Mac和IP配置
  • 【MySQL精通之路】MySQL-环境变量
  • 鹏哥C语言复习——调试
  • JS中 map, filter, some, every, forEach, for in, for of 用法总结
  • 【笔记】你不知道的JS读书笔记——Promise
  • github从入门到放弃(1)
  • github指令
  • HashMap剖析之内部结构
  • JS数组方法汇总
  • Magento 1.x 中文订单打印乱码
  • PHP那些事儿
  • react-core-image-upload 一款轻量级图片上传裁剪插件
  • Spring Cloud Alibaba迁移指南(一):一行代码从 Hystrix 迁移到 Sentinel
  • 番外篇1:在Windows环境下安装JDK
  • 技术攻略】php设计模式(一):简介及创建型模式
  • 理解 C# 泛型接口中的协变与逆变(抗变)
  • 如何设计一个比特币钱包服务
  • 用Canvas画一棵二叉树
  • 用quicker-worker.js轻松跑一个大数据遍历
  • LIGO、Virgo第三轮探测告捷,同时探测到一对黑洞合并产生的引力波事件 ...
  • 如何在招聘中考核.NET架构师
  • ​ 无限可能性的探索:Amazon Lightsail轻量应用服务器引领数字化时代创新发展
  • ​七周四次课(5月9日)iptables filter表案例、iptables nat表应用
  • #AngularJS#$sce.trustAsResourceUrl
  • #如何使用 Qt 5.6 在 Android 上启用 NFC
  • (1)bark-ml
  • (done) 两个矩阵 “相似” 是什么意思?
  • (PHP)设置修改 Apache 文件根目录 (Document Root)(转帖)
  • (第8天)保姆级 PL/SQL Developer 安装与配置
  • (附源码)计算机毕业设计ssm电影分享网站
  • (循环依赖问题)学习spring的第九天
  • (一)appium-desktop定位元素原理
  • (转)ABI是什么
  • (转)Oracle存储过程编写经验和优化措施
  • .NET/C# 中你可以在代码中写多个 Main 函数,然后按需要随时切换
  • .net遍历html中全部的中文,ASP.NET中遍历页面的所有button控件
  • /var/log/cvslog 太大
  • @vue/cli脚手架
  • [ 物联网 ]拟合模型解决传感器数据获取中数据与实际值的误差的补偿方法
  • []串口通信 零星笔记
  • [100天算法】-目标和(day 79)
  • [2016.7 day.5] T2
  • [20190401]关于semtimedop函数调用.txt