TypeScript 中的多种嵌套属性

Question

我想为变量something应用类型。 something可以是：

• 一个字符串
• 一个字符串数组
• 键值对：键始终是字符串，值可以是其他something ：键值对（可能是多级嵌套）、字符串或字符串数​​组

假设我有一个 JSON 响应，它匹配something类型的结构：

{
  something: {
    fox: 'jump',
    rabbit: {
      bunny: 'carrot',
      alaska: 'hay'
    },
  }
}

我在 TypeScript 中所做的是：

type SomethingType = {
  [key: string]: string | string[] | SomethingType
};

interface SomethingProps {
  something: SomethingType | null
}

class MyApp extends React.Component<SomethingProps> {
  render() {
    const itWorks = this.props.something.fox;
    const itDoesNotWork = this.props.something.rabbit.bunny;
    return ...
  }

  ...
}

当我的IDE（VS代码）检查类型， itWorks它的工作原理。 对于itDoesNotWork ，它表明它的类型是any并给出以下错误消息：

Property 'bunny' does not exist on type 'string | string[] | SomethingType'.
Property 'bunny' does not exist on type 'string'.
ts(2339)

如果想要something.rabbit.bunny的值，甚至更多级别的嵌套属性，我应该怎么做，所有的类型都是string | string[] | SomethingType string | string[] | SomethingType string | string[] | SomethingType ？

Answer 1

也许在要引用的something前面添加this关键字：

class MyApp extends React.Component<SomethingProps> {
  itWorks = this.something.fox;
  itDoesNotWork = this.something.rabbit.bunny;
  ...
}

或者this.props ：

class MyApp extends React.Component<SomethingProps> {
  itWorks = this.props.something.fox;
  itDoesNotWork = this.props.something.rabbit.bunny;
  ...
}

您还应该删除属性前面的const关键字，因为您在一个类中。