【TS】映射类型(in keyof)

news/2025/1/15 23:58:32/

文章目录

    • 基本用法
    • 泛型工具类型
    • 索引查询类型

基本用法

  • 映射类型 : 基于旧类型创建新类型(对象类型),减少重复,提升开发效率。
  • 注意:映射类型只能在类型别名中使用,不能在接口中使用。

用法1: 根据联合类型创建新类型

// 类型 ProKeys 有x/y/z,另一个类型Type1中也有x/y/z,并且Type1中的x/y/z类型相同
type ProKeys = 'x' | 'y' | 'z';// 现在这种书写方式相当于x/y/z重复书写了两次。
type Type1 = {x: number; y:number; z:number}
  • 上面这种情况就可以使用映射类型来进行简化:
type ProKeys = 'x' | 'y' | 'z';
type Type2 = {[Key in ProKeys]:number}
  • 分析:
1. 映射类型是基于索引签名类型的,所以该语法也使用了 []
2. Key in ProKeys 表示 Key 可以是PorKeys 联合类型中的任意一个
3. 使用映射类型创建的新对象 Type2 和 Type1 结构完全相同

用法2: 根据对象类型创建新类型

type Props = {a: number; b: string; c: boolean};
type Type3 = {[key in keyof Props]: number}
// 相当于
type Type3 = {a: number; b: number; c: number};
  • 分析:
1. 首先,先执行 keyof Props 获取对象类型 Props所有建的联合类型('a'|'b'|'c'2. 然后,key in ...就表示Key可以是Props中所有的键名称中的任意一个。

泛型工具类型

实际上,泛型工具类型(比如: Partial<Type>)都是基于映射类型实现的

  • Partial<Type>的实现:
type Partial<T> = {[P in keyof T]?:T[P];
}type Props = {a: number; b: string; c: boolean};
type PartialProps = Partial<Props>
  • 分析:
1. keyof T 即 keyof Props 表示获取 Props的所有键,也就是:'a'|'b'|'c'
2.[] 后面添加 ?(问号),表示将这些属性变为可选的,以此来实现Partial的功能
3. 冒号后面的T[P]表示获取T中每个键对应的类型,比如:a 对应的 是 number
4. 最终,新类型 PartialProps 和旧类型 Props 结构完全相同,只是让所有类型都变成可选了。

索引查询类型

  • T[P]语法,在TS中叫做索引查询(访问)类型,用于查询属性的类型。
type Props = {a: number; b: string; c: boolean};
type TypeA = Props['a'];
// 相当于
type TypeA = number;
  • Props['a'] 表示查询类型 Props 中属性 a 对应的类型 number。
  • 注意:[]中的属性必须存在于被查询类型中,否则就会报错。

索引查询类型也可以同时查询多个索引的类型

type Props = {a: number; b: string; c: boolean};// 使用字符串字面量的联合类型,获取属性 a 和 b 对应的类型
type TypeA = Props['a' | 'b'];	// string | number// 使用 keyof 操作符获取 Props 中所有键对应的类型
type TypeA = Props[keyof Props];	// string | number | boolean

http://www.ppmy.cn/news/9293.html

相关文章

统计大写字母-C语言实现

任务描述 本关任务&#xff1a;统计大写字母个数。 相关知识 视频1 初识文本处理之单词计数II — C 语言的逻辑运算符 逻辑运算符 C 语言定义了3个逻辑运算符&#xff0c;其表示方法及含义如下表所示。 逻辑运算C语言符号表示说明与&&双目运算符&#xff0c;若两个…

java流程控制的三种类型

1. 简介 在Java项目中&#xff0c;大多数的代码都是编写在一个个的类里面。每个类中还有很多个语句&#xff0c;并且会以英文的分号;来表示语句的结束。有些小白会很好奇&#xff0c;这一行行的代码语句是按照什么顺序执行的呢&#xff1f;是按照我们看到的从上到下的顺序执行…

【MySQL】MySQL基本数据类型

序号系列文章1【MySQL】MySQL介绍及安装2【MySQL】MySQL基本操作详解3【MySQL】MySQL基本数据类型文章目录1&#xff0c;数字类型1.1&#xff0c;整型类型1.2&#xff0c;浮点数类型1.3&#xff0c;定点数类型1.4&#xff0c;BIT类型1.5&#xff0c;直接常量2&#xff0c;时间和…

Vue+Echarts监控大屏实例十六:Echarts对接天地图插件开发

一、实例概述 本实例实现echarts使用天地图组件的开发,通过修改echarts中百度地图及高德地图插件实现echarts中使用天地图的使用。本实例实现对于监控界面的相关开发资料,提供实例源码、开发过程视频及实现过程。   1. Echarts参考文档: echarts   2. 高德地图插件:ech…

Seata应用

下载seata-server 下载地址&#xff1a;Tags seata/seata GitHub 配置Seata-server 第一步&#xff1a;配置seata-server数据源 E:\seata-server-1.4.2\seata\seata-server-1.4.2\conf\file.conf 第二步&#xff1a;创建seata数据库 create database seata 第三步&#xf…

PCL中常用的高级采样方法

0. 简介 我们在使用PCL时候&#xff0c;常常不满足于常用的降采样方法&#xff0c;这个时候我们就想要借鉴一些比较经典的高级采样方法。这一讲我们将对常用的高级采样方法进行汇总&#xff0c;并进行整理&#xff0c;来方便读者完成使用 1. 基础下采样 1.1 点云随机下采样 …

NET餐厅管理系统前端js-dwz.core

(function($){ // DWZ set regional $.setRegional function(key, value){ if (!$.regional) $.regional {}; $.regional[key] value; }; $.fn.extend({ /** * param {Object} op: {type:GET/POST, url:ajax请求地址…

Leetcode:239. 滑动窗口最大值(C++)

目录 问题描述&#xff1a; 实现代码和解析&#xff1a; 暴力法&#xff08;会超时&#xff09;&#xff1a; 原理思路&#xff1a; 单调队列法&#xff1a; 原理思路&#xff1a; 单调队列&#xff1a; 模拟过程&#xff1a; 问题描述&#xff1a; 给你一个整数数组…