一、定义

比如我们有一个函数,如果不使用范型是这样的

function getData(arg: number): number {return arg;
}
复制代码

它只能传入number类型,如果我们要传入一个string类型的是编译不通过的,所以我们可以写另一个函数或者用any类型

function getData1(arg: string): string {return arg;
}
function getData2(arg: any): any {return arg;
}
复制代码

那么问题来了,如果重新写那么我们就不能做到复用了,如果用any就不能保证传进去的类型和传出来的类型统一,所以我们有了范型

function getData<T>(arg: T): T {return arg;
}
getData<number>(123)
getData<string>(123)
getData(false)//利用了类型推论,编译器会根据传入的参数自动地帮助我们确定T的类型
复制代码

T:表示范型,具体什么类型是调用的这个方法的时候决定的(注意:T也可以是任意其他字母) 所以范型可以支持不确定的数据类型,传入的参数和返回值的类型一致。

二、范型变量

如果我们想打印一个数组的长度

function getLength<T>(arg: T): T {console.log(arg.length);  // Error: T doesn't have .lengthreturn arg;
}
复制代码

如果这么做,编译器会报错说我们使用了arg的.length属性,但是没有地方指明arg具有这个属性。 记住,这些类型变量代表的是任意类型,所以使用这个函数的人可能传入的是个数字,而数字是没有.length属性的。
现在假设我们想操作T类型的数组而不直接是T。由于我们操作的是数组,所以.length属性是应该存在的。 我们可以像创建其它数组一样创建这个数组:

function getLength<T>(arg: T[]): T[] {console.log(arg.length);  // Array has a .length, so no more errorreturn arg;
}
复制代码

三、范型类

泛型类使用(<>)括起泛型类型,跟在类名后面。

class Minclass<T> {public list: T[] = []add(value: T):void {this.list.push(value)}min():T{let minNum = this.list[0]for(let i =0; i < this.list.length; i++){if(minNum > this.list[i]){minNum = this.list[i]}}return minNum}
}
let m = new Minclass<number>()
m.add(2)
m.add(6)
m.min() //2
let s = new Minclass<string>()
s.add('m')
s.add('c')
s.min()//c
复制代码

四、范型接口

interface ConfigFn{<T>(value:T):T
}
let getData:ConfigFn = function<T>(value:T):T{return value
}
复制代码

通用范型接口:

function getData<T>(value:T):T{return value
}
interface ConfigFn<T>{(value:T):T
}
let getData:ConfigFn<string> = getData
let getData1:ConfigFn<number> = getData复制代码

五、在泛型约束中使用类型参数

class User{username: stringpassword: string
}
class Mysql{add (user:User):boolean{console.log(user)return true}
}
let u = new User()
u.username = '张三'
u.password = '123'
let m = new Mysql()
m.add(u)
复制代码

我们可以通过范型约束来更好的实现上面的代码

class Mysql<T>{add(info:T):boolean{console.log(Info)return true}
}
let u = new User()
u.username = '张三'
u.password = '123'
let my = new Mysql<User>()
my.add(u)
复制代码

转载于:https://juejin.im/post/5d0b7c03f265da1b8811e265

TypeScript中的范型相关推荐

  1. 分析 C# 2.0 新特性 -- 范型(Generics)

    分析 C# 2.0 新特性 -- 范型(Generics) 作者:梁振[MS-MVP]   范型是提高面向对象程序多态性设计衍生的. 1,C# 多态性设计回顾和展望 在引入范型这个概念之前,回顾一下1 ...

  2. 「Java基础」范型

    范型概述 1 范型是为了解决什么问题? 范型的出现是为了解决安全问题,它限制数据传入的类型,下面举例说明 // Demo1: 不使用范型ArrayList al = new ArrayList(); ...

  3. Objective C范型

    范型 范型编程是一种程序语言设计范式,它允许程序员在使用强类型的语言编写代码的时候,延迟确定具体的类型. 以Swift代码为例,假如有一个需求是要交换两个int,很容易写出类似代码 func swap ...

  4. Java范值_Java范型

    定义类的时候,不为类的属性或方法的参数设置具体的类型,只使用一个标记表示,类使用的时候才动态地绑定一种数据类型,这就是范型. 如果应用使用了范型的类时没有指定类型,则会使用默认的类型Object. 1 ...

  5. Typescript之 范型

    范型 typescript在javascript基础上扩充了类型,并且可以进行静态类型检查.它在某种成都上限制javascript的灵活性,但是这种限制是必要的,在类型体系内提供灵活性,才是可控的.范 ...

  6. ?通配符 以及扩展通配符在范型中的应用。。。。。。。。。。。。。。。。。。...

    一.通配符 ?标识的范型化对象,可以标识任意类型的范型化   ,可以将任意类型化的值赋值给 ?通配符所规范化的类.  可以将任意类型的范型化类型  赋值给?通配符范型化的类型 . Collection ...

  7. Java中的generics范型

    简介generics范型 Generics 范型 构造范型 范型的优点 Wildcards 使用通配符 Generics 范型 范型意味着参数化类型.所操作的数据类型都被指定为一个参数 范型可以为接口 ...

  8. TypeScript中interface 与 type的区别,你真的懂吗?

    在写 ts 相关代码的过程中,总能看到 interface 和 type 的身影.它们的作用好像都一样的,相同的功能用哪一个都可以实现,也都很好用,所以也很少去真正的理解它们之间到底有啥区别, 分别在 ...

  9. TypeScript中type和interface区别

    typescript中interface介绍:TypeScript 中的接口 interface_疆~的博客-CSDN博客通常使用接口(Interface)来定义对象的类型.https://blog. ...

最新文章

  1. 【收藏】23个机器学习最佳入门项目(附源代码)
  2. 数字信号处理篇(一) 采样定理
  3. php数组函数(分类基本数组函数,栈函数,队列)
  4. nginx location 匹配 多个规则_三道小练习助你弄懂 Nginx location 匹配
  5. C语言 二叉树顺序存储结构的先序遍历算法
  6. 淄博神爱计算机官网,【最美教师】张萍:大爱无言 育人无声
  7. 架构师必备!java三大特性用代码表现
  8. 老兵不死:Radionomy正式宣布收购Winamp
  9. 如何用jsp和mysql实现简单的登陆功能
  10. 北斗/GPS模块输出的NMEA 0183语句详解
  11. iOS测试之移动App测试指南
  12. Arcscan自动矢量化
  13. 安信可nbiot模块_安信可无线模组
  14. tushare获取上证50成分股与权重写入mysql
  15. 计算机ppt里怎么应用背景图,如何在PowerPoint2013中为幻灯片设置背景图片 -电脑资料...
  16. 论文阅读:ICCV2021 TransReID: Transformer-based Object Re-Identifification
  17. 福州市建筑物矢量数据(Shp格式+带高度)
  18. 机械加工中304不锈钢与316不锈钢有什么区别?
  19. 样本总体方差有偏估计和无偏估计的理解
  20. java中输入日期_Java中的日期操作

热门文章

  1. Step 7 professional V5.6 安装问题
  2. 用python函数画德国国旗代码_Python使用Turtle模块绘制五星红旗代码示例
  3. 百度不收录怎么办(网站不收录的原因探讨)
  4. 春节感悟 - 成就越大的人越谦和是错觉
  5. Steam更新文件损坏解决方法
  6. 用Python在Excel里画出蒙娜丽莎的方法示例
  7. Oracle SQL递归查询START WITH CONNECT BY 查询父子关系
  8. B站黑马测试第二篇P206视频数据库SQL语句‘关联查询_数据准备‘代码
  9. 知识图谱下一站:认知智能
  10. 爱心传递|中国善网助力乡村教育