TS系列之keyof详解,示例

文章目录

  • 前言
  • 一、keyof是什么
  • 总结


前言

如果你用过TS的工具类型,Partial、Required、Pick、Record。那么你可能看过他们内部实现都有共同点就是keyof关键字。即使没有见过,那么下面就一起来了解一下,keyof关键字的详细作用吧。


一、keyof是什么

1、在JavaScript中我们想要获取一个对象的key可以通过Object.keys(obj)来获取

const obj = {
	name: 'test',
	age: 18
}
Object.keys(obj)
//  ['name', 'age']

2、那么在TypeScript中我们呢想要获取一个类型中的所有键,例如:

type ObjType = {
  name: string;
  age: number;
}
type Obj = keyof ObjType
const testObj: Obj = 'name'
const testObj2: Obj = 'age'

那么通过keyof ObjType所获取到的类型就是包含‘name’和’age’联合类型的类型。
那么这有什么用呢,看下面的例子:

在这里插入图片描述
在这里插入图片描述
看到上面你可能觉得这很像是对象中,通过key来获取key所对应属性值的方式。你也可以这么理解,但这是用来获取类型中key所对应的类型。
在这里插入图片描述
一道面试题。用ts定义一个获取对象属性值的方法
基本思路分析:
1、首先传入一个对象,和想要获取值的key
2、如何约束类型
3、直接定义参数类型,尝试一下定义。依然编译错误

function getValue(obj: object, key: string) {
 return obj[key]
}

4、正解:

const obj = {
	name: 'test',
	age: 18
}
function getValue<T extends object, K extends keyof T> (obj: T, key: K) {
  return obj[key]
}

//test
getValue(obj, 'name')
getValue(obj, 'age')
getValue(obj, 'sex')

结果:
在这里插入图片描述
3、其他用法
例如:
基本类型
可以看到的是获取的联合类型是根据基本类型所包含的属性方法的键名。
例如string的:

type T1 = number | typeof Symbol.iterator | “toString” | “charAt” | “charCodeAt” | “concat” | “indexOf” | “lastIndexOf” | “localeCompare” | “match” | “replace” | “search” | “slice” | … 35 more … | “matchAll”

例如any的:

type T1 = string | number | symbol

type T1 = keyof string
type T2 = keyof number
type T3 = keyof boolean
type T4 = keyof any

class Test {
  name: string;
  age: number;
  constructor () {
    this.name = '1'
    this.age = 1
  }
  
}
type classTest = keyof Test

总结

keyof基本功能用法就这些,如果还有其他办法,可以评论区分享学习,如果有错误,欢迎指出。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/28723.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于Java家政服务网站系统设计实现(源码+lw+部署文档+讲解等)

博主介绍&#xff1a; ✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精…

今天面了个京东拿 38K 出来的,让我见识到了基础的天花板

今年的春招结束了&#xff0c;而秋招也马上要开始了&#xff0c;很多小伙伴收获不错&#xff0c;拿到了心仪的 offer。 各大论坛和社区里也看见不少小伙伴慷慨地分享了常见的面试题和八股文&#xff0c;为此咱这里也统一做一次大整理和大归类&#xff0c;这也算是划重点了。 …

应聘求职自荐信优秀范文5篇

应聘求职自荐信优秀范文篇1 尊敬的领导&#xff1a; 您好!衷心的感谢您在百忙之中翻阅我的这份材料&#xff0c;并祝愿贵单位事业欣欣向荣&#xff0c;蒸蒸日上! 我是哈尔滨理工大学测控技术及通信工程学院________届毕业生&#xff0c;自从今日大学之后&#xff0c;高考后的轻…

Python实现面向对象版学员管理系统

如有错误&#xff0c;敬请谅解&#xff01; 此文章仅为本人学习笔记&#xff0c;仅供参考&#xff0c;如有冒犯&#xff0c;请联系作者删除&#xff01;&#xff01; 1.1需求分析 1.1.1使用面向对象编程思想完成学员管理系统的开发&#xff0c;具体如下&#xff1a; 系统要求…

Linux防火墙学习笔记12

iptables nat表应用案例&#xff1a; nat表作用&#xff1a; 导流 nat表作用位置&#xff1a; KVM或者OpenStack中虚拟机或云主机与外部通信。&#xff08;云主机导流&#xff09; Docker管理的容器与外部通信 nat表规则动作所对应的链&#xff1a; SNAT 源地址转换 应…

CSS--Java EE

在前端的代码中&#xff0c;CSS 相关的代码写在什么位置呢&#xff1f; CSS 可以写在<style>标签中外部引入&#xff1a;输入 link: css写在 div 标签中 目录 一、选择器的种类 1 基础选择器 1.1 类选择器 1.2 id选择器 1.3 标签选择器 1.4 通用选择器 小结 2 …

facebook文本生成音乐项目-audiocraft 安装教程

文章目录 所需环境安装ffmpeg克隆项目仓库安装相关依赖库运行项目模型下载自动下载模型失败MusicGen 模型下载地址 所需环境 ffmpegpython>3.9gitcuda118&#xff08;torch>2.0&#xff09; 安装ffmpeg 下载地址 下载后解压&#xff0c;然后将解压后的目录配置到系统…

电影《天空之城》观后感

上周看了电影《天空之城》这部电影&#xff0c;这部电影是六一儿童节时上映的&#xff0c;本周也算是补票吧&#xff0c;童年时&#xff0c;看的都是免费的&#xff0c;早已经忘记是在哪里看到的&#xff0c;但当时对自己触动很大&#xff0c;算是启蒙电影&#xff0c;所以今天…

Tinker 组件修复,踩坑

1、You need to use a Theme.AppCompat theme (or descendant) with this activity. 复现步骤 补丁加载成功之后重启应用&#xff0c;再退出应用重进闪退 日志 TinkerUncaughtHandler catch exception:java.lang.IllegalStateException: You need to use a Theme.AppCompat th…

网络传输中的那些编码之-UTF8编码漫谈

编码为什么是一个重要的话题&#xff0c;因为我们和计算机交互的主要方式目前还是文字字符。作为一个程序员&#xff0c;相信大部分都都被字符和编码的问题折磨过&#xff0c;从键盘输入文字字符到编辑器 中&#xff0c;编辑器存储字符到硬盘&#xff0c;再到具体一个编程语言如…

Java 八股文-基础篇

Java 基础 一、Java 概述 1.什么是 Java&#xff1f; Java 是一门面向对象的编程语言&#xff0c;不仅吸收了 C语言的各种优点&#xff0c;还摒弃了 C里难以理解的多继承、指针等概念&#xff0c;因此 Java 语言具有功能强大和简单易用两个特征。Java 语言作为静态面向对象编…

NB-lot和LoRa真正的差别在哪里?

就像要把大象装冰箱一样&#xff0c;物联网&#xff0c;万物互联也是要分步骤的。 一、感知层(信息获取层)&#xff0c;即利用各种传感器等设备随时随地获取物体的信息; 二、网络层(信息传输层)&#xff0c;通过各种电信网络与互联网的融合&#xff0c;将物体的信息实时准确地…

Mybatis学习之插件

Mybatis学习之插件 Plugins Mybatis中的插件虽然名称叫插件&#xff0c;但实质上是通过动态代理实现的。和我们平时讲的插件概念不一样&#xff0c;但是本质上都是给外部提供接口进行扩展。 MyBatis 允许我们在映射语句执行过程中的某一点进行拦截调用。MyBatis允许我们使用…

浪潮 KaiwuDB x 大数据中心 | 数据驱动政府治理能力快速提升

业务背景 我国工业互联网大数据资源存在孤立、分散、封闭等问题&#xff0c;数据价值未能得到有效利用&#xff0c;数据主权和数据安全面临重大威胁。 发挥数据对工业经济的基础支撑和创新引擎作用&#xff0c;可促进工业互联网的创新发展&#xff0c;加速数据驱动政府治理能…

CVPR23 | 可编辑3D场景布局的文本引导多对象合成NeRF

来源&#xff1a;投稿 作者&#xff1a;橡皮 编辑&#xff1a;学姐 论文链接&#xff1a;https://arxiv.org/abs/2303.13843 0.背景&#xff1a; 最近&#xff0c;文本到图像生成通过将视觉-语言预训练模型与扩散模型相结合&#xff0c;取得了巨大的成功。这些突破也使得强大…

cortex A7核按键中断实验

cortex A7核按键中断实验 一、分析电路图 实验目的&#xff1a;完成板子三个按键操作 1.1 电路图IO口 KEY1------>PF9 KEY2------>PF7 KEY3------>PF8 1.2 工作原理 KEY1 ------> PF9 ------> 按键触发方式&#xff1a;下降沿触发 KEY2 ------> PF7 …

HarmonyOS元服务端云一体化开发快速入门(上)

一、前提条件 您已使用已实名认证的华为开发者帐号登录DevEco Studio。 请确保您的华为开发者帐号余额充足&#xff0c;账户欠费将导致云存储服务开通失败。 二、选择云开发模板 1.选择以下任一种方式&#xff0c;打开工程创建向导界面。 如果当前未打开任何工程&#xff0c…

Question Log

Question Log 提示&#xff1a;记录一下平常遇到的坑 Question Log&#xff08;★ &#xff1e; &#xff09; Question LogⅠ、★ &#xff1e; 使用VsCode构建Unity开发环境1.环境配置2.遇到的相关问题★.The .NET Core SDK cannot be located: A valid dotnet installation …

JS + 浮动 + 递归实现图片瀑布流懒加载

思路 页面 pege 分成左浮动的数列 lineBox&#xff0c;每列中图片 sinImg 依次向下摆放每加载一张图片时&#xff0c;判断页面中哪列的高度最小&#xff0c;将当前图片放到最小的那列尾部监听当前图片 onload 事件&#xff0c;当前图片加载完成后&#xff0c;再加载下一张图片…

力扣题库刷题笔记5--最长回文子串

1、题目如下&#xff1a; 2、个人Python代码实现&#xff1a; 首先想到的是通过类似冒泡排序的方式进行切片&#xff0c;然后判断切片的子字符串是否为回文字符串&#xff0c;然后记录出最长的回文字符串&#xff0c;代码如下&#xff1a; 可以看到&#xff0c;通过切片的方式&…
最新文章