Question

使用TypeScript接口/类型在React中初始化初始空（空）状态的正确方法是什么？例如，我有一个接口：

interface IObject {
  name: string,
  age: number,
  info: IAnotherObject
}

和一个简单的组件，我想在其中定义initial information state as null（不创建一个实现我的接口并为所有属性设置默认值的类），但是要使用IObject接口

interface IState {
  information: null|IObject;
}

class App extends React.Component<{}, IState> {
 state = {
  information: null
 };

 componentDidMount() {
  // fetch some data and update `information` state
 }

 render() {
   <div>
    {this.state.information &&
    <div>
      <div>{this.state.information.name}</div>
      <div>//other object data</div>
    </div>
   </div>
 }

我们是否有另一种方法可以使用union类型来初始化可空状态而无用：

// worked way, but with union null type
interface IState {
  information: null|IObject;
}
// some another way(no union), but with initial `null` or `undefined`
interface IState {
  information: IObject;
}

state = {
 information: null
}

（在状态下，我想用null注释每个我想具有初始空值的对象似乎不是很“聪明”）类型对象？

Answer 1

如果您希望具有初始的空状态，则应该这样做，

将信息标记为空，

interface IState {
  information?: IObject;
}

现在您可以将其初始化为空。

state = {}

对于缺少的属性，您应该依靠undefined而不是null。从打字稿样式指南中，（link）

使用未定义。请勿使用null。

在React / TypeScript应用程序中初始化可为空状态的正确方法是什么？

1 个答案: