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 相关文章推荐
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
JS数组方法reverse()用法实例分析
Jan 18 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
一个分页的论坛
2006/10/09 PHP
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
PHP通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
js数组的操作指南
2014/12/28 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
Python与R语言的简要对比
2017/11/14 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
什么是lambda函数
2013/09/17 面试题
拖鞋店创业计划书
2014/01/15 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android