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正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
js图片实时加载提供网页打开速度
Sep 11 Javascript
使用angular写一个hello world
Jan 23 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 Javascript
Nest.js散列与加密实例详解
Feb 24 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+ajax实现的点击浏览量加1
2015/04/16 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
javascript parseInt与Number函数的区别
2010/01/21 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
python进阶教程之循环对象
2014/08/30 Python
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
django数据库自动重连的方法实例
2019/07/21 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
印尼网上商店:Alfacart.com
2019/03/11 全球购物
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
迟到检讨书500字
2014/02/05 职场文书
公司聘任书模板
2014/03/29 职场文书
2014年清明节寄语
2014/04/03 职场文书
英语教师求职信
2014/06/16 职场文书
雷人标语集锦
2014/06/19 职场文书
写字楼租赁意向书
2014/07/30 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL