
在 JavaScript 中你可以通过 typeof 操作符来获取变量的操作类型,那么你知道在 TypeScript 中 typeof 操作符有哪些用途么?符原 本文阿宝哥将介绍 typeof 操作符的几种常见的应用场景,在以后的有种用途项目中,也许你就可以用得上了。操作 这是符原一个普通的 JavaScript 对象,在 TypeScript 中你可以使用 type 或 interface 来定义该对象的有种用途类型。有了该对象类型之后,操作你就可以利用 TypeScript 内置的符原工具类型,比如 Partial、有种用途Required、操作Pick 或 Readonly 等来处理对象类型,符原从而满足不同的有种用途业务需求。 const lolo = { name: "lolo",操作 age: 7, address: { province: "福建", city: "厦门", }, }; interface Person { name: string; age: number; address: { province: string; city: string; }; }对于简单的对象来说,这也许不算什么。符原但对于嵌套层级比较深的有种用途复杂大对象来说,手动定义其类型会令人脑壳疼。针对这个问题,你可以使用 typeof 操作符: type Person = typeof lolo; type Address = typeof lolo["address"];
相比前面手动定义类型,使用 typeof 操作符之后是不是觉得简单很多。在 TypeScript 中,源码库枚举类型是一种特殊的类型,它会被编译成普通的 JavaScript 对象: enum HttpMethod { Get, Post, } "use strict"; var HttpMethod; (function (HttpMethod) { HttpMethod[HttpMethod["Get"] = 0] = "Get"; HttpMethod[HttpMethod["Post"] = 1] = "Post"; })(HttpMethod || (HttpMethod = {}));因此,你也可以对枚举类型使用 typeof 操作符。但这往往没有多大的实际用途,处理枚举类型时,一般还会搭配 keyof 操作符: const method: typeof HttpMethod = { Get: 0, Post: 1, }; type Method = keyof typeof HttpMethod; // "Get" | "Post"
由以上结果可知,利用 keyof 和 typeof 操作符,你就可以获取枚举类型的所有属性名。 在日常工作中,typeof 操作符还有另一个比较常见的使用场景。即利用它来获取函数对象的类型,在获取对应的函数类型之后,你可以继续利用 TypeScript 内置的 ReturnType 和 Parameters 工具类型来分别获取函数的返回值类型和参数类型: function add(a: number, b: number) { return a + b; } type AddType = typeof add; // (a: number, b: number) => number type AddReturnType = ReturnType // number type AddParamsType = Parameters<AddType> // [a: number, b: number]
既然 typeof 操作符可以处理函数对象,那么它可以处理 Class 么?答案是可以的。 class Point { x: number; y: number; constructor(x: number, y: number) { this.x = x; this.y = y; } } // new (x: number, y: number) => Point function createPoint(Constructor: typeof Point, x: number, y: number) { return new Constructor(x, y); }
在以上代码中,createPoint 是一个工厂函数,用于快速创建 Point 类的实例。通过 typeof 操作符,网站模板你就可以获取 Point 类对应的构造签名,从而实现相应的类型校验。在定义 Constructor 参数类型时,如果不使用 typeof 操作符的话,将会出现以下错误信息: function createPoint(Constructor: Point, x: number, y: number) { return new Constructor(x, y); // Error:类型 "Point" 没有构造签名。ts(2351) }
此外,在使用 typeof 操作符的过程中,如果你想要获取更精确的类型,那么你可以结合 TypeScript 3.4 版本中引入的 const 断言。具体的使用方式如下: let requestMethod = "Get"; let requestMethod2 = "Get" as const; type R0 = typeof requestMethod; // string type R1 = typeof requestMethod2; // "Get" let user = { id: 666, name: "阿宝哥", }; let user2 = { id: 666, name: "阿宝哥", } as const; // { id: number; name: string; } type U0 = typeof user; // type U1 = { readonly id: 666; readonly name: "阿宝哥"; } type U1 = typeof user2;
由以上结果可知,使用 const 断言之后,再利用 typeof 操作符,我们就可以获得更精确的类型。 关于 const 断言相关的知识点,感兴趣的话,你可以自行了解一下。而如果你对前面使用过的 keyof 操作符还不了解的话,可以观看 “TS 内置工具类型中的 keyof 操作符有啥用?” 这篇文章。 服务器托管 |