热搜: fiddler git ip 代理
历史搜索

Typescript 利用 Type Guard、Narrowing解决常见问题

游客2024-11-10 09:30:02
目录文章目录
  1. 场景一
  2. Type Guard
  3. 场景二
  4. 类型收窄(Narrowing)
  5. Mapper enum
  6. 总结

由于 JavaScript 本身是弱语言,因此在开发上常因为不知道变量的类型是什么而感到苦恼,即使借由命名的方式让变量的定位稍微明确一点,我们还是很难一眼就知道他的类型甚至当此变量是一个 object 时我们更难知道里面有哪些 key,因此大家渐渐开始使用 TypeScript 作为主要的开发工具。

不晓得大家在利用 TypeScript 进行开发时,有没有觉得 TypeScript 在检查类型这块特别恼人,虽然知道这些类型检查的举动是非常好的,可以帮助我们减少许多可能会发生的潜在错误,今天就要来谈谈当我们在开发上遇到这种问题时该如何解决。

场景一

不晓得大家有没有遇过这种问题,今天想要让这个变量查看是否符合 enum 中的某一个值,结果 TypeScript 就喷错给你看了,像下面这样。

Typescript 利用 Type Guard、Narrowing解决常见问题 1

这时候就可以发现我们成功的把 BE_GENDER type 的值转成 FE_GENDER type 的值了,而且也不需要动用到 Type Guard 的观念。

总结

今天介绍了 TypeScript 中用来检查类型的方法,假如读者日后遇到类似这种问题不妨可以多加利用 Type Guard 进行检查,而不是直接开大招用 @ts-ignore 或者 as 这两种方法,除了介绍类型检查外也介绍了如何进行类型转换,希望这些方法都可以让读者未来在使用上都不会有太多的问题。