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试卷自动排版系统
Jul 18 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
基于jquery实现的表格分页实现代码
Jun 21 Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 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 fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
Python 线程池用法简单示例
2019/10/02 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
销售经理岗位职责
2014/03/16 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python