在TS中，如何定义children 属性？

Question

我正在与 React 和 MobX 学习 Typescript。

我的 MobX 商店赞爆了。

store: {
  child: {
    selected: true,
    value: 123
  }
}

我的组件是

@inject('store')
@observer
class Display extends React.Component<{store: Object}, {}> {
  ...

  render(){
    console.log(this.props.store.child.selected); // true
  }
}

我可以看到这个警报。

[ts] Property 'child' does not exist on type 'Object'. [2339]

Answer 1

您可以使用接口来声明商店的形状：

interface Child {
    selected: boolean;
    value: number;
}

interface Store {
    child: Child;
}

@inject('store')
@observer
class Display extends React.Component<{ store: Store }, {}> {
  ...

  render() {
    console.log(this.props.store.child.selected); // true
  }
}

或者您可以使用 any or 作为商店类型。

Answer 2

您收到的错误是因为您将商店道具定义为通用 Object，它没有名为 child 的属性。

要使其正常工作，只需像这样为您的商店定义一个界面：

interface Store {
  store: {
    child: {
      selected: boolean;
      value: number;
    }
  }
}

然后将其用作组件中 props 的定义：

class Display extends React.Component<Store, {}> {

在TS中，如何定义children 属性？

in TS, How to define children property?

typescript

reactjs

mobx