访问对象属性时联合类型上的typescript错误

nbysray5 于 2023-02-25 发布在 TypeScript

关注(0)|答案(1)|浏览(124)

我很困惑为什么下面的代码会在IDE中出现错误：
我有一些接口/类型

接口/类型：

interface GradientColor {
  type: string;
  value: {
    angle: string | number;
    colours: string[];
  };
}

interface NormalColor {
  type: string;
  value: string;
}

type ColorOptions = GradientColor | NormalColor;

(mix英国和美国的拼写）

用法：

所以我现在要在函数中使用它们

const parseCSSColor = (color: ColorOptions) => {
  // ...
  return `linear-gradient(${color.value.angle}deg, ${color.value.colors[0]}, ${color.value.colors[1]})`;
  // ...
}

发行日期：

现在一切都设置好了，我的IDE显示：

Property 'angle' does not exist on type 'string | { angle: string | number; colours: string[]; }'.
  Property 'angle' does not exist on type 'string'.

为什么？color.value应该可以是字符串或具有.angle和.colours的对象

typescript

来源：https://stackoverflow.com/questions/75515348/typescript-errors-on-union-type-when-accessing-object-properties

1条答案

按热度按时间

vyu0f0g11#

您可以尝试缩小color的类型范围，让Typescript知道它是GradientColor还是NormalColor。

const parseCSSColor = (color: ColorOptions) => {
  if (typeof color.value === "string") {
    // Typescript now sees color as an instance of NormalColor
  } else {
    // Typescript now sees color as an instance of GradientColor
    return `linear-gradient(${color.value.angle}deg, ${color.value.colors[0]}, ${color.value.colors[1]})`;
  }
}

如果colours: string[]的长度至少为2，您还需要签入else子句;如果您希望访问前两个元素而不出现Typescript错误，则需要将其类型更改为元组。

赞(0）回复(0）举报 2023-02-25

我来回答

访问对象属性时联合类型上的typescript错误

1条答案

相关问题

热门标签

最新问答