首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >5个非常有用的TypeScript Typeof操作符技巧

5个非常有用的TypeScript Typeof操作符技巧

作者头像
winty
发布2024-01-15 10:07:04
发布2024-01-15 10:07:04
3680
举报
文章被收录于专栏:前端Q前端Q

在JavaScript中,你可以通过 typeof 操作符获得变量的类型,那么你知道TypeScript中使用的 typeof 操作符是什么吗? 在本文中,我将介绍5种常见的typeof操作符的应用场景,您可以在以后的项目中使用。

1. 获取对象的类型

man 对象是一个普通的JavaScript对象,在TypeScript中你可以使用type或interface来定义对象的类型。有了这个对象类型,你就可以使用TypeScript内置的工具类型,比如Partial、Required、Pick或Readonly来处理对象类型,以满足不同的需求。

对于简单的对象,这可能不是什么大问题。但是对于具有更深嵌套层次的大型复杂对象,手动定义它们的类型可能会让人感到头脑麻木。要解决这个问题,可以使用typeof操作符。

代码语言:javascript
复制
type Person = typeof man;

代码语言:javascript
复制
type Address = Person["address"];

与之前手动定义类型相比,使用typeof操作符要容易得多。 Person["address"] 是一个索引访问类型,用于查找另一个类型(Person类型)上的特定属性(address)。 2. 获取将所有枚举键表示为字符串的类型

在TypeScript中,枚举类型是被编译成常规JavaScript对象的特殊类型:

因此,也可以对枚举类型使用 typeof 操作符。但这通常没有太多实际用途,当处理枚举类型时,它通常与 keyof 操作符结合使用:

3. 获取函数对象的类型

还有另一种更常见的场景,在工作中使用typeof操作符。在获得相应的函数类型之后,你可以继续使用TypeScript内置的ReturnType和Parameters实用工具类型来分别获得函数的返回值类型和参数类型。

4. 获取类对象的类型

既然 typeof 操作符可以处理函数对象,那么它是不是也可以处理类对象呢。答案是肯定的。

在上面的代码中, createPoint 是一个工厂函数,它创建Point类的一个实例。通过typeof运算符,可以获得Point类相应的构造签名,从而实现相应的类型验证。在定义Constructor的形参类型时,如果未使用typeof操作符,将出现以下错误消息:

5. 获得更精确的类型

当使用 typeof 操作符时,如果你想获得更精确的类型,那么你可以将它与TypeScript 3.4版中引入的const断言结合使用。它的用法如下。

从上图可以看出,在使用const断言后,再使用typeof操作符,我们可以获得更精确的类型。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2024-01-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端Q 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 获取对象的类型
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档