如何在打字稿中设置初始 React 状态？答案

【问题标题】：How to set initial React state in typescript?如何在打字稿中设置初始 React 状态？
【发布时间】：2020-05-29 06:10:49
【问题描述】：

使用打字稿和反应时初始化状态的正确方法是什么。以下会引发错误，因为显然 currentVehicle 不允许为空对象。初始状态应该是什么？什么是最佳实践？

 interface State{
    currentVehicle:Vehicle
}

export default class extends Component<Props, State> {
   state:State={
       currentVehicle:{}
     }
  }

【问题讨论】：

既然你已经向 React.Component 传递了一个State 接口，你应该像state = { currentVehicle: {} }一样初始化它
这能回答你的问题吗？ Typescript and React setting initial state with empty typed array

标签： reactjs typescript state

【解决方案1】：

你可以施放它：

state:State = {
    currentVehicle:{} as Vehicle
}

【讨论】：

【解决方案2】：

在这种情况下，我会将 currentVehicle 的类型定义为 Vehicle 或 null 并在初始状态下为其分配一个空值

interface State {
   currentVehicle: Vehicle | null
}

export default class extends Component<Props, State> {
  state: State = {
     currentVehicle: null
  }
}

第二个选项是将 currentVehicle 定义为可选参数。这样你就不必初始化它。

interface State {
   currentVehicle?: Vehicle // optional
}

export default class extends Component<Props, State> {

  /** you only define your state without defining state.currentVehicle */
  state: State = {}
}

【讨论】：