10个高级TypeScript开发技巧

在使用了一段时间的Typescript之后，我深深地感受到了Typescript在大中型项目中的必要性。可以提前避免很多编译期的bug，比如烦人的拼写问题。并且越来越多的包都在使用TS，所以学习它势在必行。以下是我在工作中学到的一些更实用的Typescript技巧，今天把它整理了一下，分享给各位，希望对各位有帮助。

1、keyofkeyof与Object.keys稍有相似，只是keyof采用了接口的键。

interfacePoint{x:number;y:number;}//typekeys="x"|"y"typekeys=keyofPoint;

假设我们有一个如下所示的对象，我们需要使用typescript实现一个get函数来获取其属性的值。

constdata={a:3,hello:'max'}functionget(o:object,name:string){returno[name]}

我们一开始可能是这样写的，但它有很多缺点：

无法确认返回类型：这将失去ts的最大类型检查能力。

无法约束密钥：可能会出现拼写错误。

在这种情况下，可以使用keyof来增强get函数的type功能，有兴趣的可以查看_.get的type标签及其实现。

functionget<Textendsobject,KextendskeyofT>(o:T,name:K):T[K]{returno[name]}

2、必填&部分&选择

既然知道了keyof，就可以用它对属性做一些扩展，比如实现Partial和Pick，Pick一般用在_.pick中

typePartial<T>={[PinkeyofT]？:T[P];};typeRequired<T>={[PinkeyofT]-？:T[P];};typePick<T,KextendskeyofT>={[PinK]:T[P];};interfaceUser{id:number;age:number;name:string;};//Equivalentto:typePartialUser={id？:number;age？:number;name？:string;}typePartialUser=Partial<User>//Equivalentto:typePickUser={id:number;age:number;}typePickUser=Pick<User,"id"|"age">

这些类型内置在Typescript中。

3、条件类型

它类似于？:运算符，你可以使用它来扩展一些基本类型。

TextendsU？X:YtypeisTrue<T>=Textendstrue？true:false//Equivalenttotypet=falsetypet=isTrue<number>//Equivalenttotypet=falsetypet1=isTrue<false>

4、never&Exclude&Omit

never类型表示从不出现的值的类型。

结合never和条件类型可以引入许多有趣和有用的类型，例如Omit

typeExclude<T,U>=TextendsU？never:T;//Equivalentto:typeA='a'typeA=Exclude<'x'|'a','x'|'y'|'z'>

结合Exclude，我们可以介绍Omit的写作风格。

typeOmit<T,Kextendskeyofany>=Pick<T,Exclude<keyofT,K>>;interfaceUser{id:number;age:number;name:string;};//Equivalentto:typePickUser={age:number;name:string;}typeOmitUser=Omit<User,"id">

5、typeof

顾名思义，typeof代表一个取一定值的类型，下面的例子展示了它们的用法

consta:number=3//Equivalentto:constb:number=4constb:typeofa=4

在一个典型的服务器端项目中，我们经常需要将一些工具塞进上下文中，比如config、logger、dbmodels、utils等，然后使用typeof。

6、is

在此之前，我们先来看一个koa错误处理流程,这是集中错误处理和识别代码的过程。

在err.code中，它将编译错误，即“Error”.ts(2339)类型上不存在属性“code”。

在这种情况下，可以使用asAxiosError或asany来避免错误，但是强制类型转换不够友好！

if((errasAxiosError).isAxiosError){code=`Axios-${(errasAxiosError).code}`}

在这种情况下，你可以使用is来确定值的类型。

functionisAxiosError(error:any):errorisAxiosError{returnerror.isAxiosError}if(isAxiosError(err)){code=`Axios-${err.code}`}

在GraphQL源代码中，有很多这样的用途来识别类型。

exportfunctionisType(type:any):typeisGraphQLType;exportfunctionisScalarType(type:any):typeisGraphQLScalarType;exportfunctionisObjectType(type:any):typeisGraphQLObjectType;exportfunctionisInterfaceType(type:any):typeisGraphQLInterfaceType;

7、interface&type

interface和type有什么区别？

interface和type的区别很小，比如下面两种写法就差不多了。

interfaceA{a:number;b:number;};typeB={a:number;b:number;}

interface可以如下合并，而type只能使用&类链接。

interfaceA{a:number;}interfaceA{b:number;}consta:A={a:3,b:4}

8、Record&Dictionary&Many

这些语法糖是从lodash的类型源代码中学习的，并且通常在工作场所中经常使用。

typeRecord<Kextendskeyofany,T>={[PinK]:T;};interfaceDictionary<T>{[index:string]:T;};interfaceNumericDictionary<T>{[index:number]:T;};constdata:Dictionary<number>={a:3,b:4}

9、用constenum维护const表

UseobjectstomaintainconstsconstTODO_STATUS{TODO:'TODO',DONE:'DONE',DOING:'DOING'}//MaintainingconstantswithconstenumconstenumTODO_STATUS{TODO='TODO',DONE='DONE',DOING='DOING'}functiontodos(status:TODO_STATUS):Todo[];todos(TODO_STATUS.TODO)

10、VSCode技巧和Typescript命令

有时候用VSCode，用tsc编译时出现的问题与VSCode提示的问题不匹配。

在项目的右下角找到Typescript字样，版本号显示在右侧，你可以点击它并选择UseWorkspaceVersion，表示它始终与项目所依赖的typescript版本相同。

或编辑.vs-code/settings.json

{"typescript.tsdk":"node_modules/typescript/lib"}

总之，TypeScript增加了代码的可读性和可维护性，让我们的开发更加优雅。