类中的泛型使用:

我们在写一个基本class类 在构造函数中需要传递一组女角色的名称,然后通过getGirlsNmae发方法展示女角色的名称

class GirlRole{constructor(private girls:string[]){}getGirlsNmae(index:number):string{return this.girls[index]}
}
let girl = new GirlRole(["虚空之女","希维尔","暗影猎手","霞"])
girl.getGirlsNmae(1)
console.log(girl.getGirlsNmae(1))
//终端控制台打印结果:希维尔

现在更好的保护角色的私密性,这些角色使用编号了,那我们程序就应该这样修改一下

class GirlRole{constructor(private girls:string[]|number[]){}getGirlsNmae(index:number):string|number{return this.girls[index]}
}
let girl = new GirlRole(["虚空之女","希维尔","暗影猎手","霞"])
girl.getGirlsNmae(1)
console.log(girl.getGirlsNmae(1))

很显然上述的代码是没有问题,但不够优雅,代码看起来比较复杂
这个时候可以使用泛型来解决这个问题,在我们日常编写发杂的代码时候 泛型是经常被使用的

class GirlRole<T>{constructor(private girls:T[]){}getGirlsNmae(index:number):T{return this.girls[index]}
}
let girl = new GirlRole(["虚空之女","希维尔","暗影猎手","霞"])
girl.getGirlsNmae(1)
console.log(girl.getGirlsNmae(0))
//终端控制台输出结果:虚空之女

我们使用了泛型,程序也没有报错,但是你会发现我们在实例化对象的时候,类型是通过推断出的
我们说过在使用了泛型,最好不要使用类型推断
所以我们可以这样写

  let girl = new GirlRole<string>(["虚空之女","希维尔","暗影猎手","霞"])
泛型中的继承:

现在需求又变了,要求返回是一个对象中的roleName,也就是下面的代码要改成这个样子。

getGirlsNmae(index:number):string{return this.girls[index].roleName
}

之前的代码肯定是报错的
但是这时候还要求我们这么做,意思就是说传递过来的值必须是一个对象类型的,里边还要有roleName属性。
这时候就要用到继承了,我用接口的方式来实现。写一个Role的接口,每个接口里都要有 roleName 属性。代码如下:

interface Role{roleName:string
}

有了接口我们可以使用extends关键字实现泛型的继承

class GirlRole extends Role{...}

这句代码的意思是泛型里必须有一个roleName属性,因为它继承了Role接口。
这时候应该是一个string类型才对,所以代码应该改为下面的样子:

interface Role{roleName:string
}class GirlRole <T extends Role>{constructor(private girls:T[]){}getGirlsNmae(index:number):string{return this.girls[index].roleName}
}
let girlRole = new GirlRole([{roleName:"虚空之女"},{roleName:"希维尔"},{roleName:"暗影猎手"},{roleName:"霞"},
])
girlRole.getGirlsNmae(0)
console.log(girlRole.getGirlsNmae(0))
//打印结果:虚空之女
泛型的约束:

现在的泛型可以是任意类型,可以是对象、字符串、布尔、数字都是可以的。
但现在要求这个泛型必须是string或者number类型。我们还是拿上面的例子,不过把代码改为最初的样子。

class GirlRole <T>{constructor(private girls:T[]){}getGirlsNmae(index:number):T{return this.girls[index]}
}
let girl = new GirlRole(["虚空之女","希维尔","暗影猎手","霞"])

然后进行约束,这时候还是可以使用关键字extends来进行约束,把代码改成下面的样子

class GirlRole <T extends string|number>{constructor(private girls:T[]){}getGirlsNmae(index:number):T{return this.girls[index]}
}let girl = new GirlRole(["虚空之女","希维尔","暗影猎手","霞"])

上面就是最基本泛型讲解,在实际工作中,泛型的应用更广泛更复杂
一起学习,一起加油!!!

TypeScript从入门到精通(二十一)类中的泛型相关推荐

  1. Vue3+TypeScript从入门到精通系列之:泛型接口

    Vue3+TypeScript从入门到精通系列之:泛型接口 一.TypeScript的泛型接口代码 二.TypeScript的泛型接口代码转化为js代码 三.泛型接口.js输出如下所示 一.TypeS ...

  2. Mybatis从入门到精通二(入门详解)

    Mybatis从入门到精通二(想学Mybatis,看了这一篇你就不需要其他的了) 本课程分为两天第一天的请参考: https://blog.csdn.net/weixin_43564627/artic ...

  3. java从入门到精通二十四(三层架构完成增删改查)

    java从入门到精通二十四(三层架构完成增删改查) 前言 环境准备 创建web项目结构 导入依赖和配置文件 创建层次模型 实现查询 实现添加 实现修改 完成删除 做一个用户登录验证 会话技术 cook ...

  4. java从入门到精通二十三(Servlet)

    java从入门到精通二十三(Servlet) Servlet 说明 Servlet初步入门尝试 Servlet生命周期 Servlet方法说明和体系结构 方法说明 体系结构说明 一些优化封装 urlP ...

  5. Kali Linux 从入门到精通(二)-安装

    Kali Linux 从入门到精通(二)-安装 Kail Linux 安装 持久加密USB安装-1 LUSK:Linux Unified Key Setup 磁盘分区加密规范 不依赖与操作系统的磁盘级 ...

  6. Vue3+TypeScript从入门到精通系列之:Try changing the lib compiler option to es2015 or later

    Vue3+TypeScript从入门到精通系列之:Try changing the lib compiler option to es2015 or later tsc ./泛型接口.ts tsc编译 ...

  7. Reflex WMS入门系列之二十一:关闭一个不需要的盘点

    Reflex WMS入门系列之二十一:关闭一个不需要的盘点 仓库管理实践中,如果业务人员创建好了一个盘点,发现后续暂时不需要执行实际的库存清点工作,或者本次盘点因故取消,或者发现该盘点数据有误需要关闭 ...

  8. MyBatis从入门到精通(二):MyBatis XML方式的基本用法之Select

    最近在读刘增辉老师所著的<MyBatis从入门到精通>一书,很有收获,于是将自己学习的过程以博客形式输出,如有错误,欢迎指正,如帮助到你,不胜荣幸! 1. 明确需求 书中提到的需求是一个基 ...

  9. Scala入门到精通——第二十一节 类型参数(三)-协变与逆变

    本节主要内容 协变 逆变 类型通匹符 1. 协变 协变定义形式如:trait List[+T] {} .当类型S是类型A的子类型时,则List[S]也可以认为是List[A}的子类型,即List[S] ...

最新文章

  1. PostgreSQL获取年月日
  2. Pytho学习笔记:错误,测试,调试(合)
  3. Android布局中涉及的一些属性
  4. html鼠标悬停区域拉伸,html – :将鼠标悬停在具有边框半径的div上
  5. 下拉框_jQuery 美化界面的下拉框
  6. python-布尔数据
  7. 解决VMware在Windows 7上无法上网的问题
  8. android surface windows,Android易混概念辨析之Surface,Window,View,SurfaceView,Bitmap
  9. CCD和CMOS的的相同点和差异
  10. 下载谷歌浏览器和谷歌驱动
  11. python查看字符编码值_Python 字符编码
  12. C语言实验——简单排序
  13. 为什么要测款,直通车测款怎样设置
  14. ERP系统各子系统功能模块页面
  15. 类似组卷网实现快速组卷功能,实现试题,试卷,课件快速录入、搜索、分类查询,支持mathtype和latex2word。
  16. Shapefile属性操作之增
  17. Ubuntu设置仅允许特定用户或特定IP通过ssh访问
  18. 全国计算机等级考试二级三级对应,全国计算机等级考试三级(网络技术)对应的是三级A还是三级B?...
  19. 【leetcode_1220】【困难】count-vowels-permutation / 统计元音字母序列的数目
  20. 【电子邮件提醒】用python写个能发邮件的脚本

热门文章

  1. 手把手带你刷Leetcode力扣 学习总结
  2. Html5-如何正确给table加边框
  3. kali linux u盘 起不来,u盘怎么装系统步骤如下u盘安装kali linux 检测不到cd rom
  4. C++ 栈实现回文数判断
  5. HTML轴线怎么设置,cad怎么设置轴线
  6. Python3 网络爬虫快速入门实战解析
  7. Python学习:数据类型转换的方法教程
  8. python的时间函数
  9. webstrom 激活操作
  10. moment.js的使用方法和日期格式化介绍