正文

在 JavaScript 中,你可以通过操作符获取变量的类型typeof,那么你知道typeofTypeScript 中使用的是什么操作符吗?在本文中,我将介绍 typeof 运算符的 5 个常见应用场景,你可能会在以后的项目中使用它们。

1.获取对象的类型

对象是一个普通的manJavaScript 对象,在 TypeScript 中你可以使用类型或接口来定义对象的类型。使用这种对象类型,您可以使用 TypeScript 的内置实用程序类型,例如 Partial、Required、Pick 或 Readonly,来处理对象类型以满足不同的需求。

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

type Person = typeof man;
type Address = Person["address"];

与之前手动定义类型相比,使用 typeof 运算符变得容易得多。Person["address"]是一种索引访问类型,用于在另一种类型(Person 类型)上查找特定属性(地址)。

2.获取一个将所有枚举键表示为字符串的类型

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

因此,您也可以typeof在枚举类型上使用运算符。但这通常没有太大的实际用途,在处理枚举类型时,通常与keyof运算符结合使用:

3.获取函数对象的类型

还有另一种更常见的场景,在您的工作中使用 typeof 运算符。获取到对应的函数类型后,可以继续使用TypeScript内置的ReturnTypeParameters实用类型分别获取函数的返回值类型和参数类型。

4.获取类对象的类型

既然typeof操作符可以处理函数对象,那么它可以处理Class对象吗?答案是肯定的。

在上面的代码中,createPoint是一个创建 Point 类实例的工厂函数。通过typeof操作符可以获取Point类对应的构造签名,从而实现对应的类型校验。在定义Constructor的参数类型时,如果没有使用typeof操作符,会出现如下错误信息:

5. 获得更精确的类型

在使用typeof操作符的时候,如果你想得到更精确的类型,那么你可以将它与TypeScript 3.4 版本中引入的const 断言结合起来。 这以以下方式使用。

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

以上就是TypeScript Typeof运算符的5个实用技巧详解的详细内容,更多关于TypeScript Typeof运算符的资料请关注Devmax其它相关文章!

TypeScript Typeof运算符的5个实用技巧详解的更多相关文章

  1. InputTransparent = true在Xamarin Forms Android中不起作用

    解决方法InputTransparent不适用于Android.我为StackLayout创建了简单的渲染:在PCL项目中:在Android项目中:我在我的xaml中使用它:这是儿童控制的工作.

  2. 使用typescript类型实现ThreeSum

    这篇文章主要介绍了使用typescript类型实现ThreeSum,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以一下,希望对你学习又是帮助

  3.  typeScript入门基础介绍

    这篇文章主要介绍了 typeScript入门基础,TypeScript 是由微软开发的开源、跨平台的编程语言,是 javaScript 的超集,最终被编译为 javaScript代码。常常被简称为TS支持JS、ES语法,下文将继续其他基础介绍,需要的朋友可以参考一下

  4. typescript返回值类型和参数类型的具体使用

    本文主要介绍了typescript返回值类型和参数类型的具体使用文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. php 运算符与表达式详细介绍

    运算符和表达式是php学习中最基础的知识,本文章通过实例向大家讲解一下运算符和表达式在php中的一些应用和技巧,以及需要注意的地方,需要的朋友可以参考一下。

  6. Vue3 携手 TypeScript 搭建完整项目结构

    TypeScript 是JS的一个超级,主要提供了类型系统和对ES6的支持,使用 TypeScript 可以增加代码的可读性和可维护性,在 react 和 vue 社区中也越来越多人开始使用TypeScript,这篇文章主要介绍了Vue3 携手 TypeScript 搭建完整项目结构,需要的朋友可以参考下

  7. 关于TypeScript开发的6六个实用小技巧分享

    TypeScript是Javascrip t超集,支持静态类型检测,可以在编译期提前暴露问题,节省debug时间,下面这篇文章主要给大家介绍了关于TypeScript开发的6六个实用小技巧,需要的朋友可以参考下

  8. typescript+react实现移动端和PC端简单拖拽效果

    这篇文章主要为大家详细介绍了typescript+react实现移动端和PC端简单拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. Vue3 TypeScript 实现useRequest详情

    本文介绍了Vue3 TypeScript实现useRequest详情,useRequest可能是目前社区中最强大,最接地气的请求类 Hooks了。可以覆盖99%的网络请求场景,无论是读还是写,无论是普通请求还是分页请求,无论是缓存还是防抖节流,通通都能支持,关于其介绍需要的小伙伴可以参考一下

  10. Javascript基础:运算符与流程控制详解

    这篇文章主要给大家介绍了关于Javascript中运算符及流程控制的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部