作者：神Q超人译者：前端小智来源：中微信搜索【大招天下】，给大家分享一下前端行业动态，学习路径等尽快。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。由于JavaScript本身是一门弱语言，在开发中经常会因为不知道变量的类型而烦恼。即使变量的定位通过命名更明确了一点，我们还是很难一眼就知道它的类型。即使当这个变量是一个对象时，我们也更难知道它里面有哪些键，所以人们逐渐开始使用TypeScript作为主要的开发工具。不知道大家在使用TypeScript进行开发的时候，是否觉得TypeScript特别烦人。虽然了解这些类型的检查是非常好的，但它可以帮助我们减少许多可能发生的潜在错误。今天就来谈谈我们在开发中遇到这种问题怎么解决。场景一，不知道大家有没有遇到过这种问题。今天，我想检查这个变量是否匹配枚举中的某个值。结果，TypeScript会为您喷射错误，如下所示。其实解决上面红色文字的方法有很多。第一种是使用@ts-ignore让错误消失。当然，这种方法是非常糟糕的。这相当于告诉TypeScript不要检查以下行。这个时候，我可能会想到另一种方法。上面的报错信息是male还没有赋值到GENDER这个类型，所以我只需要强制他赋值这个类型，像这样：但是这样写还是不好，也就是说你强制改变这个变量使得这个变量失去了灵活性。接下来，我们将介绍一个更好用的方法，让我们继续往下看吧！TypeGuard首先要介绍的是TypeGuard。TypeGuard，顾名思义，就是类型保护。刚才TypeScript会报错，因为type不一样。所以只要我们创建一个类型保护，让TypeScript知道这个变量会符合我的枚举。对于某个值，此时不会出现红色文字，通常TypeGuard会写成这样的函数：constassertsIsGender=(gender:any):genderisGENDER=>{returnObject.values(GENDER).includes(gender)}这时候我们可以发现变量gender已经从string类型变成了GENDER类型，所以即使我无聊再对includes再做判断，TypeScript也不会报错。这里，我在给变量赋值之前，给变量赋了字符串类型。这个动作非常重要。如果不先给变量类型赋值，再赋值，变量就不能顺利改变类型。场景2不知道大家有没有遇到过API返回的数据，会因为数据对应的enum值不同而报错，如下：有了上面TypeGuard的概念，此时的读者必须知道必须要写一个函数来处理这个错误信息：确实错误信息没有了，但是奇怪的是性别变成了never类型，而这是TypeGuard会实现的类型保护机制叫做：缩小。类型缩小（Narrowing）Narrowing翻译成白话就是类型缩小。在TypeScript的世界里，每个枚举基本上都是独立存在的，彼此之间没有交集。关系图如下：所以需要两个枚举类型之间的类型转换很容易产生一个可能不存在的类型。对于可能不存在的类别，TypeScript将此类型定义为never。这时候，当我们使用类型保护技术时，TypeScript会自动将类型缩小为永不类型，而不是自动转换为另一个枚举。当然，如果你聪明的话，你可能会这样想：那么我只需要将函数return定义为另一个枚举，这样我就可以确保我的TypeGuard的结果被类型转换为我想要的枚举，像这样：看起来写起来没什么问题，我们要的结果从类型缩小变成了类型转换，但这其实不符合TypeGuard的精神。毕竟TypeGuard需要做的是类型检查而不是类型转换，而如果我们要做的是类型转换，这样写也会让这个函数的复用性不高，所以我们会引入更好的类型转换接下来的方法。Mapperenum首先我们可以考虑如何让类型转换可以被复用。我们不妨简化一下思路，即创建一个函数将类型A转换为类型B。这时候我们就必须使用TypeScript中的Generics泛型是一个trick，像这样：constcreateEnumMapper=
