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 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
jquery中输入验证中一个不错的效果
Aug 21 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
PHP出错界面
2006/10/09 PHP
php自定义函数之递归删除文件及目录
2010/08/08 PHP
解析link_mysql的php版
2013/06/30 PHP
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
python软件都是免费的吗
2020/06/18 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
中专生自我鉴定范文
2014/02/02 职场文书
本科毕业生求职信
2014/06/15 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python