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

如何根据筛选出的键向TypeScript推断一个属性只能属于一种类型?

在TypeScript中,可以使用类型守卫来根据筛选出的键推断一个属性只能属于一种类型。类型守卫是一种在运行时检查变量类型的方法,它可以帮助我们在编译时进行类型推断。

下面是一个示例代码:

代码语言:txt
复制
interface Circle {
  kind: "circle";
  radius: number;
}

interface Square {
  kind: "square";
  sideLength: number;
}

type Shape = Circle | Square;

function calculateArea(shape: Shape) {
  if (shape.kind === "circle") {
    // 在这里,TypeScript会推断shape为Circle类型
    return Math.PI * shape.radius * shape.radius;
  } else if (shape.kind === "square") {
    // 在这里,TypeScript会推断shape为Square类型
    return shape.sideLength * shape.sideLength;
  }
}

const circle: Circle = {
  kind: "circle",
  radius: 5,
};

const square: Square = {
  kind: "square",
  sideLength: 10,
};

console.log(calculateArea(circle)); // 输出78.53981633974483
console.log(calculateArea(square)); // 输出100

在上面的代码中,我们定义了两个接口CircleSquare,它们都有一个kind属性用于区分类型。然后我们定义了一个联合类型Shape,它可以是CircleSquare类型。在calculateArea函数中,我们使用类型守卫来判断shape的类型,从而进行相应的计算。

这种方法可以帮助我们根据筛选出的键向TypeScript推断一个属性只能属于一种类型。在实际应用中,可以根据具体的需求和业务逻辑进行相应的类型守卫判断。

推荐的腾讯云相关产品:腾讯云函数(Serverless云函数计算服务),腾讯云CVM(云服务器),腾讯云数据库(云数据库MySQL版、云数据库MongoDB版等)。你可以访问腾讯云官网了解更多产品信息:https://cloud.tencent.com/

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

相关·内容

《现代Typescript高级教程》高级类型

现代JavaScript高级小册 深入浅出Dart 现代TypeScript高级小册 高级类型 映射类型(Mapped Types) 映射类型(Mapped Types)是 TypeScript一种强大类型操作工具...,Property 是 ExistingType ,TransformType 是对应属性转换类型。...下面是一些常见映射类型示例: 1. Readonly Readonly 是 TypeScript 内置一个映射类型,它将给定类型所有属性变为只读。...Record Record 是一个映射类型,它根据指定类型和值类型创建一个对象类型。...需要注意是,infer关键字只能在条件类型右侧使用,用于声明一个推断类型变量,而不能在其他地方使用。此外,每个条件类型只能使用一次infer关键字,并且通常与泛型一起使用。

20630

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

TypeScript类型保护是什么?它们如何工作?举个例子。 答案:类型防护是 TypeScript 表达式,它在运行时检查变量类型,并允许您根据类型执行不同操作。...它们可以实现更好类型推断,并提供一种更有效地处理联合类型方法。...答案:TypeScript条件类型允许您创建依赖于条件类型。它们用于根据类型之间关系执行类型推断。...答案:TypeScript映射类型允许您通过将属性映射到新类型来基于现有类型创建新类型。它们使您能够轻松修改现有类型现有类型添加属性。...答案:条件类型“infer”关键字用于从条件类型一种类型推断类型。它允许您捕获类型并将其分配给类型变量。

65630
  • 让你TypeScript代码更优雅,这10个特性你需要了解下

    下面我们通过几个例子来了解 TypeScript 高级类型推断如何工作。 1....泛型函数类型推断 在泛型函数中,TypeScript 可以根据传入参数自动推断类型。以下是一个简单泛型函数 identity,它接收一个参数并返回相同值。...TypeScript根据传入对象自动推断 result 类型为 { id: number; name: string; }。...六、掌握 TypeScript keyof 类型操作符 TypeScript keyof 操作符用于创建一个对象类型所有联合类型,这一特性能帮助你创建依赖于其他类型动态和灵活类型定义...1、keyof 操作符基本用法 keyof 操作符会提取一个对象类型所有,并将这些组成一个联合类型

    13810

    深入学习下 TypeScript泛型

    您可能会注意到接口和类型共享一组相似的功能。 事实上,一个几乎总是可以替代另一个。 主要区别在于接口可能对同一个接口有多个声明,TypeScript 将合并这些声明,而类型只能声明一次。...要为您泛型创建额外特殊层,您可以对您参数施加约束。 假设您有一个存储限制,您只能存储所有属性都具有字符串值对象。...条件类型一个有用特性是它允许您使用特殊关键字 infer 在 extends 子句中推断类型信息。然后可以在条件真实分支中使用这种新类型。此功能一种可能用法是检索任何函数类型返回类型。...使用 NestedOmit 泛型,传入类型,然后列出要省略属性。 请注意如何在第二个类型参数中使用点符号来标识要省略。然后将结果类型存储在 Result 中。...然后将此属性类型设置为递归调用 NestedOmit 实用程序类型结果,但现在使用 T[NewKeys] 将此属性类型作为第一个类型参数传递给 T,并作为第二个类型参数传递其余以点表示法表示,在

    38.9K30

    深入学习下 TypeScript泛型

    事实上,一个几乎总是可以替代另一个。主要区别在于接口可能对同一个接口有多个声明,TypeScript 将合并这些声明,而类型只能声明一次。...要为您泛型创建额外特殊层,您可以对您参数施加约束。假设您有一个存储限制,您只能存储所有属性都具有字符串值对象。...在本节中,您将看到如何创建映射类型。想象一下,您想要创建一个类型,给定另一个类型,该类型返回一个类型,其中所有属性都设置为具有布尔值。...条件类型一个有用特性是它允许您使用特殊关键字 infer 在 extends 子句中推断类型信息。然后可以在条件真实分支中使用这种新类型。此功能一种可能用法是检索任何函数类型返回类型。...使用 NestedOmit 泛型,传入类型,然后列出要省略属性。 请注意如何在第二个类型参数中使用点符号来标识要省略。然后将结果类型存储在 Result 中。

    14310

    关于TypeScript泛型,希望这次能让你彻底理解

    泛型,让函数逻辑和类型更匹配 在软件开发中,我们常常需要编写一些根据特定属性筛选数组元素函数。...: field:一个类型参数 KEY,它被限制为 User 类型集合中一个。...这种模式特别有用,因为它可以保证我们对状态更新是类型安全,同时也保持了函数灵活性。这是React中使用TypeScript一个典型例子,展示了如何通过类型系统来增强代码质量。...TypeScript类型推断 TypeScript一个令人惊叹特性——它会尝试从上下文中推断类型,只要有可能。...这就是TypeScript和泛型魅力:它们提供了一种强大类型系统,不仅可以帮助我们减少错误,还可以使代码更加简洁易读。

    15610

    TypeScript 5.4:带来新类型和一些 Break Change

    中是一个常见类型推断过程,基于我们可能进行某些检查或条件,TypeScript 能够自动推断出变量具体类型,这就使得该变量类型范围被“缩小”或者说“窄化”。...其实也是属于类型收窄一种。 工具类型:NoInfer 在 TypeScript 中,有时候我们写代码时候不需要明确告诉它变量是什么类型TypeScript 会自动根据我们给值来推断类型。...这个过程我们称之为类型推断。 当你调用泛型函数时,系统能够根据你传入参数来推断类型。...函数需要为每个不同组制作一个”,然后 Object.groupBy 使用这个来创建一个对象,其中每个都映射到一个包含原始元素数组中。...如果你正在处理期望 Map API,或者你需要使用任何类型进行分组(不仅仅是可以用作 JavaScript 属性),这可能会更好一点。

    28410

    索引类型、映射类型与条件类型_TypeScript笔记12

    (n => o[n]); } pluck函数能从o中摘出来names指定那部分属性,存在2个类型约束: 参数names中只能出现o身上有的属性 返回类型取决于参数o身上属性类型 这两条约束都可以通过泛型来描述...>中取出了Person作为返回值类型,即所谓“拆箱” 三.条件类型 条件类型用来表达非均匀类型映射(non-uniform type mapping),能够根据类型兼容关系(即条件)从两个类型选出一个...y = x; } 条件类型类型推断 在条件类型extends子句中,可以通过infer声明引入一个将被推断类型变量,例如: type ReturnType = T extends (......TypeScript 还内置了一些常用条件类型: // 从 T 中去掉属于 U 类型部分,即之前示例中 Diff type Exclude = T extends U ?...never : T; // 从 T 中筛选出属于 U 类型部分,之前示例中 Filter type Extract = T extends U ?

    1.7K10

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

    答案:联合类型一种表示一个值可以属于多种类型之一方式。例如,如果函数接受字符串和数字作为参数,则可以将其键入为 function example(arg: string | number)。...当您事先不知道对象但知道其值类型时,这是很有用。 21、TypeScript 如何处理可选链接和 nullish 合并? 答案:TypeScript 支持可选链接 (?.)...接下来,这几道面试题是针对高级 TypeScript 开发人员问题,有兴趣小伙伴可以继续阅读。 26、描述 TypeScript 类型推断机制如何工作。...答:TypeScript 类型推断是指编译器在没有显式类型注释情况下自动推断和分配类型能力。虽然鼓励显式类型,但编译器会尽可能使用上下文(如变量初始化、返回语句等)来推断类型。...29、如何利用 TypeScript条件类型? 答案:条件类型允许根据条件以更动态方式表达类型。它们遵循 T 延伸 U ?

    75930

    TypeScript基础常用知识点总结

    联合类型变量在被赋值时候,会根据类型推论规则推断一个类型: let myFavoriteNumber: string | number; myFavoriteNumber = 'seven';...TypeScript—Map对象 Map 对象保存键值对,并且能够记住原始插入顺序。任何值(对象或者原始值) 都可以作为一个一个值。...当 TypeScript 不确定一个联合类型变量到底是哪个类型时候,我们只能访问此联合类型所有类型中共有的属性或方法: interface Cat { name: string;...TypeScript—字符串字面量类型 字符串字面量类型用来约束取值只能是某几个字符串中一个。...字符串字面量类型使用 type 进行定义,下面举一个简单例子: //使用 type 定了一个字符串字面量类型 EventNames,它只能取三种字符串中一种

    4.8K30

    React实战精讲(React_TSAPI)

    本质上JS添加了可选 「静态类型」 「基于类对象编程」 ❞ TypeScript 提供最新和不断发展 JavaScript 特性,包括那些来⾃ 2015 年 ECMAScript 和未来提案中特性...下⾯我们来举⼏个例⼦,介绍⼀下如何使⽤泛型约束。 确保属性存在 有时候,我们希望「类型变量对应类型上存在某些属性」。这时,除⾮我们显式地将特定属性定义为类型变量,否则编译器不会知道它们存在。...---- TS_React:Hook类型类型推断 ❝在绝大部分,TS都可以根据hook中值来推断它们类型:也就是我们常说类型推断」 ❞ 何为类型推断,简单来说:「类型推断」就是「基于赋值表达式推断类型能...像 具有「初始化值变量」 有「默认值函数参数」 「函数返回类型」 都可以根据「上下⽂推断」出来。...useState 在前面,我们已经通过类型推断讲过了,如何处理useState各种情况。

    10.4K30

    编写高效 TS 代码一些建议

    TypeScript一种由微软开发自由和开源编程语言。它是 JavaScript 一个超集,而且本质上这个语言添加了可选静态类型和基于类面向对象编程。...说到这里相信有一些小伙伴已经想到了 keyof 操作符,它是 TypeScript 2.1 版本引入,可用于获取某种类型所有,其返回类型是联合类型。...这样 renderPage 函数就可以根据统一 state 属性值来进行相应处理。因此,通过使用可辨识联合类型,让请求每种状态都是有效状态,不会出现无效状态问题。...{} 推断出来,你只能对已知属性赋值。..., y: 4}; // OK 虽然这是构建这样一个简单对象一种迂回方式,但对于对象添加属性并允许 TypeScript 推断类型来说,这可能是一种有用技术。

    3.1K61

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

    image.png 上一篇更好类型推断文章中,解释了 TypeScript 如何用 const 变量和 readonly 属性字面量始化来推断字面量类型。...如果 TypeScript 为 let 变量推断一个字面量类型,那么尝试为指定值以外任何值赋值都会在编译时产生错误。...变量会根据下面这些操作x.push(value)、x.unshift(value)或x[n] = value其中添加元素来不断改变自身类型。...JavaScript/TypeScript mixin 混合类是实现不同功能方面的类。其他类可以包含 mixin 并访问它方法和属性。这样,mixin 提供了一种基于组合行为代码重用形式。...编译器可以类型检查所有的使用,并在自动完成列表中建议可用成员: image.png 与类继承进行对比,有个区别:一个只能一个基类。

    4.6K10

    TypeScript 官方手册翻译计划【二】:普通类型

    一个函数出现在某个地方,且 TypeScript 可以推断它是如何被调用时候,该函数参数会被自动分配类型。...和推断规则类似,你不需要刻意学习这个过程是怎么发生,但明确这个过程确实会发生之后,你自然就清楚什么时候不需要添加类型注解了。稍后我们会看到更多例子,了解到一个值所处上下文是如何影响它类型。...既然我们已经知道了如何编写基本类型,是时候开始用一种有趣方式将它们结合起来了。 定义一个联合类型一种结合类型方式就是使用联合类型。...大多数情况下,你可以根据个人喜好选择其中一种使用,TypeScript 也会告诉你它是否需要使用另一种声明方式。...字面量推断 当你初始化一个变量为某个对象时候,TypeScript 会假定该对象属性稍后可能会发生变化。

    2.2K20

    TypeScript 5.3,带来这些小惊喜

    Import 属性 TypeScript 5.3 可能会实现Import 属性一个最近达到 Stage 3 TC39 提案。 Import 属性允许你为导入指定选项。...第三方工具不够智能,无法基于推断生成声明文件。 此时,隔离声明(Isolated Declarations)出现了,一种,更严格 TypeScript 模式。...确切严格级别仍在调整,可能会随时间改变。但作为例子,可能会必须对导出函数添加返回类型注解,以免 TypeScript 不得不推断它们。...这里,我们试图根据一个一个对象中返回一个值。如果传入'foo',我们返回一个字符串。如果传入'bar',我们返回一个数字。 但 TypeScript 报错了,尽管这段代码看起来是没问题。...原因是 TypeScript 没有缩小 Example[T]到正确。对Example[T]任何缩小都会导致它类型变为never - 因此导致上面的错误。

    23220

    十分钟教你理解TypeScript泛型

    你将在本文中学到什么 本文介绍TypeScript中泛型(Generics)概念和用法,它为什么重要,及其使用场景。我们会以一些清晰例子,介绍其语法,类型如何构建参数。...TypeScript泛型是个啥 在TypeScript中,泛型是一种创建可复用代码组件工具。这种组件不只能一种类型使用,而是能被多种类型复用。...把下面打日志代码拷贝到编辑器中: console.log("hello TypeScript"); 按下F5,你会看到一个像这样launch.json文件: { // Use IntelliSense...使用泛型,许多属性类型都能被TypeScript推断出来,然而,在某些TypeScript不能做出准确推断地方,它不会做任何假设。...(3); 因为TypeScript无法推断出arg参数是什么类型,不能证明所有类型都具有length属性,因此不能假设它是一个字符串(具有length属性)。

    2.2K10

    编写TypeScript工具类型,你需要知道知识

    在有条件类型 extends 子语句中,允许出现 infer 声明,它会引入一个推断类型变量。这个推断类型变量可以在有条件类型 true 分支中被引用。...这种类型应该如何定义?如果选择为 id 字段提供添加可选修饰符的话,那就太不明智了。因为在删除用户时,即使不填写 id 属性也不会报错,这不是我们想要结果。...但在 TypeScript 中,千万不要用这种思维去看待, level 表示就是一个字符串 coder 类型,被绑定这个类型变量,它只能是 coder 。...TypeScript 提供了从旧类型中创建新类型一种方式 。在映射类型里,新类型以相同形式去转换旧类型里每个属性。...这个工具可用来将某个类型属性映射到另一个类型上。

    1.4K50

    TypeScript 4.4 RC版来了,正式版将于月底发布

    类型检查器会使用“控制流分析”机制推断每个语言构造中类型,这就省去了在使用时对 TypeScript 变量类型做出声明麻烦。...例如,我们可以编写一个带有索引签名类型,此类型接收 string 并映射为相应 boolean 值。如果我们尝试分配 boolean 值以外值,则返回错误。...最终,TypeScript 4.0 版本开始允许用户在各个 catch 子句变量上指定 unknown (或者 any) 显式类型注释,以便根据具体情况选择更严格类型;但对很多开发者来说,在每一个...Inlay Hints TypeScript 4.4 提供对 inlay hints 支持,可帮助您在代码中显示有用信息,包括参数名称与返回类型。这相当于一种友好“幽灵文本”。...} 相反,您只能属性指定类型: abstract class C { abstract prop: number; } 展望未来 我们计划在未来几周之内发布 TypeScript

    2.6K20

    7个高效TypeScript工具类型,你会用了吗?

    通过实例讲解,让你轻松掌握这些强大工具类型。 1. keyof 操作符 keyof 操作符用于获取对象。例如,如果你有一个表示用户类型,并且你想创建一个只接受该用户接口函数。...如果你尝试传递一个不存在,比如 'country',TypeScript 会在编译时就抛出错误,从而帮助你避免运行时错误。...,fetchTodoItem 推断返回类型是 Promise,因为 TypeScript 无法从 fetch 中推断响应 JSON 结构。...这种方法真正好处在于,当 TypeScript 不能自动推断类型时,或者当你处理类型是条件类型或类似 Promise 类型但不完全是 Promise 时,Awaited 能让你代码更健壮、更易维护...Record 类型 Record 是 TypeScript一个工具类型,用于创建具有特定和统一值类型对象类型

    32610
    领券