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

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 - 腾讯云

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

相关·内容

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

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

31530

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

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

59630

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

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

3.1K50

深入学习下 TypeScript 泛型

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

38.8K30

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

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

2.5K30

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

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

5710

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.7K40

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.8K10

何在 TypeScript 中使用函数

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

14.9K10

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

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

40030

TS 进阶 - 类型系统

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

1.1K50

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

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

300

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.1K20

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

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

2.6K10

编写高效 TS 代码一些建议

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

3.1K61

什么是 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

【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)对类组件进行操作函数可以更正确地对泛型类组件进行操作。

83630

TypeScript 演化史 — 第八章】字面量类型扩展 和 无类型导入

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

4.5K10

搭建node服务(三):使用TypeScript

JavaScript使用灵活,开发速度快,但是由于类型思维缺失,一点小修改都有可能导致意想不到错误,使用TypeScript可以很好解决这种问题。...TypeScript是JavaScript一个超集,扩展了 JavaScript 语法,增加了静态类型、类、模块、接口和类型注解等功能,可以编译成纯JavaScript。...本文将介绍如何在node服务中使用TypeScript。...四、 自定义类型 TypeScript 会自动从 node_modules/@types 目录获取模块类型定义,引用模块都需要安装对应类型库,: npm install @types/koa --...,本示例src/types目录已被include包含,如果自定义类型目录未被include包含还需要在include添加该目录。

2.8K20
领券