TypeScript- 联合类型和类型别名
前端人
共 3805字,需浏览 8分钟
· 2021-08-22
❝鬼哥本周将通过几篇优秀的Typescript文章,让大家学习到Typescript一些高级的用法,让大家对Typescript更加的深入理解,并且更好实践到工作当中,【一共五篇文章】,关注我们一起完成这个系列的学习
原文:https://github.com/leslie1943
❞
🚀🚀🚀 联合类型
联合类型通常与 null 或 undefined 一起使用
const sayHello = (name:string|undefined) => {
/* */
}
这里 name 的类型是 string | undefined 意味着可以将 string 或 undefined 的值传递给 sayHello 函数.
sayHello('Leslie')
sayHello(undefined)
通过这个示例, 你可以凭直觉知道类型 A 和类型 B 联合后的类型是同时接受 A 和 B 值的类型. 此外, 对于联合类型来说, 你可能会遇到以下的用法:
const num: 1 | 2 = 1
type isMan = true | false
type EventNames = 'click' | 'scroll' | 'mousemove'
以上示例中的1,2或者click,scroll,mousemove被称为字面量类型, 用来约束取值只能是某几个值中的一个
🚀🚀🚀 可辨识联合
TypeScript 可辨识联合(Discriminated Unions)类型, 也称为代数数据类型或标签联合类型.它包含 3 个要点: 可辨识, 联合类型 和 类型守卫.
这种类型的本质是结合联合类型和字面量类型的一种类型保护方法. 如果一个类型是多个类型的联合类型, 且多个类型含有一个公共属性, 那么就可以利用这个公共属性, 来创建不同的类型保护区块.
💛💛💛 可辨识 💛💛💛
可辨识要求联合类型中的每个元素都含有一个单例类型属性,比如:
enum CarTransmission {
Automatic = 200,
Manual = 300
}
interface Motorcycle {
vType: "motorcycle"; // discriminant
make: number; // year
}
interface Car {
vType: "car"; // discriminant
transmission: CarTransmission
}
interface Truck {
vType: "truck"; // discriminant
capacity: number; // in tons
}
在上述代码中, 我们分别定义了 Motorcycle 、 Car 和 Truck 三个接口, 在这些接口中都包含一个 vType 属性, 该属性被称为可辨识的属性, 而其它的属性只跟特性的接口相关.
💛💛💛 联合类型 💛💛💛
基于前面定义了三个接口, 我们可以创建一个 Vehicle 联合类型:
type Vehicle = Motorcycle | Car | Truck;
现在我们就可以开始使用 Vehicle 联合类型, 对于 Vehicle 类型的变量, 它可以表示不同类型的车辆.
💛💛💛 类型守卫 💛💛💛
下面我们来定义一个 evaluatePrice 方法, 该方法用于根据车辆的类型、容量和评估因子来计算价格, 具体实现如下:
const EVALUATION_FACTOR = Math.PI;
function evaluatePrice(vehicle: Vehicle) {
return vehicle.capacity * EVALUATION_FACTOR;
}
const myTruck: Truck = { vType: "truck", capacity: 9.5 };
evaluatePrice(myTruck);
对于以上代码, TypeScript 编译器将会提示以下错误信息:
// Property 'capacity' does not exist on type 'Vehicle'.
// Property 'capacity' does not exist on type 'Motorcycle'.
原因是在 Motorcycle 接口中, 并不存在 capacity 属性, 而对于 Car 接口来说, 它也不存在 capacity 属性. 那么, 现在我们应该如何解决以上问题呢? 这时, 我们可以使用类型守卫. 下面我们来重构一下前面定义的 evaluatePrice 方法, 重构后的代码如下:
function evaluatePrice(vehicle: Vehicle) {
switch(vehicle.vType) {
case "car":
return vehicle.transmission * EVALUATION_FACTOR;
case "truck":
return vehicle.capacity * EVALUATION_FACTOR;
case "motorcycle":
return vehicle.make * EVALUATION_FACTOR;
}
}
在以上代码中, 我们使用 switch 和 case 运算符来实现类型守卫, 从而确保在 evaluatePrice 方法中, 我们可以安全地访问 vehicle 对象中的所包含的属性, 来正确的计算该车辆类型所对应的价格.
🚀🚀🚀 类型别名
类型别名用来给一个类型起个新名字
type Message = string | string[];
let greet = (message: Message) => {
// ...
};
greet("ss"); // OK
greet([`1`, `2`]); // OK
关注公众号添加鬼哥微信
拉你进前端学习群一起学习
❤️ 看完三件事
如果你觉得这篇内容对你挺有启发,不妨:
点个【在看】,或者分享转发,让更多的人也能看到这篇内容
点击↓面关注我们,一起学前端
长按↓面二维码,添加鬼哥微信,一起学前端
评论
Open-Sora全面开源升级:支持16s视频生成和720p分辨率
机器之心发布 机器之心编辑部Open-Sora 在开源社区悄悄更新了,现在单镜头支持长达16秒的视频生成,分辨率最高可达720p,并且可以处理任何宽高比的文本到图像、文本到视频、图像到视频、视频到视频和无限长视频的生成需求。我们来试试效果。生成个横屏圣诞雪景,发b站再生成个竖屏,发抖音还能
机器学习算法与Python实战
0
聊一聊我最关注的9个CV、SLAM、自动驾驶和AI圈子!
随着计算机视觉(2D/3D)、SLAM、自动驾驶、AI技术的快速迭代更新,可落地的技术也成为人们争先学习的重点。这使得从业者对于最前沿技术的获取能力变得至关重要。微信公众号便是一个非常有效的前沿信息分享平台。这里给大家推荐9个最常打开的计算机视觉、自动驾驶、SLAM、机器学习和AI方向的优质公众号平
3D视觉工坊
0
文本嵌入、文本分类和语义搜索
在实践中使用大型语言模型(LLM)中,RAG 的一个关键部分是使用文本嵌入从知识库中自动检索相关信息。在这里,我将更深入地讨论文本嵌入,并分享两个简单(但功能强大)的应用:文本分类和语义搜索。ChatGPT 吸引了全世界对人工智能及其潜力的想象。ChatGPT 的聊天界面是这一影响的关键因素,它使人
大邓和他的Python
0
一站式解决方案:基于 Arthas 实现服务发现和权限控制
来源:juejin.cn/post/7281849496983994383👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接
小哈学Java
0
互联网晚报 | 大麦网已退款凤凰传奇演唱会“柱子票”;钟薛高再成被执行人;iPhone 16或取消实体音量键和电源键
大麦网回应凤凰传奇演唱会买到“柱子票”:已退票退款据报道,凤凰传奇2024巡回演唱会常州站演出结束的第二天,有网友称自己在大麦网买到“柱子票”,因为观看效果不佳,要求退款被拒。23日,记者从涉事网友处了解到,大麦方面给出了退款建议,但被其拒绝,“我希望平台退款加赔偿,并重视屡次出现的‘柱子票’问题。
产品刘
0
面试官:在原生input上面使用v-model和组件上面使用有什么区别?
前言面试官:vue3的v-model都用过吧,来讲讲。粉丝:v-model其实就是一个语法糖,在编译时v-model会被编译成:modelValue属性和@update:modelValue事件。一般在子组件中定义一个名为modelValue的props来接收父组件v-model传递的值,然后当子组
高级前端进阶
0
AI论文写作工具和生成器(一)
随着人工智能和大模型的迅猛发展,AI对研究人员和学生提供了极大的写作便利。本文将介绍市面上常用的AI论文写作工具,帮助你提高论文写作效率并遵循学术道德。请仅将AI论文生成器视为辅助参考手段,切勿直接挪用全文。XPaper AlXPaper AI是由点击式创作工具晓语台推出的一款论文写作生成平台,只需
IQ前端
0
Langchain使用 | 模型、提示和解析器、存储
零、LangChain介绍为各种不同基础模型提供统一接口- 帮助管理提示的框架- 一套中心化接口,用于处理长期记忆(参见Memory)、外部数据(参见Indexes)、其他 LLM(参见Chains)以及 LLM 无法处理的任务的其他代理(例如,计算或搜索)。总的来说,有六大核心模块:Models:
Python之王
0