作者:神 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/qq44924588… 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。