https://developer.aliyun.com/article/1192111

简介: 我写了两个函数一个是数字类型的函数,另一个是字符串类型的函数,其实就是类型不同,实现的功能是一样的,这时候我们就可以使用泛型来优化

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


ok:我们看一个小例子


函数泛型


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


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


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
}

7457446b9f3e48728ef7d97c585f1403.png


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


于是,我们就得对使用的泛型进行约束,我们约束其为具有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')


学习TypeScript15(tsconfig.json配置文件)_qq1195566313的博客-CSDN博客

目录
相关文章
学习计算机组成原理(王道考研)------第十一天https://zhengyz.blog.csdn.net/article/details/121706379?spm=1001.2014.3001.5502
这篇文章是关于计算机组成原理的王道考研学习笔记,主要介绍了半导体存储器RAM和ROM的相关知识。
学习计算机组成原理(王道考研)------第十一天https://zhengyz.blog.csdn.net/article/details/121706379?spm=1001.2014.3001.5502
|
4月前
|
监控 Shell 开发工具
https://developer.aliyun.com/article/1583352
https://developer.aliyun.com/article/1583352
|
7月前
|
C++
【C/C++ 编程 入门篇】 if条件判断表达式的使用教程
https://developer.aliyun.com/article/1465430
141 0
|
5月前
|
存储 PyTorch 调度
https://developer.aliyun.com/article/1564927(7)
Transformers 4.37 中文文档(十九)
132 2
|
5月前
|
存储 Ubuntu Linux
https://blog.csdn.net/a1657054242/article/details/139965955?spm=1001.2014.3001.5502
https://blog.csdn.net/a1657054242/article/details/139965955?spm=1001.2014.3001.5502
46 0
|
6月前
针对持续不断的产品市场制造商的自动攻击合成 https://developer.aliyun.com/article/1512648?spm=a2c6h.13262185.profile.22.7e32b28arRWTOH T恤或卫衣 针对持续不断的产品市场制造商的自动攻击合成 针对持续不断的产品市场制造商的自动攻击合成
针对持续不断的产品市场制造商的自动攻击合成 https://developer.aliyun.com/article/1512648?spm=a2c6h.13262185.profile.22.7e32b28arRWTOH T恤或卫衣 针对持续不断的产品市场制造商的自动攻击合成 针对持续不断的产品市场制造商的自动攻击合成
53 0
|
7月前
|
Java Unix Linux
https://developer.aliyun.com/article/1495767
https://developer.aliyun.com/article/1495767
|
7月前
|
JSON 前端开发 数据格式
https://tigerhhzz.blog.csdn.net/article/details/129961946?spm=1001.2014.3001.5502
https://tigerhhzz.blog.csdn.net/article/details/129961946?spm=1001.2014.3001.5502
46 0
|
7月前
https://developer.aliyun.com/article/1417518
https://developer.aliyun.com/article/1417518
62 0
|
3月前
|
监控 安全 搜索推荐
设置 HTTPS 协议以确保数据传输的安全性
设置 HTTPS 协议以确保数据传输的安全性