TypeScript类型编程从基础到编译器实战_UTF_8

刘冰冰

作者简介: 吴明亮，抖音前端团队 Monorepo 工程化框架核心开发者。Typescript 的类型编程可以理解为一门有限的函数式编程语言。本文假定读者已经使用过 typescript 并且了解基础的类型概念，不会介绍基础概念，主要专注于介绍如何进行系统化的类型编程。示例主要来源于官网、类型挑战仓库以及日常开发。一、类型编程基础既然称作类型编程，那自然和普通编程语言一样，用于类型变量定义语句、类型表达式、类型函数等等，本小结将详细讲述类型编程的一些基础知识。希望通过本文能够帮助读者更好的理解 TS 的类型，让日常开发中的类型操作更加容易。看大佬们用 ts 类型实现编译器，看起来非常其实（确实厉害=_=），不过理解这篇文章的思想后，读者们也可以实现～文章最后一个示例实现了一个 简易加法表达式求值器。1. 类型变量定义TS 定义类型的方式有多种：使用 type。使用 interface。使用 class、enum 等等，其中 class、enum 可以既为值，又为类型。TS 提供了大量的基础类型，可以直接在定义类型变量时使用（关于基础类型的详细介绍可以查阅 TS 文档）：基础数据类型，比如 string、number、boolean、symbol、undefined 等等。字面量类型，比如 '123'，5 等对象类型，比如 { a: string }函数类型，比如 (a: string) => void元组类型，比如 [1, 2, 3]数组类型，比如 string[]...//使用type定义类型变量，类型是一个字面亮类型'123'typeTypeA='123'//使用interface定义类型变量interfaceTypeB{a:string}//将对象类型//{//b:number//c:TypeA//}//赋值给TypeC//TypeA是上面定义的类型变量，可以直接使用typeTypeC={b:numberc:TypeA}//类型变量可以直接赋值给另一个类型变量typeD=TypeB//将函数类型赋值给EtypeE=(a:string)=>void;基于 TS 的基础类型以及 type 等关键字，就可以定义自定义的类型变量。2. 类型操作符ts 中也定义了大量类型操作，例如 &（对象类型合并）、|（联合类型）等等，这些操作可以操作 TS 的类型。2.1 & - 合并类型对象& 合并多个类型对象的键到一个类型对象中。typeA={a:number}typeB={b:string}typeC=A&B;//C包含A和B定义的所有键/***C={a:number;b:string;}*/constc:C={a:1,b:'1'}注意使用 & 时，两个类型的键如果相同，但类型不同，会报错：typeA={a:number}typeB={a:string}typeC=A&B;/**报错：Type'number'isnotassignabletotype'never'.(2322)input.tsx(62,3):Theexpectedtypecomesfromproperty'a'whichisdeclaredhereontype'C'(property)a:never*/constc:C={a:1//error}2.2 | - 联合类型|将多个类型组成联合类型：typeA=string|number;typeB=string;此时类型 A 既可以是 string 又可以是 number，类型 B 是类型 A 的子集，所有能赋值给类型 B 的值都可以赋值给类型 A。2.3 keyof - 获取对象类型的键keyof 可以获取某些对象类型的键：interfacePeople{a:string;b:string;}//返回'a'|'b'typeKeyofPeople=keyofPeople;//typeKeyofPeople='a'|'b';用这种方式可以获取某个类型的所有键。注意 keyof 只能对类型使用，如果想要对值使用，需要先使用 typeof 获取类型。2.4 typeof - 获取值的类型typeof 可以获取值的类型。//获取对象的类型constobj={a:'123',b:123}typeObj=typeofobj;/**typeObj={a:string;b:number;}*///获取函数的类型functionfn(a:Obj,b:number){returntrue;}typeFn=typeoffn;/**typeFn=(a:Obj,b:number)=>boolean*///...获取各种值的类型注意对于 enum 需要先进行 typeof 操作获取类型，才能通过 keyof 等类型操作完成正确的类型计算（因为 enum 可以是类型也可以是值，如果不使用 typeof 会当值计算）：enumE1{A,B,C}typeTE1=keyofE1;/**拿到的是错误的类型typeTE1="toString"|"toFixed"|"toExponential"|"toPrecision"|"valueOf"|"toLocaleString"*/typeTE2=keyoftypeofE1;/**拿到的是正确的类型typeTE2="A"|"B"|"C"*/2.5 [...] - 元组展开与合并元组可以视为长度确定的数组，元组中的每一项可以是任意类型。通过 [...元组, ...元组] 语法可以合并两个元组。结合元组展开以及 infer 类型推断，可以实现类型中的数组操作，比如 pop()，后文介绍 infer 时将详细介绍。typeTupleA=[1,2,3]typeTupleB=[...TupleA,4]/**typeTupleB=[1,2,3,4]*/typeTupleC=[0,...TupleA]/**typeTupleC=[0,1,2,3]*/2.6 [in] - 遍历对象键值在对象类型中，可以通过 [临时类型变量 in 联合类型] 语法来遍历对象的键，示例如下：//下述示例遍历'1'|'2'|3'三个值，然后依次赋值给K，K作为一个临时的类型变量可以在后面直接使用/**下述示例最终的计算结果是：typeMyType={1:"1";2:"2";3:"3";}因为K类型变量的值在每次遍历中依次是'1','2','3'所以每次遍历时对象的键和值分别是{'1':'2'}{'2':'2'}和{'3':'3'}，最终结果是这个三个结果取&*/typeMyType={//注意能遍历的类型只有string、number、symbol，也就是对象键允许的类型[Kin'1'|'2'|'3']:K}[in] 常常和 keyof 搭配使用，遍历某一个对象的键，做相应的计算后得到新的类型，如下：typeObj={a:string;b:number;}/**遍历Obj的所有键，然后将所有键对应的值的类型改成boolean|K，返回结果如下：typeMyObj={a:boolean|"a";b:boolean|"b";}这样我们就实现了给Obj的所有值的类型加上|boolean的效果*/typeMyObj={[KinkeyofObj]:boolean|K}in 后面还可以接 as，as 后面可以接类型表达式（文档：https://www.typescriptlang.org/docs/handbook/2/mapped-types.html#key-remapping-via-as）typeGetters={[PropertyinkeyofTypeas`get${Capitalize}`])=>Type[Property]};3. 泛型 - 类型函数TS 的泛型可以类比 Javascript 中的函数3.1 定义泛型使用定义泛型://接口泛型interfaceObj1{a:T}//使用type也能定义泛型typeType1={b:T}//函数泛型typeFn1=(...args:any[])=>any;//泛型也可以有默认值，这样如果没有指定泛型参数，默认是stringinterfaceObj1{a:T}通过 extends 可以约束泛型：//extends后可以接类型表达式typeFn2=(...args:any[])=>any;//泛型可以和函数泛型结合typeFn3=(...args:T[])=>I;在 中定义的泛型变量可以视为一个局部函数变量，例如上例中的 T，可以作为类型表达式在后续所有涉及类型的地方使用。3.2 基于泛型创建新类型 - 函数调用通过 泛型名 即可使用泛型生成新类型，如下：typeFn3=(...args:T[])=>I;typeMyFn=Fn3;/**可以看到Fn3中的类型已经被替换成了boolean，也就是我们指定的参数类型typeMyFn=(...args:T[])=>boolean*///使用新类型constmyfn:MyFn=(a:any)=>true;上例中，返回的 MyFn 是一个新类型，可以直接使用新类型进行类型计算，或者进行类型限定。3.3 泛型递归调用 - 函数递归泛型调用支持递归:typeRecursiveGenerics=TextendsstringT:RecursiveGenerics;在上个例子中，我们定义了一个泛型 RecursiveGenerics，当 T 是 string 的时候，RecursiveGenerics 返回 T，否则返回一个递归的结果！例如递归我们就可以做很多有意思的事情了，比如类型对象的深度优先遍历、实现循环等等。下面我们给斐波那契数列计算的例子：//辅助函数，暂时不用关心typeNumberToArray=TextendsTI['length']extendsTI:NumberToArray:never;typeAdd=[...NumberToArray,...NumberToArray]['length']typeSub1=NumberToArrayextends[infer_,...inferR]R['length']:never;typeSub2=NumberToArrayextends[infer_,infer__,...inferR]R['length']:never;//计算斐波那契数列typeFibonacci=Textends11:Textends21:Add>,Fibonacci>>;typeFibonacci9=Fibonacci;/**得到结果typeFibonacci9=34*/上述示例中我们成功使用类型完成了斐波那契数列的计算：重点是下面几句，根据条件类型判断递归条件，然后调用递归。下述示例使用的条件类型判断边界，下一小节会介绍条件类型//计算斐波那契数列typeFibonacci=//判断边界条件Textends11:Textends21://递归调用Add>,Fibonacci>>;typeFibonacci9=Fibonacci;/**得到结果typeFibonacci9=344. 条件类型 - if else4.1 条件类型使用 extends 三元表达式能够进行条件的判断，并返回一个新类型，语法如下：类型表达式1extends类型表达式2？类型表达式:类型表达式示例:typeC='a'extends'a'|'b'true:false/**typeC=true*/这里有几个注意点：三元表达式的所有位置都可以使用类型表达式返回值是一个类型表达式4.2 Infer 推断类型可以使用 infer 关键字推断条件类型中的某一个条件类型，然后将该类型赋值给一个临时的类型变量。类型推断可以用于 extends 后任何可以使用类型表达式的位置，示例：typeFlatten=TypeextendsArrayItem:Type;上述示例中，当 type 满足 Array模式时，将会自动推断出 T 的类型，并赋值给 Item。例如：typeT=Flatten;/*T=string,因为推断出string[]=Array，所以Item=string，类型返回Item*/注意：infer 只能在条件类型里面使用。通过 infer 关键字，可以实现很多的内置类型的操作，比如 Parameters、ReturnType 等，实现方式如下：//自动推断参数P的类型，如果是则泛型返回值是PtypeMyParameters=Textends(...args:inferP)=>anyP:never;/**推断参数的类型成功typeParams=[a:string,b:number]*/typeParams=MyParametersvoid>;//同样的方式，我们可以推断ReturnTypetypeMyReturnType=Textends(...args:any[])=>inferRR:never;/**团队返回值的类型成功typeRet=void*/typeRet=MyReturnTypevoid>;infer 的能力很强大，可以推断任何类型表达式，例如 infer 还可以和元组或者模版字符串结合，两个示例如下：//计算元组中的第一个元素typeHead=Textends[inferF,...inferR]F:never;//解析`1+2+3`形式的字符串，并返回ASTtypeParse=Textends`${inferExpressionA}+${inferExpressionB}`{type:'operator',leftarse,rightarse}:{type:'expression',value:T};上述示例中，Head 的计算使用了上文提到的元组展开与合并知识点，然后结合本小节的infer，就可以推断出数组的第一个元素。Parse 中使用了条件类型、递归知识点，再结合本小节的infer，就可以实现一个简单的加法表达式解析器。主要实现是：T extends ${infer ExpressionA} + ${infer ExpressionB}，如果字符串满足 A + B 的模式，即可通过 infer 推断出 A 和 B 的字符串。4.3 条件联合类型如果条件类型的参数是一个联合类型，则条件类型的计算结果相当于，如下：//这里等价于(stringexetendsanystring[]:never)|(numberexetendsanynumber[]:never)typeToArray=TypeextendsanyType[]:never;//计算结果是string[]|number[]typeStrArrOrNumArr=ToArray;利用这个特性我们可以实现一些有意思的功能，比如 Excludes：typeExclude=TextendsInever:T;typeT0=Exclude;/**typeT0="b"|"c"*/原理是联合类型的每一个类型都会计算一次 extends，然后将最终的结果做联合，never 在联合过程中会去除。二、类型表达式类型表达式 仅是是本文给出的概念，便于读者进一步理解类型编程。目前官网文档中没有体现类似的概念，如果有不正确的地方，欢迎读者指正。笔者认为类型表达式是本文中最核心的一个概念，理解了此概念后，类型计算的问题都将迎刃而解。值是一个类型的表达式就是类型表达式，通常：定义的类型变量是一个类型表达式类型操作符的操作结果是一个类型表达式，比如 A | B 是一个类型表达式，会返回一个新的类型泛型调用结果是一个类型表达式，比如 A 是一个类型表达式条件类型的结果是一个类型表达式，比如 A extend string true : false 是一个类型表达式，返回值是类型 true 或者 false...在需要使用类型的地方，我们就可以使用类型表达式：类型变量定义：比如 type A = B，B 就可以是一个类型表达式，比如 type A = string | Record泛型调用：比如 A，B 就可以是一个类型表示，比如 A条件类型：比如 A extend B C : D，A、B、C、D 均可以是类型表达式...总而言之，所有使用类型的地方，都可以使用类型表达式，比如类型变量赋值、条件类型、函数参数/返回值类型 等等位置。利用 TS 类型表达式的概念，我们就可以进行强大的类型编程能力。下面通过几个示例来帮助理解类型表达式的概念。首先可以拿上面的斐波那契数列计算作为第一个示例：typeFibonacci9=Fibonacci;//Fibonacci是一个类型表达式，那么可以将其作为Fibonacci的输入，如下：typeFibonacci99=Fibonacci>;//等价于typeFibonacci99=FibonacciFibonacci 是一个类型表达式，我们可以将这个类型表达式作为泛型的输入，所以 Fibonacci> 也是合法的！由此我们可以拓展，所有合法的类型表达式都可以在这里使用。另一个示例是条件类型，我们前面介绍了条件类型的语法是：类型表达式1 extends 类型表达式2 ？ 类型表达式3 : 类型表达式。typeMyType=FibonacciextendsFibonacciFibonacci:Fibonacci;示例中的四个位置都可以使用类型表达式。基于类型表达式的概念，我们可以通过堆砌小的类型表达式，完成复杂的类型编程操作！三、常用知识点总结1. 函数参数类型自动推导通过泛型 + 函数参数，可以定义一个类型变量，并且由函数参数自动推导类型变量的值：functionidentity(arg:Type):Type{returnarg;}通过传入一个 string 类型的参数，可以推导出 Type=string ，同时这个类型参数可以在用于组合其他类型！这个特性非常有用，有时候我们需要推断出函数参数的类型，并将其保存到一个临时类型变量中时，这个特性就可以很方便的实现，下面实战的链式调用中用到了这个特性。2. 动态扩展类型变量如下，T 中可保存上一次调用 option 后的值，然后通过类型递归，扩展 T 的类型，当最后调用 get() 时，拿到的就是扩展后的 T 的类型：typeChainable={option(key:K,value:V):Chainableget():T}上述示例中，我们使用了默认泛型 + 递归两个特性，利用递归保存上下文，我们就可以实现对已有类型变量的扩展。利用这个特性我们可以保存链式调用中的上下文。3. 动态更改对象类型的 key通过 key in keyof T as xxx形式可以重写 key。可以通过这种形式来实现动态更改对象类型的 key，比如实现 OptionalKeys 或者 RequiresKeys 或者 ReadonlyKeys。typeIsOptional=Partial >extendsPicktrue:false;typeOptionalKeys=keyof{[KinkeyofTasIsOptionalextendstrueK:never]:T[K];};typeRequiredKeys={[KinkeyofT]:IsOptionalextendstruenever:T[K]}这里注意 as 后面可以接一个类型表达式，我们可以通过临时变量 K 以及辅助的类型表达式，实现对键的复杂的操作，比如增加、删除特定的键，将特定的键标记为可选，将特定的键标记为 readonly 等等。上述根据条件将 K 的类型重写为 never 可以去掉该 key，但是注意将值的返回类型设置成 never 是无法更改 key 的数量的，如下：typeRequiredKeys={[KinkeyofT]:IsOptionalextendstruenever:T[K]}返回的 never 值将会变为 undefined。四、类型编程实战4.1 常用的 ts 内置类型参考：https://www.typescriptlang.org/docs/handbook/utility-types.html#excludetype-excludedunion常用的有：PartialOmitRecordPickReturnTypeParameters我们上面的示例中自己实现了 ReturnType、Parameters，其他的内置类型的实现也类似。基于上述的基础知识，我们都可以自行实现。4.2 将某一个对象中的部分参数标记为可选使用 Partial 只能将所有参数标记为可选，如何只标记一部分参数呢？可以如下实现:typeInclude=TextendsIT:never;typeMyPartial={[forKinExclude]:T[K]}&{[forKinInclude]:T[K]}上述示例将 T 的键分成两部分，如果属于 I 则标记成可选，如果不是则为必须的。4.3 给链式调用添加类型题目：https://github.com/type-challenges/type-challenges/blob/master/questions/12-medium-chainable-options/README.mdtypeChainable={option(key:K,value:V):Chainableget():T}利用了 TS 函数的范性自动推断能力以及递归函数存储能力。4.4 柯里化函数类型typeHead=Textends[inferF,...inferR]F:never;typeRest=Textends[inferF,...inferR]R:never;declarefunctionCurrying(fn...args:T)=>):CurryingRet;typeCurryingRet=T['length']extends0Parg0:Head)=>CurryingRet,P>;这里实现的是简化版本，更详细的实现可以参考文章：https://medium.com/free-code-camp/typescript-curry-ramda-types-f747e99744ab。Head 和 Rest 的计算上文有详细介绍，这里我们主要利用了递归 + 函数泛型自动推断的特性。4.5 简易加法表达式求值器实现：Calculator 输出 6。先上效果：实现思路：实现 Parse，将计算表达式解析成 AST实现 AST 遍历器实现求值器，输出最终结果/*_____________YourCodeHere_____________*/typeASTExpressionNode={type:'operator'|'expression';left:ASTExpressionNode;right:ASTExpressionNode;value:keyofNumberMap;}typeParse=Textends`${inferExpressionA}+${inferExpressionB}`{type:'operator',leftarse,rightarse}:{type:'expression',value:TextendskeyofNumberMapT:never};typeNumberToArray=I['length']extendsTI:NumberToArray;typeAdd=[...NumberToArray,...NumberToArray]['length'];typeGetValue=T['value']extendsstringT['value']:never;typeGetLeft=T['left']extendsASTExpressionNodeT['left']:never;typeGetRight=T['right']extendsASTExpressionNodeT['right']:never;typeNumberMap={'0':0,'1':1,'2':2,'3':3,'4':4,};typeEvaluate=T['type']extends'expression'NumberMap[`${GetValue}`]:Add>,Evaluate>>;typeCalculator=Evaluate >;typetest1=Parse;/**返回typetest1={type:'operator';left:{type:'expression';value:"1";};right:{type:'expression';value:"2";};}*/typetest2=Calculator/**返回typetest2=6*/这里我们利用了上面提到的几乎所有知识点：递归：表达式的解析和求值都使用了递归的能力条件类型：实现递归的边界判断类型推断：通过类型推断实现 Head、Tail 等能力...感兴趣的同学还可以自行实现减法、乘法、除法、取模等操作~五、常用 TS 类型工具库5.1 ts-toolbelt封装常用的 TS 类型操作。地址: https://github.com/millsp/ts-toolbelt。3.2 typetype用于自动生成 TS 的类型。地址: https://github.com/mistlog/typetype。