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
Nov 26 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
JS中的public和private对象,即static修饰符
Jan 18 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
vue中的使用token的方法示例
Mar 10 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 Javascript
vue实现简单计算商品价格
Sep 14 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
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
python发送伪造的arp请求
2014/01/09 Python
Python异常学习笔记
2015/02/03 Python
在Django的URLconf中使用命名组的方法
2015/07/18 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
django输出html内容的实例
2018/05/27 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
日语专业推荐信
2013/11/12 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js