联合类型允许对所使用类型的属性进行错误分配

2023-12-29

我在理解 TS 中的联合时遇到问题,为什么下面的分配是有效的?我以为它只适用于const a = {a:12} or {a:123,b:23} or {a:12,b:12,c:123}.

type abcd =
    | {
        a: number;
      }
    | {
        a: number;
        b: number;
      }
    | {
        a: number;
        b: number;
        c: number;
      };

const a: abcd = {
    a:123,
    c:234
};

游乐场链接 https://www.typescriptlang.org/play?#code/C4TwDgpgBAhgRgYwCZQLwCgpagHygb022JgC4oA7AVwFs4IAnAbiOIF9XcDOTzq7GLYsTh9a9ZjygdieQsOxlK4wVKyjlAyQqwIxWocLYt0CAPYUAzsFjl4yNN14BGAEwBmADSc9HgCzoxuhAA

如果我改变,它不允许分配c to somethingElse:

const a: abcd = {
    a:123,
    somethingElse:234 // Error on this line
};

它给了我:

输入 '{ a: 数字;其他:数字; }' 不可分配给类型“abcd”。 对象文字只能指定已知属性,并且类型“abcd”中不存在“somethingElse”。(2322)


TLDR

联盟并不相互排斥。 https://github.com/microsoft/TypeScript/issues/38159您可以查看此答案中的“解决方法”部分,以获取解决方法,以实现具有 Union 类型、never 类型和可选属性组合的类型的互斥。

Union型的工作方式更接近于OR门而不是XOR门。也就是说,只要实例对象满足您的 Union 类型中的其中一种类型,它就被视为该 Union 类型的实例。

以下面为例:

type abcd =
  | {
    a: number;
  }
  | {
    x: number;
    y: number;
  }
  | {
    p: number;
    q: number;
    r: number;
  }
  | {
    x: number;
    y: number;
  };

const APY: abcd = {
  a: 123,
  p: 234,
  y: 1,
};

作为常数APY包含足够的属性被视为实例{ a: number; }类型,可以存在于联合类型中的所有其他属性都是允许的。

Union 类型施加的唯一限制是,不允许使用 Union 类型中不存在的属性,并且实例必须具有足够的属性来满足 Union 中存在的类型之一。

解决办法

虽然 Union 类型本身对您没有帮助,但您可以将它与 never 类型结合使用来达到您想要的结果:

type abcd =
  | {
    a: number;
    b?: never;
    c?: never;
  }
  | {
    a: number;
    b: number;
    c?: never;
  }
  | {
    a: number;
    b: number;
    c: number;
  };

/*
  Type '{ a: number; c: number; }' is not assignable to type 'abcd'.
  Property 'b' is missing in type '{ a: number; c: number; }' but required in type '{ a: number; b: number; c: number; }'.
*/
const a: abcd = {
  a: 123,
  c: 234,
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

联合类型允许对所使用类型的属性进行错误分配 的相关文章

  • 如何使用 TypeScript API 将 tsconfig.json 编译为配置对象?

    我正在寻找一个公共官方 TypeScript API 最好是 4 x 版本 用于解析tsconfig json jsconfig json文件到完整的 TypeScript 配置对象 我所说的 完整 是指 它的所有属性都填充有值 要么显式地
  • Visual Studio 代码断点在使用 TypeScript 的 Node.js 上不起作用

    我尝试了很多解决方案 但没有人适合我 代码执行 但我无法放置断点并调试它 请你帮助我好吗 我尝试过以下 VSCode 配置脚本 type node request launch name Typescript Node JS program
  • TypeScript 代码上的 JSlint - 它还能教我编写更好的代码吗?

    在 TypeScript 生成的代码上使用 JSlint 还能教我编写更好的代码吗 如果是 您能提供一两个例子吗 Thanks 没有 由于生成的 javascript 在不良打字稿 良好打字稿之间是一致的 例如缺少分号 对于打字稿 有一个
  • 未强制执行 Typescript 抽象类静态方法

    我在 TypeScript 中有这个简单的代码 abstract class Config readonly NAME string readonly TITLE string static CoreInterface gt any cla
  • 在 Angular html 模板中访问常量枚举

    假设我有一个常量枚举 export const enum MyConstEnum Value1 Value1 Value2 Value2 Value3 Value3 现在我想在我的 Angular 模板中使用它 span This has
  • 通过扩展和实现的组合来理解 TS 的类型推断/缩小

    我有以下示例代码 class B implements Error name string message string stack undefined string function Foo x any if x instanceof E
  • 在 Angular 单个组件中导入第 3 方 javascript 库

    我目前正在开发 Angular4 应用程序 我想import some JavaScript 库 but 仅针对单个组件 目前我可以通过在里面定义它们的路径来轻松导入这个库 angular cli json像那样 scripts node
  • 如何声明具有可变数量属性的 TypeScript 接口?

    这是一个简单的问题 令我惊讶的是我在任何地方都找不到明确的答案 我正在制作一个 API 需要定义一个可以具有多个 字符串 属性的接口 但没有设置属性数量 也没有设置它们的名称 但它们都必须具有字符串值 因此以下所有对象都将与该类型匹配 sl
  • CSF3 中的 Typescript 支持

    我正在使用 CSF3 编写故事 并且我想正确注释我的故事 我用谷歌搜索过 基本上找不到答案 我尝试过一些技巧here https github com storybookjs storybook issues 7677但没有任何效果 我发现
  • 在 Y 轴上显示时间 - 气泡图

    我碰到Bubble Chart 最新补充 在ng2 图表 https valor software com ng2 charts 我试图根据 Y 轴的时间和 X 轴的值显示数据 我的数据就像 x 10 35 60 和 y 7 00 AM 和
  • 角度按钮单击旋转图标

    我有以下按钮
  • 到子级的角度路由 - 来自不同父级的子级

    我正在使用打字稿进行角度路由 但面临一些路由问题 流程似乎是 我真正想做的是通过Child Child2的一部分 其ID为Child1的Child 路由 但它不显示页面 Child1 用于插入 更新的所有路由都驻留在 Child1 中 而
  • 枚举类型在打字稿中给出双数组

    我想从枚举数据类型创建一个下拉列表 但是当我尝试将枚举更改为具有名称和值的对象时 枚举数组返回枚举成员的两倍 使用函数这个帖子 https stackoverflow com questions 18111657 how does one
  • 如何指定 Express 响应返回的类型

    我正在尝试使用 TypeScript 标准化我的express js Web应用程序中的响应 但我不太确定如何全局设置响应应该是这个接口 success boolean data any error string 现在我只是在写 async
  • Typescript:如何在自定义过滤器中使用角度 $filter

    如何在自定义过滤器中使用 Angular filter 如何注入 filter依赖 module Filters export class CustomFilter public static Factory return function
  • TypeScript 中的类型安全谓词函数

    我的目标是编写谓词函数 isNull and isUndefined例如 在 TypeScript 中满足以下条件 可以独立使用 array filter isNull 可以逻辑组合 array filter and not isNull
  • 使用占位符和 ngModel 动态生成输入元素

    我想以角度 2 动态生成输入元素 我有占位符标题数组和值数组 如下所示 在我的组件中 我有两个映射 如下所示 其中两个映射的键相同 将值映射到标题 const placeholderMap fullName Name value Produ
  • TypeScript:增强内置类型

    如何增强其中一种 内置 类型 例如数组 在 JS 中 我会做类似的事情 Array prototype shuffle function TypeScript 中的等价物是什么 TypeScript 中的类型是 开放式 的 所以你可以这样写
  • Typescript导入别名+桶文件

    我最近花了很多时间 因为 Angular ngrx typescript 生态系统中某些事物的特定行为 并且我无法识别可能的根本原因 场景 我已经构建了一些效果 并将它们导出到桶文件中 index ts import MyEffects f
  • 如何循环 Record

    I have Records类型Record https www typescriptlang org docs handbook utility types html recordkt export interface List name

随机推荐