访问嵌套对象的属性时引发Typescript错误

anauzrmj 于 2022-12-14 发布在 TypeScript

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

我有一个对象，我试图键入，该对象似乎没有任何问题，它是当我试图访问一个嵌套的属性，我得到可怕的红色波形。
我做了一些环顾四周，我发现多个帖子建议类似的方法：

type FlagValue = string | boolean | number | { [key: string]: FlagValue };
type FlagSet = { [key: string]: FlagValue | FlagSet};

const defaultFlags: FlagSet = {
  tracking: false,
  banner: {
    display: false,
    message: "I am the man with no name, Zapp Brannigan!",
  },
  theme: "dark",
};

就输入对象而言，它似乎工作得很好，但我遇到问题的地方是当我试图访问任何嵌套属性时

...

Property 'display' does not exist on type 'FlagValue | FlagSet'.
  Property 'display' does not exist on type 'string'.

你知道我错过了什么吗
Playground

typescript

来源：https://stackoverflow.com/questions/74749424/accessing-property-of-nested-object-throwing-typescript-error

1条答案

按热度按时间

7vhp5slm1#

井defaultFlags.banner的类型为：

string | boolean | number | { [key: string]: FlagValue }

因此，在尝试将值视为对象之前，必须证明值是对象：

const showBanner =
   typeof defaultFlags.banner === 'object'
      ? defaultFlags.banner.display
      : false

参见Playground
或者，您可以更改声明以使用satisfies。这将强制FlagSet的约束，同时保留从赋值的对象文本推断的类型。

const defaultFlags = {
  tracking: false,
  banner: {
    display: false,
    message: "I am the man with no name, Zapp Brannigan!",
  },
  theme: "dark",
} satisfies FlagSet

const showBanner = defaultFlags.banner.display

参见Playground

赞(0）回复(0）举报 2022-12-14

我来回答

访问嵌套对象的属性时引发Typescript错误

1条答案

相关问题

热门标签

最新问答