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 相关文章推荐
禁止js文件缓存的代码
Apr 09 Javascript
巧用局部变量提升javascript性能
Feb 24 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
微信小程序实现弹出菜单功能
Jun 12 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
一个用于MySQL的PHP XML类
2006/10/09 PHP
php读取xml实例代码
2010/01/28 PHP
PHP Session机制简介及用法
2014/08/19 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
javascript 变量作用域 代码分析
2009/06/26 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
js document.write()使用介绍
2014/02/21 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
python僵尸进程产生的原因
2017/07/21 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
python实现的汉诺塔算法示例
2019/10/23 Python
python 利用zmail库发送邮件
2020/09/11 Python
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
白酒市场开发计划书
2014/01/09 职场文书
《童年》教学反思
2014/02/18 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
《所见》教学反思
2016/02/23 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python
python实现三阶魔方还原的示例代码
2021/04/28 Python