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 相关文章推荐
Javascript 面向对象 命名空间
May 13 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 Javascript
小程序实现侧滑删除功能
Jun 25 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移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
JS中静态页面实现微信分享功能
2017/02/06 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
Python下的subprocess模块的入门指引
2015/04/16 Python
Python正则表达式使用范例分享
2016/12/04 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
keras slice layer 层实现方式
2020/06/11 Python
Python连接mysql方法及常用参数
2020/09/01 Python
python实现马丁策略的实例详解
2021/01/15 Python
利用python实现汉诺塔游戏
2021/03/01 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
应届生.NET方向面试题
2015/05/23 面试题
软件测试题目
2013/02/27 面试题
艺术设计专业个人求职信范文
2013/12/11 职场文书
我的求职择业计划书
2014/04/04 职场文书
施工安全标语
2014/06/07 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
辩护词格式
2015/05/22 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
保险公司增员口号
2015/12/25 职场文书
《折线统计图》教学反思
2016/02/22 职场文书