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 相关文章推荐
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
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中session过期时间设置及session回收机制介绍
2014/05/05 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
JS中的BOM应用
2018/02/02 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
Python中的匿名函数使用简介
2015/04/27 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
Django如何将URL映射到视图
2019/07/29 Python
python实现井字棋小游戏
2020/03/04 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
自考生毕业自我鉴定
2013/10/10 职场文书
中学生期末评语
2014/02/03 职场文书
副总经理任命书
2014/06/05 职场文书
旷课检讨书范文
2015/01/27 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
酒店厨房管理制度
2015/08/06 职场文书
2016年十一促销广告语
2016/01/28 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS