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

typescript如何在联合中查找与另一个对象文字匹配的类型?

在TypeScript中,可以使用条件类型和索引类型来实现在联合类型中查找与另一个对象文字匹配的类型。

具体实现步骤如下:

  1. 首先,定义一个联合类型,包含多个可能的对象文字类型。例如:
代码语言:txt
复制
type MyUnion = { type: 'A'; value: number } | { type: 'B'; value: string } | { type: 'C'; value: boolean };
  1. 然后,定义一个条件类型,使用索引类型查询操作符keyof和索引访问操作符[]来查找与另一个对象文字匹配的类型。例如:
代码语言:txt
复制
type FindMatchingType<T, U> = T extends { type: U } ? T : never;
  1. 最后,使用条件类型来查找与另一个对象文字匹配的类型。例如:
代码语言:txt
复制
type MatchingType = FindMatchingType<MyUnion, 'B'>;

在上述示例中,MatchingType将被推断为{ type: 'B'; value: string },因为它是与对象文字{ type: 'B'; value: string }匹配的类型。

这是一个简单的示例,你可以根据实际需求进行扩展和调整。关于TypeScript的更多信息和用法,请参考腾讯云的TypeScript文档:TypeScript - 腾讯云

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

相关·内容

编写高效 TS 代码的一些建议

「形状」: type Options = typeof INIT_OPTIONS; 而在使用可辨识联合(代数数据类型或标签联合类型)的过程中,也可能出现重复代码。...: "Studio", // 与预期格式不匹配 }; 虽然 releaseDate 和 recordingType 的值与预期的格式不匹配,但此时 TypeScript 编译器并不能发现该问题。...说到这里相信有一些小伙伴已经想到了 keyof 操作符,它是 TypeScript 2.1 版本引入的,可用于获取某种类型的所有键,其返回类型是联合类型。...return double(x); // Error } 为什么会提示以上的错误呢?因为当 TypeScript 编译器处理函数重载时,它会查找重载列表,直到找一个匹配的签名。...条件类型使用起来很简单,与 JavaScript 中的三目运算符(?:)一样的规则。T extends string ?

3.2K61

【TypeScript 4.5】003-第 3 章 常用类型

string:字符串类型,如“Hello World!”; number:数字类型,包含整数、小数等,如100,-44,1.25; boolean:布尔类型,只有 true 与 false 两个值!...一种是可以改变,一种是不可改变 这反应在 TypeScript 就是如何为文字创建类型。...// 方式2 十二、null 和 undefined 类型 1、概述 null 表示不存在 undefined 表示未初始化的值 TypeScript 有两个与之对应的类型!...与大多数 TypeScript 功能不同 这个不是 JavaScript 类型级别里面添加的内容 而是添加到 TypeScript 语言和运行时的内容 只有确定确实需要枚举来做些事情的时候 否则没有必要使用它...1、概述 JavaScript 一些不太常用的原语在 TypeScript 中也实现了 我们来学习两个:bigint(非常大的整数) 和 symbol(全局唯一引用)。

9510
  • 【TypeScript 演化史 -- 6】对象扩展运算符和 rest 运算符及 keyof 和查找类型

    如果一个属性同时出现在两个对象中,则后分配的会替换前面的。 当然,TypeScript 理解这种顺序。...对象扩展仅拷贝属性值,如果一个值是对另一个对象的引用,则可能导致意外的行为。 keyof 和查找类型 JS 是一种高度动态的语言。在静态类型系统中捕获某些操作的语义有时会很棘手。...一个对象的不同属性可以有完全不同的类型,咱们甚至不知道 obj 是什么样子的。 那么如何在 TypeScript 中编写这个函数呢?...} TypeScript 现在以推断 prop 函数的返回类型为 T[K],这个就是所谓的 索引类型查询 或 查找类型。...另一个真实的示例,请查看与TypeScript编译器一起发布的 lib.es2017.object.d.ts 类型声明文件中Object.entries()方法: interface ObjectConstructor

    2.6K30

    TypeScript 之父简介:TS Anders Hejlsberg: Introducing TypeScript参考资料TypeScript入门指南(JavaScript的超集)

    非常易学和易于理解 语言特性 类 接口 模块 类型注解 编译时类型检查 Arrow 函数 (类似 C# 的 Lambda 表达式) JavaScript 与 TypeScript 的区别 TypeScript...是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码无需做任何修改便可与TypeScript一起使用,TypeScript 通过类型注解提供编译时的静态类型检查...编译器会进行与Nodejs相似的流程来解析导入,沿着目录链查找与将要导入相匹配的带.ts或.d.ts扩展名的文件。 导入失败不会报error,因为可能已经声明了外部模块。...Type可能被命名(比如,类和接口),或匿名(比如,对象类型)。...这些仅为用户输出的抽象表现,以树的形式。 一个SourceFile对象表示一个给定文件的AST并且带有一些额外的信息如文件名及源文件内容。

    2.2K20

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

    TypeScript 强大的类型系统使得开发者能够更轻松地编写可维护、可扩展的代码。本文将详细介绍 TypeScript 中的基础类型,包括原始类型、对象类型、数组类型、元组类型、枚举类型和联合类型。...原始类型在 TypeScript 中,有以下几种原始类型:数字类型数字类型用于表示整数或浮点数。可以使用 number 关键字来声明数字变量。...也可以手动指定枚举成员的数值。联合类型联合类型用于表示一个变量可以是多种类型之一。可以使用 类型1 | 类型2 | ... 的语法来声明联合类型。...类型推断和类型断言TypeScript 具有强大的类型推断能力,它可以根据上下文自动推断变量的类型。例如,如果我们在定义变量时直接赋值,TypeScript 可以推断出变量的类型。...总结本文详细介绍了 TypeScript 的基础类型,包括原始类型、对象类型、数组类型、元组类型、枚举类型和联合类型等方面。

    87230

    【TS】251- TypeScript 3.5发布:速度提升、工具智能

    测试结果表示,在 --build 模式下使用 TypeScript 的项目引用的数百个场景中,与 TypeScript 3.4 相比,重新构建时间可减少 68%。...改进了联合 type 中的多余属性检查 TypeScript 在对象中有一个称为多余属性检查的功能,此功能旨在检测 type 不符合特定属性时的问题。...如下,TypeScript 3.4 允许对象中的 name 属性不正确,即使它的 type 在 Point 和 Label 之间都不匹配。...}; 因为不会对成员进行任何多余的属性检查,所以错误的 name 不会被在意,但在 TypeScript 3.5 中,现在 type 检查器至少会验证所有提供的属性是否属于某个联合成员并具有适当的类型,...UI 库(如 React)中对类组件进行操作的函数可以更正确地对泛型类组件进行操作。

    86830

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

    来看看如何在不使用映射类型的情况下在类型系统中对其进行编码: interface Point { x: number; y: number; } interface FrozenPoint {...对于希望在应用程序中冻结的每种类型的对象,咱们就必须定义一个包装器函数,该函数接受该类型的对象并返回冻结类型的对象。没有映射类型,咱们就不能以通用的方式静态地使用 Object.freeze()。...使用映射类型构建 Object.freeze() 来看看 Object.freeze()是如何在 lib.d.ts 文件中定义的: /** * Prevents the modification...在方括号中,使用了 keyof 操作符。keyof T 将 T 类型的所有属性名表示为字符串字面量类型的联合。 方括号中的 in 关键字表示我们正在处理映射类型。...更好的字面量类型推断 字符串、数字和布尔字面量类型(如:"abc",1和true)之前仅在存在显式类型注释时才被推断。从 TypeScript 2.1 开始,字面量类型总是推断为默认值。

    2.9K10

    【TypeScript 演化史 — 第六章】对象扩展运算符和 rest 运算符及 keyof 和查找类型

    如果一个属性同时出现在两个对象中,则后分配的会替换前面的。 当然,TypeScript 理解这种顺序。...对象扩展仅拷贝属性值,如果一个值是对另一个对象的引用,则可能导致意外的行为。 keyof 和查找类型 JS 是一种高度动态的语言。在静态类型系统中捕获某些操作的语义有时会很棘手。...一个对象的不同属性可以有完全不同的类型,咱们甚至不知道 obj 是什么样子的。 那么如何在 TypeScript 中编写这个函数呢?...} TypeScript 现在以推断 prop 函数的返回类型为 T[K],这个就是所谓的 索引类型查询 或 查找类型。...另一个真实的示例,请查看与TypeScript编译器一起发布的 lib.es2017.object.d.ts 类型声明文件中Object.entries()方法: interface ObjectConstructor

    3.2K50

    如何利用 TypeScript 的判别联合类型提升错误处理与代码安全性

    TypeScript中的魔法衣橱整理术 在TypeScript中,判别联合类型(Discriminated Unions)使用一个共同的属性,称为判别属性(discriminant),来区分联合类型中的不同类型...: '看这张不同的裤子' }); // TypeScript 类型错误:对象文字可能只能指定已知属性,且 `src` 不存在于 `{ type: "system"; event: string; }`...最后,在第三个例子中,我们错误地将系统消息的属性与图片消息的属性混淆,导致类型错误。 在handleMessage函数中,TypeScript像一个敏锐的分类器。...这次重构带来了一个独特的挑战,特别是在处理不同类型的错误方面。所以,我认为可以用这个例子来展示判别联合类型在实际场景中的实用性。...在像Next.js这样的服务器应用程序中,处理不同类型的错误(如ConflictError、UnauthorizedError和ValidationError)是至关重要的。

    21010

    【TypeScript 演化史 — 第七章】映射类型和更好的字面量类型推断

    转换后的属性组成新的类型。 使用映射类型,可以捕获类型系统中类似 Object.freeze() 等方法的效果。冻结对象后,就不能再添加、更改或删除其中的属性。...来看看如何在不使用映射类型的情况下在类型系统中对其进行编码: interface Point { x: number; y: number; } interface FrozenPoint {...对于希望在应用程序中冻结的每种类型的对象,咱们就必须定义一个包装器函数,该函数接受该类型的对象并返回冻结类型的对象。没有映射类型,咱们就不能以通用的方式静态地使用 Object.freeze()。...在方括号中,使用了 keyof 操作符。keyof T 将 T 类型的所有属性名表示为字符串字面量类型的联合。 方括号中的 in 关键字表示我们正在处理映射类型。...更好的字面量类型推断 字符串、数字和布尔字面量类型(如:"abc",1和true)之前仅在存在显式类型注释时才被推断。从 TypeScript 2.1 开始,字面量类型总是推断为默认值。

    3.8K40

    深入理解 TypeScript 中的 Keyof 运算符,让你的代码更安全、更灵活!

    这种运算符可以用于如集合和类等对象,通过键值对来存储和检索数据。使用 map 实例对象的 object.keys() 方法,我们可以获取存储在内存中的键。...三、 KeyOf 与映射类型的结合使用 在 TypeScript 中,我们可以使用 keyof 运算符与映射类型结合,将现有类型转换为新类型。...使用 KeyOf 运算符创建联合类型 在 TypeScript 中,当我们在具有显式键的对象类型上使用 keyof 运算符时,它会创建一个联合类型。...这种方式不仅提高了代码的可读性和维护性,还减少了潜在的错误。 五、索引签名与 KeyOf 运算符 在 TypeScript 中,keyof 运算符可以与索引签名一起使用,以移除索引类型。...Pick 类型 Pick 是另一个实用类型,它允许我们从一个对象类型中选择一个或多个属性,并生成一个包含这些属性的新类型。

    26310

    分享 40 道关于 Typescript 的面试题及其答案

    答案:TypeScript 中的泛型允许您创建可与各种类型一起使用的可重用组件或函数。它们支持强类型,同时保持使用不同数据类型的灵活性。...答案:TypeScript 中的“keyof”关键字是一个类型运算符,它返回表示对象键的文字类型的联合。它允许您对对象键执行类型安全操作。...答案:TypeScript 中的“排除”实用程序类型允许您通过从联合中排除某些类型来创建新类型。它有助于创建联合类型的子集。...答案:TypeScript 中的模板文字类型允许您使用模板文字语法来操作类型中的字符串。它们提供了一种基于字符串模式创建复杂类型的方法。...答案:TypeScript 中的“as const”断言用于推断数组和对象的文字类型。它告诉编译器该值应被视为常量,而不是扩展到其基本类型。

    94830

    TS 进阶 - 类型系统

    这往往是通过类型附带的额外信息来实现(类似于元数据),要在 TypeScript 中实现,只需要为类型额外附加元数据即可,如 CNY 与 USD ,分别附加上其单位信息即可,但同时又需要保留原本的信息(...、类型系统与类型检查 类型 限制数据的可用操作、意义、允许的值的集合,即访问限制与赋值限制 在 TypeScript 中即原始类型、对象类型、函数类型、字面量类型等基础类型,以及类型别名、联合类型等经过类型编程后得到的类型...联合类型 只需要比较一个联合类型是否可以被视为另一个联合类型的子类型 即联合类型中的每个成员在另一个联合类型中都存在对应的成员 type Result1 = 1 | 2 | 3 extends 1...、拼接、转换等 如使用对一个对象类型裁剪得到一个新的对象类型,或将联合类型结构转换到交叉类型结构 集合工具类型 对集合(联合类型)的处理,即交集、并集、差集、补集 模式匹配工具类型 基于 infer...的模式匹配,即对一个既有类型特定位置类型的提取 如提取函数类型签名中的返回值类型 模板字符串工具类型 模板字符串专属的工具类型 如将一个对象类型中所有属性名转换为大驼峰形式 # 属性修饰工具类型 主要使用

    1.2K50

    深入学习下 TypeScript 中的泛型

    在今天的内容中,我们将尝试 TypeScript 泛型的真实示例,并探索它们如何在函数、类型、类和接口中使用。...为此,您可以创建一个函数,它接受任何对象并返回另一个对象,该对象具有与原始对象相同的键,但所有值都转换为字符串。这个函数将被称为 stringifyObjectKeyValues。...第一个,Keys,是你想要确保你的对象拥有的所有键。在这种情况下,它是所有商店代码的联合。 T 是当嵌套对象字段具有与父对象上的键相同的键时的类型,在这种情况下,它表示运送到自身的商店位置。...使用泛型创建条件类型 在本节中,您将尝试 TypeScript 中泛型的另一个有用功能:创建条件类型。首先,您将了解条件类型的基本结构。...在类型声明本身内部,您正在检查类型 T 是否扩展了与函数签名匹配的类型,该函数签名接受可变数量的参数(包括零),然后您推断返回 该函数的类型创建一个新类型 U,可在条件的真实分支内使用。

    39K30

    【TypeScript 演化史 — 第十章】更好的空值检查 和 混合类

    注意:包含null或undefined的联合类型只会出现在--strictNullChecks模式中,因为常规类型检查模式下null和undefined在联合类型中是不存在的。...,该签名描述了可以构造通用类型T的对象的类型,并且其构造函数接受任意数量的任何类型的参数。...class Timestamped extends Base { timestamp = Date.now(); }; } 现在已经介绍了两个类型别名和mixin函数的声明,接下来看看如何在另一个类中使用...在咱们的例子中,它初始化 tag 属性。 混合构造函数类型指仅有单个构造函数签名,且该签名仅有一个类型为 any[] 的变长参数,返回值为对象类型....编译器可以类型检查所有的使用,并在自动完成列表中建议可用的成员: image.png 与类继承进行对比,有个区别:一个类只能有一个基类。

    2.6K10

    分享 30 道 TypeScript 相关面的面试题

    06、TypeScript 中元组与常规数组的区别是什么? 答案:TypeScript 中的元组是一个数组,其中元素的类型、顺序和数量已知。...它对于确保在使用配置对象或在组件或函数之间传递数据等场景中的不变性特别有用。 11、TypeScript 中的可区分联合有什么用处?...答案:可区分联合(也称为标记联合)是一种结合了联合类型、文字类型和类型保护的模式。 当一个对象可以有多个形状但共享一个公共属性(通常是文字类型)时,可以使用它们,该属性可用于缩小其确切形状。...公共属性(通常称为“鉴别器”)允许我们在联合内的类型之间安全地切换,从而更轻松地使用此类对象。 12、继承在 TypeScript 中如何发挥作用?...typeof 运算符在类型上下文中使用时,获取变量、常量或对象文字的类型,这对于基于现有对象的形状创建类型非常有用,而无需手动重复其结构。

    1.1K30

    深入学习下 TypeScript 中的泛型

    在今天的内容中,我们将尝试 TypeScript 泛型的真实示例,并探索它们如何在函数、类型、类和接口中使用。...为此,您可以创建一个函数,它接受任何对象并返回另一个对象,该对象具有与原始对象相同的键,但所有值都转换为字符串。这个函数将被称为 stringifyObjectKeyValues。...第一个,Keys,是你想要确保你的对象拥有的所有键。在这种情况下,它是所有商店代码的联合。 T 是当嵌套对象字段具有与父对象上的键相同的键时的类型,在这种情况下,它表示运送到自身的商店位置。...keyof T 运算符用于返回具有 T 中所有可用属性名称的联合。然后使用 K in 语法指定新类型的属性是返回的联合类型中当前可用的所有属性 T键。...在类型声明本身内部,您正在检查类型 T 是否扩展了与函数签名匹配的类型,该函数签名接受可变数量的参数(包括零),然后您推断返回 该函数的类型创建一个新类型 U,可在条件的真实分支内使用。

    21810

    什么是 TypeScript 4.1 中的模板字面类型?

    在利用该新闻作为机会来深入了解类型系统的实际工作方式之后,我想与您分享新版本的令人兴奋的功能和变化,并提供关键字说明和许多神奇的示例。...利用带有 as 子句的模板文字类型 (source) JSX 工厂函数 JSX 代表 JavaScript XML,它允许我们使用 JavaScript 编写 HTML 元素并将其放置在 DOM 中,...递归条件类型 另一个新增功能是递归条件类型,它允许它们在分支中引用自己,从而能够更灵活地处理条件类型,使得编写递归类型别名更加容易。...owner, defaultUserId: 123, }; } 在TypeScript 4.1之前, getOwner 返回基于每个展开对象的联合类型: { x: number } | {...: string; } 不匹配的参数将不再关联 过去,彼此不对应的参数在 TypeScript 中通过将它们与 any 类型关联而彼此关联。

    3.9K10

    如何在 TypeScript 中使用函数

    如果我们调用函数的值的类型与函数预期的类型不同,TypeScript 编译器 (tsc) 会给我们错误 2345。...但在 JavaScript 中,我们可以通过多种方式定义函数,例如使用箭头函数。在本节中,我们将向 TypeScript 中的箭头函数添加类型。 向箭头函数添加类型的语法与向普通函数添加类型几乎相同。...在本节中,我们将学习如何创建函数类型,它们是表示特定函数签名的类型。在将函数传递给其他函数时,创建与特定函数匹配的类型特别有用,例如,具有本身就是函数的参数。这是创建接受回调的函数时的常见模式。...在 JavaScript 中,这通常是通过有一个参数来完成的,该参数可以采用不同类型的值,如字符串或数字。将多个实现设置为相同的函数名称称为函数重载。...结论 函数是 TypeScript 中应用程序的构建块,在本教程中,我们学习了如何在 TypeScript 中构建类型安全的函数,以及如何利用函数重载来更好地记录单个函数的所有变体。

    15.1K10
    领券