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

TypeSript8 泛型学习

泛型泛型在TypeScript 是很重要的东西 例如vue3 是用ts编写的 里面用到了非常多的泛型

函数泛型

我写了两个函数一个是数字类型的函数,另一个是字符串类型的函数,其实就是类型不同,

实现的功能是一样的,这时候我们就可以使用泛型来优化

function num (a:number,b:number) : Array<number> {
    return [a ,b];
}
num(1,2)
function str (a:string,b:string) : Array<string> {
    return [a ,b];
}
str('独孤','求败')


泛型优化

语法为函数名字后面跟一个<参数名> 参数名可以随便写 例如我这儿写了T

当我们使用这个函数的时候把参数的类型传进去就可以了 (也就是动态类型)

function Add<T>(a: T, b: T): Array<T>  {
    return [a,b]
}
 
Add<number>(1,2)
Add<string>('1','2')


我们也可以使用不同的泛型参数名,只要在数量上和使用方式上能对应上就可以。

function Sub<T,U>(a:T,b:U):Array<T|U> {
    const params:Array<T|U> = [a,b]
    return params
}
 
 
Sub<Boolean,number>(false,1)


定义泛型接口

声明接口的时候 在名字后面加一个<参数>

使用的时候传递类型

interface MyInter<T> {
   (arg: T): T
}
 
function fn<T>(arg: T): T {
   return arg
}
 
let result: MyInter<number> = fn
 
result(123)


对象字面量泛型


let foo: { <T>(arg: T): T }
 
foo = function <T>(arg:T):T {
   return arg
}
 
foo(123)


泛型约束


我们期望在一个泛型的变量上面,获取其length参数,但是,有的数据类型是没有length属性的

function getLegnth<T>(arg:T) {
  return arg.length
}


 这时候我们就可以使用泛型约束

于是,我们就得对使用的泛型进行约束,我们约束其为具有length属性的类型,这里我们会用到interface,代码如下

interface Len {
   length:number
}
 
function getLegnth<T extends Len>(arg:T) {
  return arg.length
}
 
getLegnth<string>('123')


使用keyof 约束对象


其中使用了TS泛型和泛型约束。首先定义了T类型并使用extends关键字继承object类型的子类型,然后使用keyof操作符获取T类型的所有键,它的返回 类型是联合 类型,最后利用extends关键字约束 K类型必须为keyof T联合类型的子类型

function prop<T, K extends keyof T>(obj: T, key: K) {
   return obj[key]
}
 
 
let o = { a: 1, b: 2, c: 3 }
 
prop(o, 'a') 
prop(o, 'd') //此时就会报错发现找不到


泛型类


声明方法跟函数类似名称后面定义<类型>

使用的时候确定类型new Sub<number>()

class Sub<T>{
   attr: T[] = [];
   add (a:T):T[] {
      return [a]
   }
}
 
let s = new Sub<number>()
s.attr = [1,2,3]
s.add(123)
 
let str = new Sub<string>()
str.attr = ['1','2','3']
str.add('123')

TypeSript9 命名空间namesapce-CSDN博客

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 【算法进阶1】贪心算法、背包问题(0-1背包、分数背包)、拼接最大数字问题、活动选择问题
  • 6 - Linux PXE高效批量网络装机
  • CacheLoader和装饰器模式
  • 无刷电机、有刷电机和步进电机的区别
  • 初赛笔记1
  • OD C卷 - 项目排期/最少交付时间
  • 新手学习打怪之编译安装LAMP和LNMP
  • PCL 点云ISS关键点提取算法
  • 《陈天奇:机器学习科研的十年》阅读笔记
  • SP: leopold (v1.2)
  • 《通义千问AI落地—下》:WebSocket详解
  • 学习记录:js算法(十六):四数之和
  • 渗透课程第二阶段--Part8--XXE渗透与防御
  • 激活函数的创新之旅:在PyTorch中自定义激活函数
  • 常用PHP JS MySQL 常用方法记录
  • avalon2.2的VM生成过程
  • github从入门到放弃(1)
  • JAVA SE 6 GC调优笔记
  • Quartz初级教程
  • 阿里云前端周刊 - 第 26 期
  • 测试开发系类之接口自动化测试
  • 电商搜索引擎的架构设计和性能优化
  • 构造函数(constructor)与原型链(prototype)关系
  • 记一次和乔布斯合作最难忘的经历
  • 每天10道Java面试题,跟我走,offer有!
  • 融云开发漫谈:你是否了解Go语言并发编程的第一要义?
  • 适配mpvue平台的的微信小程序日历组件mpvue-calendar
  • 思维导图—你不知道的JavaScript中卷
  • 小程序01:wepy框架整合iview webapp UI
  • 基于django的视频点播网站开发-step3-注册登录功能 ...
  • ​​​​​​​STM32通过SPI硬件读写W25Q64
  • ​Java并发新构件之Exchanger
  • ​数据链路层——流量控制可靠传输机制 ​
  • ​总结MySQL 的一些知识点:MySQL 选择数据库​
  • #QT 笔记一
  • %check_box% in rails :coditions={:has_many , :through}
  • (C++17) optional的使用
  • (C++17) std算法之执行策略 execution
  • (C语言)fread与fwrite详解
  • (更新)A股上市公司华证ESG评级得分稳健性校验ESG得分年均值中位数(2009-2023年.12)
  • (九)c52学习之旅-定时器
  • (十)c52学习之旅-定时器实验
  • (一)【Jmeter】JDK及Jmeter的安装部署及简单配置
  • (已解决)vue+element-ui实现个人中心,仿照原神
  • .NET使用存储过程实现对数据库的增删改查
  • .Net转Java自学之路—基础巩固篇十三(集合)
  • .so文件(linux系统)
  • /usr/bin/perl:bad interpreter:No such file or directory 的解决办法
  • [ 数据结构 - C++] AVL树原理及实现
  • [20190416]完善shared latch测试脚本2.txt
  • [Android]Android P(9) WIFI学习笔记 - 扫描 (1)
  • [ASP.NET MVC]Ajax与CustomErrors的尴尬
  • [BJDCTF2020]Easy MD51
  • [bug总结]: Feign调用GET请求找不到请求体实体类
  • [BZOJ 4129]Haruna’s Breakfast(树上带修改莫队)