TS 类型收窄教程示例详解
更新时间：2022年09月20日 14:20:34 作者：dingsheng
这篇文章主要为大家介绍了TS 类型收窄教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
类型收窄之前只能使用公共方法
JS方法
typeof
缺点
- typeof null —→ object
- typeof 数组 —→ object
- typeof 日期 —→ object
a instanceof A : A 是否出现在a的原型链上
缺点
不支持string 、number 、boolean 等原始类型
不支持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 类型收窄的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家介绍了定时器在页面最小化时不执行的实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
用 或 || 来兼容FireFox...2006-06-06
这篇文章主要介绍了详解微信小程序Page中data数据操作和函数调用的相关资料,希望通过本文能帮助到大家掌握这方法，需要的朋友可以参考下2017-09-09
这篇文章主要介绍了 微信小程序实现图片轮播及文件上传的相关资料,需要的朋友可以参考下2017-04-04
这篇文章主要为大家介绍了插件导致ECharts被全量引入的坑示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
Vue.js React与Angular流行前端框架优势对比
这篇文章主要为大家介绍了Vue.js React与Angular流行前端框架优势对比，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了微信小程序 UI布局常用技巧整理总结的相关资料,现在不论是APP 还是各种软件，UI布局还是非常重要的，用户体验第一位啊，这里就整理下微信小程序的UI布局，需要的朋友可以参考下2016-12-12
这篇文章主要为大家介绍了Electron 剪贴板实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要为大家介绍了ChatGPT前端编程秀之教你别拿编程语言不当语言，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
Servlet3.0与纯javascript通过Ajax交互的实例详解
Servlet与纯javascript通过Ajax交互,对于很多人来说应该很简单。不过还是写写，方便Ajax学习的后来者2018-03-03
最新评论