typescript中keyof与typeof操作符怎么使用


这篇文章主要介绍“typescript中keyof与typeof操作符怎么使用”,在日常操作中,相信很多人在typescript中keyof与typeof操作符怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”typescript中keyof与typeof操作符怎么使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!TypeScript 允许我们遍历某种类型的属性,并通过 keyof 操作符提取其属性的名称。keyof 操作符是在 TypeScript 2.1 版本引入的,该操作符可以用于获取某种类型的所有键,其返回类型是联合类型。
下面我们来看个例子:除了接口外,keyof 也可以用于操作类,比如:若把 sname = “name” 改为 sname = “age” 的话,TypeScript 编译器会提示以下错误信息:Type ‘”age”‘ is not assignable to type ‘”name”‘.keyof 操作符除了支持接口和类之外,它也支持基本数据类型:let K1: keyof boolean; // let K1: “valueOf”
let K2: keyof number; // let K2: “toString” | “toFixed” | “toExponential” | …
let K3: keyof symbol; // let K1: “valueOf”此外 keyof 也称为输入索引类型查询,与之相对应的是索引访问类型,也称为查找类型。在语法上,它们看起来像属性或元素访问,但最终会被转换为类型:JavaScript 是一种高度动态的语言。有时在静态类型系统中捕获某些操作的语义可能会很棘手。以一个简单的prop 函数为例:该函数接收 obj 和 key 两个参数,并返回对应属性的值。对象上的不同属性,可以具有完全不同的类型,我们甚至不知道 obj 对象长什么样。那么在 TypeScript 中如何定义上面的 prop 函数呢?我们来尝试一下:在上面代码中,为了避免调用 prop 函数时传入错误的参数类型,我们为 obj 和 key 参数设置了类型,分别为 {} 和 string 类型。然而,事情并没有那么简单。针对上免费云主机域名述的代码,TypeScript 编译器会输出以下错误信息:Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type ‘{}’元素隐式地拥有 any 类型,因为 string 类型不能被用于索引 {} 类型。要解决这个问题,你可以使用以下非常暴力的方案:很明显该方案并不是一个好的方案,我们来回顾一下 prop 函数的作用,该函数用于获取某个对象中指定属性的属性值。因此我们期望用户输入的属性是对象上已存在的属性,那么如何限制属性名的范围呢?这时我们可以利用本文的主角 keyof 操作符:在以上代码中,我们使用了 TypeScript 的泛型和泛型约束。首先定义了 T 类型并使用 extends 关键字约束该类型必须是 object 类型的子类型,然后使用 keyof 操作符获取 T 类型的所有键,其返回类型是联合类型,最后利用 extends 关键字约束 K 类型必须为 keyof T 联合类型的子类型。 是骡子是马拉出来遛遛就知道了,我们来实际测试一下:很明显使用泛型,重新定义后的 prop(obj: T, key: K) 函数,已经可以正确地推导出指定键对应的类型。那么当访问 todo 对象上不存在的属性时,会出现什么情况?比如:对于上述代码,TypeScript 编译器会提示以下错误:Argument of type ‘”date”‘ is not assignable to parameter of type ‘”id” | “text” | “done”‘.这就阻止我们尝试读取不存在的属性。在使用对象的数值属性时,我们也可以使用 keyof 关键字。请记住,如果我们定义一个带有数值属性的对象,那么我们既需要定义该属性,又需要使用数组语法访问该属性, 如下所示:下面我们来举个示例,介绍一下在含有数值属性的对象中,如何使用 keyof 操作符来安全地访问对象的属性:上面的代码中,首先定义了一个 Currency 枚举用于表示三种货币类型,接着定义一个 CurrencyName 对象,该对象使用数值属性作为键,对应的值是该货币类型的名称。该代码成功运行后,控制台会输出以下结果:为了方便用户能根据货币类型来获取对应的货币名称,我们来定义一个 getCurrencyName 函数,具体实现如下:同样,getCurrencyName 函数和前面介绍的 prop 函数一样,使用了泛型和泛型约束,从而来保证属性的安全访问。最后,我们来简单介绍一下 keyof 与 typeof 操作符如何配合使用。typeof 操作符用于获取变量的类型。因此这个操作符的后面接的始终是一个变量,且需要运用到类型定义当中。为了方便大家理解,我们来举一个具体的示例:了解完 typeof 和 keyof 操作符的作用,我们来举个例子,介绍一下它们如何结合在一起使用:最后留到思考题,有兴趣的小伙伴可以想一想:到此,关于“typescript中keyof与typeof操作符怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注百云主机网站,小编会继续努力为大家带来更多实用的文章!

相关推荐: 怎么用matlab代码解决单目标优化问题

这篇“怎么用matlab代码解决单目标优化问题”文章的知识点大部分人都不太理解,所以小编给大家总结了以免费云主机域名下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么用matlab代码解决单目标优化问…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 03/16 08:50
下一篇 03/16 08:50

相关推荐