乐趣区

关于前端:Typescript-一些令人又爱又恨的内容-Type-GuardNarrowing

作者:神 Q 超人
译者:前端小智
起源:medium

有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

因为 JavaScript 自身是弱语言,因而在开发上常因为不晓得变量的类型是什么而感到苦恼,即便借由命名的形式让变量的定位略微明确一点,咱们还是很难一眼就晓得他的类型甚至当此变量是一个 object 时咱们更难晓得外面有哪些 key,因而大家慢慢开始应用 TypeScript 作为次要的开发工具。

不知道大家在利用 TypeScript 进行开发时,有没有感觉 TypeScript 在查看类型这块特地宜人,尽管晓得这些类型查看的行动是十分好的,能够帮忙咱们缩小许多可能会产生的潜在谬误,明天就要来谈谈当咱们在开发上遇到这种问题时该如何解决。

场景一

不知道大家有没有遇过这种问题,明天想要让这个变量查看是否合乎 enum 中的某一个值,后果 TypeScript 就喷错给你看了,像上面这样。

其实要解决下面的红字办法十分多,首先是开大绝应用 @ts-ignore 让谬误隐没,当然这个办法十分不好,等于是叫 TypeScript 不要查看上面这行了。

这时候可能会想到另一个办法,下面的错误信息是说 male 没有被 assignGENDER 这个 type,所以我只有强制塞给他这个 type 就好,就像这样:

可是这样写依然不好,等于你强制转变这个变量了,让这个变量失去了弹性,接下来咱们介绍比拟好用的办法,就让咱们持续看上来吧!

Type Guard

首先要介绍的是 Type Guard,Type Guard 顾名思义就是类型的看守者,刚刚 TypeScript 会报错就是因为 type 不一样,所以只有咱们建设一个类型的看守者,让 TypeScript 晓得这个变量肯定会合乎我 enum 中的某一个 value 时,这时候就不会呈现红字了,而通常 Type Guard 会写成一个 function 像这样:

const assertsIsGender = (gender: any) : gender is GENDER => {return Object.values(GENDER).includes(gender)
}

这时候咱们能够发现 gender 这个变量曾经从 string type 变成 GENDER type 了,所以即使我很无聊的再做一次 includes 的判断 TypeScript 也不会报任何谬误了。

这边我在指定 gender 这个值之前先指派这个变量是一个 string type,这个动作很重要,如果没有先指派变量类型再给值的话这个变数就没方法顺利扭转 type 了。

场景二

不知道大家有没有遇过在 API 回传的材料,也会因为材料对应到的 enum 的值不同而产生谬误,像上面这样:

有了下面 Type Guard 的观点后,这时候的读者肯定晓得要写一个 function 来解决这段错误信息:

确实错误信息没有了,但很奇怪的是 gender 居然变成 never type 了,而这个就是 Type Guard 会做到的一个类型爱护机制叫:Narrowing。

类型收窄(Narrowing)

Narrowing 翻成白话文就是 类型收窄,在 TypeScript 的世界中每一个 enum 基本上都是独立存在彼此之间是没有交加的,关系图就像上面这样:

所以要进行两个 enum 间的类型转换就很容易产生出一个可能不会存在的型别,对于可能不会存在的类别 TypeScript 把这个型别定义为 never,而这时候当咱们应用了 Type Guard 的技巧,TypeScript 就会主动把类型收窄成 never type,而不是主动转换成另一个 enum 了。

当然聪慧的你可能会这样想:那我只有把 function return 定义成另一个 enum 不就好了,这样就能够确保我 Type Guard 的后果肯定会 类型转换 成我想要的 enum,像上面这样:

这样写看起来确实没有什麽问题,咱们想要的后果也从 类型收窄 变成了 类型转换,但这样做其实就有点不太合乎 Type Guard 的精力,毕竟 Type Guard 要做的是类型查看而不是类型转换,而且如果咱们要做的是类型转换,这样写也会让这个 function 的复用性不高,因而咱们接下来要介绍比拟好的类型转型办法。

Mapper enum

首先咱们能够先想想如何让类型转换这件事被复用,咱们无妨把想法简单化,就是建设一个 functionA 型态转换成 B 型态,而这时候就必须要利用 TypeScript 中的 Generics 泛型这个技巧了,像上面这样:

const createEnumMapper = <T>(mapping: T) => (value: keyof T | null) : T[keyof T] | undefined => {return value === null ? undefined : mapping[value]
}

这个 createEnumMapper 的 function 是一个 currying function,第一个变数传入的是 enum 自身,这时候 TypeScript 的 Generics 就会晓得我的 T 就是跟 enum 自身无关。

为了让这个 Generics 能够正确的把两个 enum mapping 起来,咱们必须要先建设一个 object 把两个 enum key value 配对像上面这样:


const mapper = {[BE_GENDER.MALE]: FE_GENDER.MALE,
  [BE_GENDER.FEMALE]: FE_GENDER.FEMALE
}

因为咱们下面的 mapper 是把 enum 的 value 当成 key,所以咱们只有带入 data 的值就能够间接转换了,像上面这样:

这时候就能够发现咱们胜利的把 BE_GENDER type 的值转成 FE_GENDER type 的值了,而且也不须要动用到 Type Guard 的观点。

总结

明天介绍了 TypeScript 中用来查看类型的办法,如果读者日后遇到相似这种问题无妨能够多加利用 Type Guard 进行查看,而不是间接开大绝用 @ts-ignore 或者 as 这两种办法,除了介绍类型查看外也介绍了如何进行类型转换,心愿这些办法都能够让读者将来在应用上都不会有太多的问题。

我是刷碗智,新的一年,咱们一起刷刷刷。


https://medium.com/onedegree-…

退出移动版