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源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
bootstrap表单示例代码分享
May 18 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
Node.js简单入门前传
Aug 21 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
vue+element表格导出为Excel文件
Sep 26 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中使用xmlreader读取xml数据示例
2014/12/29 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
在Python中调用ggplot的三种方法
2015/04/08 Python
python开发之文件操作用法实例
2015/11/13 Python
浅谈Python的文件类型
2016/05/30 Python
Python如何获取系统iops示例代码
2016/09/06 Python
python删除某个字符
2018/03/19 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
大学生求职简历的自我评价
2013/10/21 职场文书
生物制药专业求职信
2014/03/11 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
2014年教师节寄语
2014/08/11 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
2016高考感言
2015/08/01 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python