首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Typescript从映射类型中提取,道具的联合类型的特定值

在Typescript中,我们可以使用映射类型和联合类型来提取道具的特定值。映射类型允许我们在编译时转换现有类型的属性,而联合类型允许我们将多个类型组合成一个类型。

要从映射类型中提取道具的联合类型的特定值,我们可以使用索引类型查询和条件类型。索引类型查询允许我们通过属性名来访问类型的属性,而条件类型允许我们根据条件选择不同的类型。

下面是一个示例:

代码语言:txt
复制
type ExtractPropertyValue<T, K> = T extends { [P in keyof T]: K } ? T : never;

interface Person {
  name: string;
  age: number;
  gender: string;
}

type PersonWithName = ExtractPropertyValue<Person, string>; // 提取具有string类型值的属性,得到 { name: string; gender: string; }

const person: PersonWithName = {
  name: "John",
  gender: "Male",
};

console.log(person); // 输出 { name: "John", gender: "Male" }

在上面的示例中,我们定义了一个ExtractPropertyValue类型,它接受两个参数:T表示要提取属性值的类型,K表示要提取的特定属性值。使用条件类型和索引类型查询,我们检查T是否为具有属性值为K的属性的类型,如果是,则返回T,否则返回never类型。

然后,我们定义了一个Person接口,它具有nameagegender属性。我们使用ExtractPropertyValue类型来提取具有string类型值的属性,得到一个新的类型PersonWithName

最后,我们创建了一个person对象,它符合PersonWithName类型,并将其打印到控制台。

这是一个简单的示例,展示了如何从映射类型中提取道具的联合类型的特定值。在实际应用中,您可以根据需要进行更复杂的映射和提取操作。

推荐的腾讯云相关产品和产品介绍链接地址:

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

TypeScript 类型体操:合并映射类型处理结果为联合类型

索引类型TypeScript 常见类型,它是聚合多个元素类型,对象、类、元组等都是索引类型。...: TypeScript 也内置了很多基于映射类型实现工具类型,比如 Partial、Required 等。...: 而传入联合类型时候,会分别传入每个类型做处理,也就是这样: 所以直接在这里取 keyof Obj 所有索引: 总结一下:当我们需要把索引分开时候,可以加一层映射类型,在位置对每个索引做处理...,然后再传入 keyof Xxx 来取处理过后联合类型。...总结 索引类型TypeScript 常见类型,可以通过映射类型语法来对它做一些修改,生成新索引类型

1.7K40

TypeScript 基础类型:原始类型、对象类型、数组类型、元组类型、枚举类型联合类型

TypeScript 强大类型系统使得开发者能够更轻松地编写可维护、可扩展代码。本文将详细介绍 TypeScript 基础类型,包括原始类型、对象类型、数组类型、元组类型、枚举类型联合类型。...原始类型TypeScript ,有以下几种原始类型:数字类型数字类型用于表示整数或浮点数。可以使用 number 关键字来声明数字变量。...例如:enum Color { Red, Green, Blue,}let color: Color = Color.Green;在枚举类型,每个枚举成员都有一个与它关联数字,默认 0 开始...例如:let value: string | number = "Hello"; // 联合类型value = 123; // 合法联合类型可以提供更大灵活性,使得我们能够处理多种不同类型。...总结本文详细介绍了 TypeScript 基础类型,包括原始类型、对象类型、数组类型、元组类型、枚举类型联合类型等方面。

32630

【TS】1294- 搞懂 TypeScript 映射类型(Mapped Types)

本文会和大家详细介绍 TypeScript 映射类型(Mapped Type),看完本文你将学到以下知识点: 数学映射和 TS 映射类型关系; TS 映射类型应用; TS 映射类型修饰符应用...在学习 TypeScript 类型系统时,尽量多和数学集合类比学习,比如 TypeScript 联合类型,类似数学并集等。...: T[P] | undefined}:遍历 keyof T返回联合类型,并定义用 P变量接收,其每次遍历返回为可选类型 T[P]。...Exclude 联合类型中排除指定类型 用来指定联合类型中排除指定类型。 实现如下: type Exclude = T extends U ?...在学习 TypeScript 类型系统时,尽量多和数学集合类比学习,比如 TypeScript 联合类型,类似数学并集等。

2.2K10

TypeScript类型断言

本文是关于 TypeScript type assertions ,它与其他语言中类型强制转换有相似之处,并通过 as 运算符执行。...在 B 行,我们看到此类型不允许访问任何属性。 在 C 行,我们用类型断言(运算符 as)告诉 TypeScript data 是一个Array。现在就可以访问属性 .length 了。...类型断言是不得已方法,应尽可能避免。他们(暂时)删除了静态类型系统为我们提供安全网。 注意,在 A 行,我们还覆盖了 TypeScript 静态类型,不过是通过类型注释完成。...类型断言替代语法 TypeScript 对于类型断言有另一种“尖括号”语法: 1>data 该语法已经过时,并且与 React JSX 代码(在 .tsx 文件)不兼容。...`) 如果类型是包含 undefined 或 null 类型联合,则 non-nullish声明运算符(或 non-null 声明运算符)将从联合删除这些类型

3.7K40

SIL 角度看 Swift 类型与引用类型

对这个问题答案,可能最大区别就是一个是类型,而另一个是引用类型,今天我们就来具体聊聊这个区别。 那在介绍类型与引用类型之前,我们还是先来回顾一下struct与class之间区别这个问题。...class & struct 在 Swift ,其实class 与 struct之间核心区别不是很多,有很多区别是类型与引用类型这个区别隐形带来天然区别。...在需要控制建模数据恒等性时使用类。 将结构与协议搭配,通过共享实现来采用行为。 类型 & 引用类型 那在 Swift 类型与引用类型之间区别有哪些呢?...; 拷贝方式:类型拷贝是内容,而引用类型拷贝是指针,从一定意义上讲就是所谓深拷贝及浅拷贝; 在 Swift 类型除了struct之外还有enum、tuple,引用类型除了class之外还有...描述来看,我们得到最重要结论是使用类型比使用引用类型更快,具体技术指标可查看why-choose-struct-over-class[5],还有一个测试项目StructVsClassPerformance

2K20

TypeScript 数组类型定义

TypeScript 声明和初始化数组也很简单,和声明数字类型和字符串类型变量也差不多,只不过在指定数组类型时要在类型后面加上一个括号 [] 语法格式 const array_name: dataype...array: Array = ['孟浩然', 99]; 除了使用括号 [] 方法来声明数组,你还可以使用 数组泛型 来定义数组 语法格式 const array_name..., val2, val3],[v1, v2, v3]]; // 等同于 const array_name: datatype[][] = [[val1, val2, val3]]; 多维数组类型 TypeScript...等同于 const test: string[][] = [['狮子头', '清蒸鲈鱼', '鲜椒牛蛙'], ['北京烤鸭'], ['地锅鸡', '饿了']]; 声明一个二维数组 注意: 以下示例类型在数组...个 建议: 在定义数组类型时候使用数组泛型定义,这样显得更直观一点 Tuple 元组类型(元组类型允许表示一个已知元素数量和类型数组)

5.3K40

实现TypeScript互斥类型

: string }; never类型TypeScript它有一个特殊类型never,它是所有类型类型,无法再进行细分,也就意味着除了其本身没有类型可以再分配给它。...{}类型 amazing = [];// 报错:amazing是never类型不能分配给[]类型 剔除联合类型属性 有一组联合类型"a" | "b" | "c" | "d",我们想剔除属性b和c,在... // "a" | "d" 将对象所有属性转为联合类型 有一个对象它包含2个可选属性name、title,我们想把它转为联合类型name...接下来,我们来梳理下实现思路: 实现一个排除类型,用于A对象类型剔除B对象类型属性,并将排除后属性类型设为never,得到一个新对象类型。...实现代码 接下来,我们来看下代码实现,如下所示: // 定义排除类型:将UT剔除, keyof 会取出T与U所有键, 限定P取值范围为T所有键, 并将其类型设为never type Without

3.1K40

.NET类型与引用类型

.NET类型与引用类型 这是一个常见面试题,类型(Value Type)和引用类型(Reference Type)有什么区别?他们性能方面有什么区别?...比较 运行时间 时间比 分配内存 内存比 类型 32 / 102_400_024 / 引用类型 8_681 271.28x 3_440_000_304 33.59x 在这个示例,仅将类型改成引用类型...重新审视类型 类型这么好,为什么不全改用类型呢? 类型优点,恰恰也是类型缺点,类型赋值时是复制,而不是复制引用,而当值比较大时,复制非常昂贵。...在近代C里,除了类型,还加入了指向动态分配类型指针。...C#类型支持 引用类型是如此好,以至于平时完全不需要创建类型,就能完成任务了。但为什么类型仍然还是这么重要呢?

1.8K20

TypeScript 演化史 -- 7】映射类型和更好字面量类型推断

. ---- 为了保证可读性,本文采用意译而非直译。 TypeScript 2.1 引入了映射类型,这是对类型系统一个强大补充。本质上,映射类型允许w咱们通过映射属性类型现有类型创建新类型。...在方括号,使用了 keyof 操作符。keyof T 将 T 类型所有属性名表示为字符串字面量类型联合。 方括号 in 关键字表示我们正在处理映射类型。...此外,TypeScript 定义了其他映射类型,这些映射类型在各种情况下都非常有用。...更好字面量类型推断 字符串、数字和布尔字面量类型(如:"abc",1和true)之前仅在存在显式类型注释时才被推断。 TypeScript 2.1 开始,字面量类型总是推断为默认。...readonly 修饰符只限制 TypeScript 代码对属性访问,在运行时就无能为力。也就是说,它会被编译时删除掉,不会出现在生成 JS 代码

2.8K10

js类型和引用类型区别

js类型和引用类型区别 1.JavaScript变量类型有哪些?...(1)类型(基本类型):字符串(string)、数值(number)、布尔(boolean)、undefined、null (这5种基本数据类型是按访问,因为可以操作保存在变量实际)(...2、保存与复制本身 3、使用typeof检测数据类型 4、基本类型数据是类型 (2)引用类型: 1、占用空间不固定,保存在堆(当我们在程序创建一个对象时,这个对象将被保存到运行时数据区,...几方面的区别举例: (1)动态属性: 定义基本类型和引用类型方式是类似的。但是,当这个保存到变量以后,对不同类型可以执行操作则大相径庭。...复制基本类型过程: 当从一个变量向另一个变量复制引用类型时,同样也会将存储在变量对象复制一份放到为新变量分配空间中。

3.5K20

Typescript复杂类型声明

Typescript为javascript加入了众多类型声明语法,灵活使用可使代码变得健壮,不严谨类型声明会带来后期维护麻烦。...现在,我们需要一个PersonBasicInfo类型,它只包含Person类基本信息,不能包含方法,算是Person类型子集,这在一些有权限限制接口传时会使用到。...最好办法是自动筛选出Person类符合某一规则属性,生成一个新类型。怎么做到呢?...,Readonly由原有的T类型映射”成一个新类型,新类型继承T所有属性并限制其只读。...这类用到了keyof关键字类型我们称之为”映射类型“。延伸地看一下,周围还有Pick、Record等等类型声明例子,读者可以统一看一遍,有利于之后开发。

7.1K50

TypeScript高级类型工具类型及关键字

本文主要帮助理解 TypeScript 高级类型及工具类型。在实际使用 TypeScript 开发过程,得益于这些高级类型于工具类型,我们可以更方便构建出我们需要类型。...一、高级类型 泛型 泛型可以理解为一个变量,这个变量是一个类型。和函数参数一样。...属性 object // 第二个参数设置为第一个参数这个对象一个属性 // 第三个参数设置为第二个参数属性 const addAttr = <T extends {name: string},...20, // height: 10 } 字面量类型 字面量类型联合类型很像,不同之处在于,联合类型用 | 分割类型,而字面量类型分割。...交叉类型是多个类型集合,使用 “ & ”连接多个类型,使用其作为类型时必需同时满足所有类型

2.1K30

两个角度看 Typescript 类型是什么?

角度 1:类型是一组 从这个角度来看,类型是一组: 如果 myVariable 具有 MyType 类型,这意味着可以分配给 myVariable 所有都必须是集合 MyType 元素。...类型 Type1、 Type2和 Type3联合类型是定义它们集合在集合论并集。 3. 角度 2:类型兼容关系 从这个角度来看,我们不关心以及它们在执行代码时如何流动。...相反,我们采取了一种更为静态观点: 源代码有个位置,每个位置都有一个静态类型。在支持 Typescript 编辑器,如果我们将鼠标悬停在某个位置上方,就可以看到该位置静态类型。...是互相兼容,那么SourceType可以分配给 TargetType 联合类型工作方式是通过类型关系成员定义。...具有结构类型语言有 ocaml/reasonml、 Haskell 和 TypeScript 下面的代码在标准类型系统中产生类型错误(第 A 行) ,但在 Typescript 结构类型系统是合法

1.5K20

两个角度理解 TypeScript 类型是什么

翻译:疯狂技术宅 作者:Dr. Axel Rauschmayer 来源:2ality.com 正文共:1537 字 预计阅读时间:7 分钟 ? TypeScript类型是什么?...类型 Type1、Type2 和 Type3 类型联合是定义它们集合集合理论 union。 观点2:类型兼容性关系 从这个角度来看,我们不关心本身以及在执行代码时它们是如何流动。...在支持 TypeScript 编辑器,如果将光标悬停在 location 上方,则可以看到该 location 静态类型。...以下代码在名义类型系统中会产生类型错误(A 行),但在 TypeScript 结构类型系统是合法,因为类 A 和类 B 具有相同结构: class A { name = 'A'; } class...手册类型兼容性”一章:https://www.typescriptlang.org/docs/handbook/type-compatibility.html TypeScript 规范

1.5K00

探索TypeScript映射类型,从简单到高级7个实例

keyof 操作符:keyof 是TypeScript一个操作符,它返回一个类型所有属性名联合类型。...一、布尔类型转换 在TypeScript,有时候我们需要将一种类型属性转换为另一种类型。使用映射类型可以轻松实现这一点。下面我们通过一个具体例子来展示如何将User类型属性转换为布尔类型。...同样,在TypeScript映射类型可以遍历类型每个属性并对其进行转换。 二、 将类型属性设为可选 在TypeScript,我们常常需要将某个类型所有属性设为可选属性。...掌握这一技巧可以让你在开发TypeScript应用时更加灵活地处理类型转换问题。 六、创建仅包含特定类型属性类型TypeScript,我们可以使用条件类型来创建仅包含某种类型属性类型。...email: string; }; 七、使用模板字面量类型创建新属性名 在TypeScript,我们可以使用模板字面量类型来创建带有特定前缀和大写属性名类型

9910

TypeScript 顶级类型:any 和 unknown

翻译:疯狂技术宅 作者:Dr. Axel Rauschmayer 正文共:2525 字 预计阅读时间:10 分钟 ? 在 TypeScript,any 和 unknown 是包含所有类型。...在本文中,我们将会研究它们是怎样工作。 ---- TypeScript 两种顶级类型 any 和 unknown 在 TypeScript 是所谓“顶部类型”。...通常,类型是包含了其相关类型系统中所有可能[]类型。 也就是说,当把类型看作是集合时,any 和 unknown 是包含所有集合。...示例:JSON.parse( ) JSON.parse() 结果取决于动态输入,这就是其返回类型为 any 原因(我函数签名中省略了参数 reviver): JSON.parse(text: string...): any; 在 unknown 类型出现之前,JSON.parse() 就已经被添加到了 TypeScript

2.4K20

实现Nest参数联合类型校验

场景概述 我们在进行接口开发时,客户端需要传入一个名为text字段,它可能是string类型或Array类型(在TS我们把这种关系称之为 联合类型 ),class-validator...在class-transformer这个库,提供了Transform方法,它接受一个回调函数作为参数,回调函数中提供了一个TransformFnParams类型参数,其中value字段就是客户端传过来参数...: string | Array; } 上述代码,我们有一个名为checkTitleKey校验函数,因为需要自己校验,所以就需要自己把TS类型校验复刻一遍出来,实现代码如下所示...,如下所示: 全部变为可选参数,参数必传与否已经在校验函数处理了 类型全部变为any export type TextObjType = { content?...在我这个场景,对象里所有key类型校验都手动处理了,如果在此处定义了它类型,在校验函数中就会报黄色警告,因此针对于需要手动校验类型场景而言,使用any是最合适

1.2K20
领券