关于javascript:Typescript-Type-GuardNarrowing-知多少

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

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

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

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

场景一

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

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

这时候可能会想到另一个办法，下面的错误信息是说 male 没有被 assign 到 GENDER 这个 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

首先咱们能够先想想如何让类型转换这件事被复用，咱们无妨把想法简单化，就是建设一个 function 把 A 型态转换成 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 这两种办法，除了介绍类型查看外也介绍了如何进行类型转换，心愿这些办法都能够让读者将来在应用上都不会有太多的问题。

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

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

https://medium.com/onedegree-…

交换

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

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