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 相关文章推荐
prototype 中文参数乱码解决方案
Nov 09 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
Sep 22 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
JS 数组基本用法入门示例解析
Jan 16 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上传文件问题汇总
2015/01/30 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
Python守护进程和脚本单例运行详解
2017/01/06 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
Python 学习教程之networkx
2019/04/15 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
Django websocket原理及功能实现代码
2020/11/14 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
保安拾金不昧表扬信
2014/01/15 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
公司年底活动方案
2014/08/17 职场文书
美容院合作经营协议书
2014/10/10 职场文书
小学元宵节活动总结
2015/02/06 职场文书
超市员工辞职信范文
2015/05/12 职场文书
入党转正申请报告
2015/05/15 职场文书
小学六年级毕业感言
2015/07/30 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP