TS 类型收窄教程示例详解


Posted in Javascript onSeptember 23, 2022

类型收窄之前只能使用公共方法

JS方法

typeof

缺点

  • typeof null —→ object
  • typeof 数组 —→ object
  • typeof 日期 —→ object

a instanceof A : A 是否出现在a的原型链上

缺点

不支持stringnumberboolean 等原始类型

不支持TS的 自定义类型,如下:

type Person {
  name: string
}
  • key in obj
  • Array.isArray()

??类型谓词is

重点在 shape is Rect

type Rect = {
  width: number
  height: number
}
type Circle = {
  center: [number, number]
  radius: number
}
const area = (shape: Rect | Circle): number => {
  if(isRect(shape)) {
    return shape.width * shape.height
  } else {
    return Math.PI * shape.radius ^ 2
  }
}
const isRect = (shape: Rect | Circle): shape is Rect => {
  return 'width' in shape && 'height' in shape
}

????可辨别联合

要求:T = A | B | C

  • A | B | C … 要有一个相同的属性 type或其它
  • type类型只能为 简单类型
  • A | B | C …的type属性无交集
type Rect = {
  type: 'rect',
  width: number
  height: number
}
type Circle = {
  type: 'circle'
  center: [number, number]
  radius: number
}
const area = (shape: Rect | Circle): number => {
  if(shape.type === 'rect') {
    return shape.width * shape.height
  } else {
    return Math.PI * shape.radius ^ 2
  }
}

以上就是TS 类型收窄教程示例详解的详细内容,更多关于TS 类型收窄的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
Vue自动构建发布脚本的方法示例
Jul 24 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实现音乐播放器
vue el-table实现递归嵌套的示例代码
Aug 14 #Vue.js
You might like
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
java解析json方法总结
2019/05/16 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
Pytorch之保存读取模型实例
2019/12/30 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
骆驼官方商城:CAMEL
2016/11/22 全球购物
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
大学生自我鉴定范文
2013/12/28 职场文书
护理工作感言
2014/01/16 职场文书
三方合作协议书范本
2014/04/18 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
诚实守信主题班会
2015/08/13 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
员工安全责任协议书
2016/03/22 职场文书