TS 类型兼容教程示例详解


Posted in Javascript onSeptember 23, 2022

类型兼容

因为JS语言不慎过于领过, 真实开发场景中往往无法做到严格一致的类型约束,此时TS就不得不做类型兼容

  • 顶类型:unknown -- 任何类型都可以赋值给unknown
  • 底类型:never -- never兼容任何类型(可以赋值给任何类型)
  • any: 其实不是一个类型,它是一个错误关闭器,用了any就等同于放弃了类型约束

TS 类型兼容教程示例详解

TS 类型兼容教程示例详解

简单类型兼容

子集可以赋值给父级

type name = string | number

stringnumber 都是 类型name 的子集

普通对象兼容

属性多的可以赋值给属性少的,前提是有共同属性

  • 属性越多,限制越多,表示的集合越小(符合条件的对象越少)
  • 属性越少,限制越少,表示的集合越大
type Person = {
  name: string
  age: number
}
let user = {
  name: 'liu',
  age: 20,
  email: ''
}
let p: Person = user

函数兼容

参数数量不一致

数量少的兼容数量多的,前提为类型一致

TS 类型兼容教程示例详解

只要参数部分能够找到对应的位置就用**==绿色箭头==,否则为==红色箭头==**,当参数全为绿色箭头时,最左侧的箭头就为绿色,代表函数可以兼容

参数类型不一致

参数部分: 子类可以兼容父类,则函数整体不能兼容,

MyMouseEventMyEvent 的子类,所以mouseListener 不兼容 listener

==对参数要求多的函数不能赋值给对参数要求少的函数==

MyEventMyMouseEvent 的父类,所以listener 兼容 mouseListener

TS 类型兼容教程示例详解

返回不同

返回值属性多集合小 可以 兼容 返回值属性少集合大

TS 类型兼容教程示例详解

以上就是TS 类型兼容教程示例详解的详细内容,更多关于TS 类型兼容的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript new一个对象的实质
Jan 07 Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
vue实现全选、反选功能
Nov 17 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
JS document form表单元素操作完整示例
Jan 13 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
TS 类型收窄教程示例详解
Sep 23 #Javascript
JavaScript实现简单的音乐播放器
Aug 14 #Javascript
vue实现简易音乐播放器
Aug 14 #Vue.js
Vue3实现简易音乐播放器组件
Aug 14 #Vue.js
element tree树形组件回显数据问题解决
Aug 14 #Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 #Vue.js
JavaScript实现音乐播放器
You might like
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
Python实现的选择排序算法示例
2017/11/29 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
使用Scrapy爬取动态数据
2018/10/21 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
总经理助理的八要求
2013/11/12 职场文书
保险经纪人求职信
2014/03/11 职场文书
经管应届生求职信范文
2014/05/18 职场文书
法人委托书范本
2014/09/15 职场文书
技术员岗位职责
2015/02/04 职场文书
绵山导游词
2015/02/05 职场文书
详解Vue的options
2021/05/15 Vue.js