使用打字稿在上下文中确定状态类型

Question

在我计算 bmi 的项目中，我想将结果作为数组保存在一个状态中并保存在本地。

export type BmiContextState = {
    weight: number | undefined;
    height:number | undefined;
    open:boolean|undefined;
    alert:boolean|undefined;
    results:resultState;
    handleWeight(event: React.ChangeEvent<HTMLInputElement>): void;
    handleHeight(event: React.ChangeEvent<HTMLInputElement>): void;
    openModal(event: React.MouseEvent<HTMLButtonElement, MouseEvent>):void;
    openAlert(event: React.MouseEvent<HTMLButtonElement, MouseEvent>):void;
    calculate:(weight:number,height:number)=>number;
    bmi:(bmi:number)=>string;

  };

export interface resultState {
    results:{
      bmi:number,
      bmiResult:string,
    }
}

我定义了一个名为 resultstate 的类型，我希望我的对象在其中。我定义了这样的类型。

const contextDefaultValues: BmiContextState = {
  weight: 0,
  height: 0,
  result: (0,"obesite")[],
  open: false,
  alert: false,
  handleWeight() {},
  handleHeight() {},
  openModal() {},
  openAlert() {},
  calculate: (weight, height) => 0,
  bmi: (bmi) => "",
};

结果部分报错，该如何定义？

Answer 1

您必须将result 更改为results，然后您可以将其初始化如下：

results: {results:{bmi:0,bmiResult: 'hello'}}

见Working Sample