操作符keyof的作用是什么?

简介: 操作符keyof的作用是什么?

在 TypeScript 中,keyof 操作符用于获取一个类型的所有属性名组成的联合类型。它可以用来创建泛型函数或接口,用于操作对象的属性名称而不是属性值。

例如,假设我们有一个名为 Person 的接口:

interface Person {
  name: string;
  age: number;
  gender: "male" | "female";
}

如果我们想要定义一个函数,将 Person 对象中某个属性的值取出来,但是我们不想写死这个属性的名称,而是希望能够根据传入的字符串参数动态获取属性名称,那么就可以使用 keyof 操作符来定义泛型类型参数:

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

在这个例子中,我们定义了一个泛型函数 getProperty,它接受一个对象 obj 和一个属性名 key,并返回指定属性名的属性值。通过使用 keyof T 来约束类型参数 K,我们限制了 key 参数必须是 T 类型的属性名之一。

我们可以使用这个函数来获取 Person 对象中指定属性的值:

const person: Person = {
  name: "Alice",
  age: 30,
  gender: "female"
};
getProperty(person, "name"); // "Alice"
getProperty(person, "age"); // 30
getProperty(person, "gender"); // "female"
getProperty(person, "salary"); // Error: 类型“"salary"”的参数不能赋给类型“"name" | "age" | "gender"”的参数

总之,keyof 操作符可以用来获取类型的所有属性名组成的联合类型,而在泛型函数或接口中使用 keyof 操作符可以对属性名称进行操作,从而实现更加灵活和可重用的代码。

相关文章
|
数据采集 机器学习/深度学习 编解码
MMdetection框架速成系列 第02部分:整体算法流程+模型搭建流程+detection训练与测试核心组件+训练部分与测试部分的核心算法
众所周知,目标检测算法比较复杂,细节比较多,难以复现,而我们推出的 MMDetection 开源框架则希望解决上述问题。目前 MMdetection 已经复现了大部分主流和前沿模型,例如 Faster R-CNN 系列、Mask R-CNN 系列、YOLO 系列和比较新的 DETR 等等,模型库非常丰富,star 接近 13k,在学术研究和工业落地中应用非常广泛。
2234 0
|
11月前
|
缓存 前端开发 JavaScript
利用代码分割优化前端性能:策略与实践
在现代Web开发中,代码分割是提升页面加载性能的有效手段。本文介绍代码分割的概念、重要性及其实现策略,包括动态导入、路由分割等方法,并探讨在React、Vue、Angular等前端框架中的具体应用。
|
11月前
|
运维 监控 JavaScript
鸿蒙next版开发:分析JS Crash(进程崩溃)
在HarmonyOS 5.0中,JS Crash指未处理的JavaScript异常导致应用意外退出。本文详细介绍如何分析JS Crash,包括异常捕获、日志分析和典型案例,帮助开发者定位问题、修复错误,提升应用稳定性。通过DevEco Studio收集日志,结合HiChecker工具,有效解决JS Crash问题。
444 4
|
9月前
|
算法
基于梯度流的扩散映射卡尔曼滤波算法的信号预处理matlab仿真
本项目基于梯度流的扩散映射卡尔曼滤波算法(GFDMKF),用于信号预处理的MATLAB仿真。通过设置不同噪声大小,测试滤波效果。核心代码实现数据加载、含噪信号生成、扩散映射构建及DMK滤波器应用,并展示含噪与无噪信号及滤波结果的对比图。GFDMKF结合非线性流形学习与经典卡尔曼滤波,提高对非线性高维信号的滤波和跟踪性能。 **主要步骤:** 1. 加载数据并生成含噪测量值。 2. 使用扩散映射捕捉低维流形结构。 3. 应用DMK滤波器进行状态估计。 4. 绘制不同SNR下的轨迹示例。
|
存储 算法 C++
【C++】详解STL容器之一的 vector
【C++】详解STL容器之一的 vector
|
10月前
|
缓存 监控 前端开发
探索前端性能优化:关键策略与代码实例
本文深入探讨前端性能优化的关键策略,结合实际代码示例,帮助开发者提升网页加载速度和用户体验,涵盖资源压缩、懒加载、缓存机制等技术。
|
11月前
|
监控 前端开发 JavaScript
前端开发的终极奥义:如何让你的代码既快又美,还不易出错?
【10月更文挑战第31天】前端开发是一个充满挑战与机遇的领域,本文从性能优化、代码美化和错误处理三个方面,探讨了如何提升代码的效率、可读性和健壮性。通过减少DOM操作、懒加载、使用Web Workers等方法提升性能;遵循命名规范、保持一致的缩进与空行、添加注释与文档,让代码更易读;通过输入验证、try-catch捕获异常、日志与监控,增强代码的健壮性。追求代码的“快、美、稳”,是每个前端开发者的目标。
141 3
|
11月前
|
前端开发 JavaScript 开发者
前端开发的终极技巧:如何让你的代码既简洁又高效,还能减少bug?
【10月更文挑战第30天】前端开发充满挑战与创新,如何编写简洁高效且少bug的代码是开发者关注的重点。本文介绍五大技巧:1. 模块化,提高代码复用性;2. 组件化,降低代码耦合度;3. 使用现代框架,提高开发效率;4. 统一代码规范,降低沟通成本;5. 利用工具,优化代码质量。掌握这些技巧,让前端开发更高效。
464 1
|
11月前
|
前端开发 JavaScript 开发者
揭秘前端高手的秘密武器:深度解析递归组件与动态组件的奥妙,让你代码效率翻倍!
【10月更文挑战第23天】在Web开发中,组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身,适用于处理层级结构数据,如菜单和树形控件。动态组件则根据数据变化动态切换组件显示,适用于不同业务逻辑下的组件展示。通过示例,展示了这两种组件的实现方法及其在实际开发中的应用价值。
170 1
|
JavaScript 前端开发 开发者
成功解决:el-popconfirm组件来确认删除、修改等操作无效
这篇文章提供了解决Element UI中el-popconfirm组件在执行确认删除、修改等操作时无效问题的步骤和方法,包括确认方法创建、检查版本兼容性、解决组件作用域问题、确保文本和CSS无冲突、检查事件绑定、预期问题和调试提示。
成功解决:el-popconfirm组件来确认删除、修改等操作无效