操作符keyof的作用是什么?

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

keyof 是 TypeScript 中的一个操作符,用于获取一个类型(通常是一个对象类型或接口)的所有公共属性名组成的字符串字面量联合类型。它常常用于类型安全的属性访问和映射类型的定义。

什么时候使用 keyof

  1. 类型安全的属性访问:当你想要基于某个对象的属性进行类型安全的操作时,可以使用 keyof 来确保属性名的正确性。
  2. 映射类型:当定义映射类型(将一种类型映射为另一种类型)时,keyof 可以帮助你获取原始类型的所有属性名。


与什么搭配?

keyof 通常与 TypeScript 的对象类型、接口、和映射类型搭配使用。

如何使用?

假设我们有一个接口 Person

interface Person {  
    name: string;  
    age: number;  
    address?: string;  
}

  1.获取所有属性名

使用 keyof 获取 Person 的所有属性名:

type PersonKeys = keyof Person;  // "name" | "age" | "address"


 2.类型安全的属性访问

使用 keyof 来确保我们只在 Person 上访问存在的属性:

function getProperty(person: Person, key: keyof Person) {  
    return person[key];  // 这里是类型安全的  
}


3.映射类型

Person 的每个属性值转换为只读(readonly):

type ReadonlyPerson = {  
    [K in keyof Person]: Readonly<Person[K]>;  
};

上述代码中,K 代表 Person 的每一个属性名,然后我们使用 Person[K] 获取该属性的类型,并用 Readonly<T> 将其转换为只读。

       4.过滤某些属性

如果你只想获取 Person 的可选属性,可以使用如下方式:

type OptionalKeys<T> = { [K in keyof T]: T[K] extends Required<T>[K] ? never : K }[keyof T];  
type OptionalPersonKeys = OptionalKeys<Person>;  // "address"


这里我们使用了一个映射类型和条件类型来筛选出所有可选的属性名。




相关文章
|
设计模式 监控 Java
解析Spring Cloud中的断路器模式原理
解析Spring Cloud中的断路器模式原理
|
监控 JavaScript Shell
AutoxJS脚本保姆级教程
AutoxJS脚本保姆级教程
689 3
|
11月前
|
前端开发 JavaScript 数据库
https页面加载http资源的解决方法
https页面加载http资源的解决方法
309 4
|
11月前
|
机器学习/深度学习 数据采集 人工智能
机器学习入门:Python与scikit-learn实战
机器学习入门:Python与scikit-learn实战
371 0
|
JavaScript
Vue3基础(23)___vue3非父子组件之间的通信
本文介绍了Vue 3中非父子组件间通信的方法,通过创建一个事件集合对象和相应的触发监听函数,实现跨组件的事件传递和监听。
236 0
|
安全 Android开发 数据安全/隐私保护
探索Android应用开发的新趋势
随着技术的不断进步,Android应用开发领域也在经历着翻天覆地的变化。从Kotlin的崛起到Flutter的流行,再到Jetpack Compose的创新,开发者们正面临着前所未有的机遇和挑战。本文将深入探讨这些新兴技术如何影响当前的开发实践,并预测它们将如何塑造未来的移动应用开发。 【7月更文挑战第26天】
208 3
|
JavaScript 前端开发
Vue,如何引入样式文件
Vue,如何引入样式文件
|
XML 缓存 前端开发
SpringMVC常见组件之HandlerAdapter分析
SpringMVC常见组件之HandlerAdapter分析
263 0
|
前端开发
前端 TS 快速入门之一:基本数据类型
前端 TS 快速入门之一:基本数据类型
235 0
|
前端开发 JavaScript 编译器
深入解析JavaScript中的异步编程:Promises与async/await的使用与原理
【4月更文挑战第22天】本文深入解析JavaScript异步编程,重点讨论Promises和async/await。Promises用于管理异步操作,有pending、fulfilled和rejected三种状态。通过.then()和.catch()处理结果,但可能导致回调地狱。async/await是ES2017的语法糖,使异步编程更直观,类似同步代码,通过事件循环和微任务队列实现。两者各有优势,适用于不同场景,能有效提升代码可读性和维护性。