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

Posted 2023-02-22

【中文标题】如何在打字稿中设置初始 React 状态？

【英文标题】：How to set initial React state in typescript?

【发布时间】：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

【参考方案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 =