paint-brush
TypeScript 中可判断聯合的强功效 經過@tokenvolt
213 讀數

TypeScript 中可区分联合的强大功能

经途 Oleksandr Khrustalov4m2024/10/05
Read on Terminal Reader

太長; 讀書

本文概述了 TypeScrips 中可区分联合的基础知识。我在开发中经常使用它们,因此我们将通过一个示例来了解如何应用它们。
featured image - TypeScript 中可区分联合的强大功能
Oleksandr Khrustalov HackerNoon profile picture

陈述问题

随着时间的推移 Typescript 的成才和流行歌曲,越做越多越做越多的 JavaScript 设计的人员开启看重类行健康安全。Typescript 带来了的的功用全部愈来愈很大,也许使人变赞叹不已,故此在这篇优秀文章中,我将省级重点介紹在其中是一个非常易把握且存在应用实际效果的的功用。


让我们从一个例子开始。假设你正在开发一个具有许多用户角色的应用程序。一个应用程序被不同的用户使用是很常见的,不是吗?确切的角色在这里并不重要,但我们假设它们是adminconsumerguest 。在 typescript 中,我们可以声明拥有这些角色的用户,如下所示:


 type Admin = {} type Consumer = {} type Guest = {}


现在,让我们考虑每个用户角色具有的一组属性。通常,它们是emailfirstNamelastName或类似的。但是,等等, Guest用户可能不会有这些(毕竟他们是客人),所以我们暂时将此类型留空。


 type Admin = { firstName: string lastName: string email: string } type Consumer = { firstName: string lastName: string email: string } type Guest = {}


应用程序的用户只能属于一个角色。通过类型来表示这一点的方法是使用union类型。


 type User = Admin | Consumer | Guest


控制员因而独特性的力而广为人知,在企业的使用小程序中,你才是可以受邀进行食客。让企业获取一款字符串来指示器控制员是可以发送到或多或少个受邀。


 type Admin = { firstName: string lastName: string email: string numberOfInvitesLeft: number // <-- added }


为了让事情变得更有趣并且更接近真实的应用,让我们添加一个专属于Consumer类型的属性。


 type Consumer = { firstName: string lastName: string email: string premium: boolean // <-- added }


这就是一两个至关单纯的事列,具体上,用户数也许收获二十余种区别的特性数据,当您是需要互访很多特性数据时,这会尽可能多样化化码库。


 const doSomethingBasedOnRole = (user: User) => { // how do you check here that user is really an admin if (user) { // ...and do something with the `numberOfInvitesLeft` property? } }


另一个选定是体检该标签可不可以具备。


 const doSomethingBasedOnRole = (user: User) => { if (user && user.numberOfInvitesLeft) { // safely access `numberOfInvitesLeft` property } }


但这一两个繁杂且必不可寻址的彻底解决细则。当“numberOfInvitesLeft”成为了可选择攻击速度时该如何办?

引入可区分联合类型

这这就是可差别结合业务分类切实发挥功用的方面。.我只需要在每用户的业务分类中增多同一个超额的字段名来警示英雄。


 type Admin = { firstName: string lastName: string email: string numberOfInvitesLeft: number role: "admin" // <-- added } type Consumer = { firstName: string lastName: string email: string role: "consumer" // <-- added } type Guest = { role: "guest" // <-- added }


注意我如何将特定字符串作为类型;这称为字符串文字类型。这让您现在可以使用本机 JS 语言运算符(例如switch caseifelse区分角色。


 const user: Admin = { firstName: "John", lastName: "Smith", email: "[email protected]", numberOfInvitesLeft: 3, role: "admin", } const doSomethingBasedOnRole = (user: User) => { if (user.role === "admin") { // now typescript knows that INSIDE of this block user is of type `Admin` // now you can safely call `user.numberOfInvitesLeft` within this block } }


这不一样适宜于 switch case 语句。


 // ... const doSomethingBasedOnRole = (user: User) => { switch (user.role) { case "admin": { // now typescript knows that INSIDE of this block user is of type `Admin` // now you can safely call `user.numberOfInvitesLeft` within this block } case "consumer": { // do something with a `Consumer` user // if you try to call `user.numberOfInvitesLeft` here, TS compiler errors in // // "Property 'numberOfInvitesLeft' does not exist on type 'Consumer'." // } } }


可划分共同款式的有什么好处是无可置疑的,担心款式捡查因为确切的英雄技能,而都是机会与既定业主重要性内容或不重要性内容的飞行技能。
바카라사이트 바카라사이트 온라인바카라