TStypeof运算符竟然有这五种用途！_0

在JavaScript中，可以使用typeof运算符来获取变量的类型，那么你知道typeof运算符在TypeScript中的作用是什么吗？在这篇文章中，阿宝哥将介绍typeof运算符的几种常见应用场景，可能对你以后的项目有所帮助。这是一个普通的JavaScript对象，在TypeScript中你可以使用type或interface来定义对象的类型。一旦你有了这个对象类型，你就可以使用TypeScript内置的工具类型，例如Partial、Required、Pick或Readonly来处理对象类型，以满足不同的业务需求。constlolo={name:"lolo",age:7,address:{省:"福建",city:"厦门",},};interfacePerson{name:string;年龄：数字；地址：{省份：字符串;城市：字符串；};}对于简单的对象，这可能没什么大不了的。但是对于嵌套层次很深的复杂大对象，手动定义它们的类型会很头疼。要解决这个问题，可以使用typeof操作符：typePerson=typeoflolo;typeAddress=typeoflolo["address"];与之前手动定义类型相比，使用typeof操作符后是不是感觉简单多了？在TypeScript中，枚举类型是一种编译成普通JavaScript对象的特殊类型：0]="获取";HttpMethod[HttpMethod["发布"]=1]="发布";})(HttpMethod||(HttpMethod={}));因此，您也可以使用typeof运算符枚举类型。但这通常没有什么实际用处。在处理枚举类型时，一般使用keyof操作符：constmethod:typeofHttpMethod={Get:0,Post:1,};类型方法=keyoftypeofHttpMethod；//"获取"|《邮报》根据以上结果，使用keyof和typeof运算符可以得到枚举类型的所有属性名。在日常工作中，typeof操作符还有另外一个常见的使用场景。也就是用它来获取函数对象的类型。获取对应的函数类型后，可以继续使用TypeScript内置的ReturnType和Parameters工具类型分别获取函数的返回值类型和参数类型：functionadd(a:number,b:number){returna+b;}typeAddType=typeofadd;//(a:number,b:number)=>numbertypeAddReturnType=ReturnType//numbertypeAddParamsType=Parameters//[a:number,b:number]由于typeof运算符可以处理函数对象，所以可以它处理类？答案是肯定的。类点{x：数字；y：数字；构造函数（x：数字，y：数字）{this.x=x;这个.y=y;}}//new(x:number,y:number)=>PointfunctioncreatePoint(Constructor:typeofPoint,x:number,y:number){returnnewConstructor(x,y);}在上面的代码中，createPoint是用于快速创建Point类实例的工厂函数。通过typeof操作符，可以获得Point类对应的构造签名，从而实现对应的类型校验。在定义Constructor参数类型时，如果不使用typeof运算符，会出现如下错误信息：functioncreatePoint(Constructor:Point,x:number,y:number){returnnewConstructor(x,y);//错误：类型“Point”没有构造函数签名。ts(2351)}另外，在使用typeof运算符的过程中，如果想获取更精确的类型，那么可以结合TypeScript3.4版本引入的const断言。具体用法如下：letrequestMethod="Get";letrequestMethod2="Get"asconst;typeR0=typeofrequestMethod;//stringtypeR1=typeofrequestMethod2;//"Get"letuser={id:666,name:"阿宝哥",};letuser2={id:666,name:"阿宝哥",}asconst;//{id:number;名称：字符串；}typeU0=typeofuser;//typeU1={readonlyid:666;只读名称：“阿宝格”；}typeU1=typeofuser2;从上面的结果我们可以看出，在使用const断言和使用typeof运算符之后，我们可以获得更精确的类型。如果对constassertion相关的知识点感兴趣，可以自行查找。如果不知道之前使用的keyof运算符，可以看文章《TS内置工具类型中的keyof运算符是什么？》。