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 相关文章推荐
js获得鼠标的坐标值的方法
Mar 13 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 Javascript
原生javascript单例模式的应用实例分析
Feb 23 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 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
php数字转汉字代码(算法)
2011/10/08 PHP
PHP预定义变量9大超全局数组用法详解
2016/04/23 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
摘自启点的main.js
2008/04/20 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
初步理解Python进程的信号通讯
2015/04/09 Python
Python3中的真除和Floor除法用法分析
2016/03/16 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
交通法规咨询中心工作职责
2013/11/27 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
python中数组和列表的简单实例
2022/03/25 Python