reactjs - ionic react : How to properly type (typescript) event object parameter in delegated anonymous onIonChange event handler

Question

我正在使用表单验证库(react-hook-form)，其中我需要使用包装器组件(称为 Controller )来控制输入。

            <Controller
              render={({ onChange, onBlur, ...rest }) => (
                <IonCheckbox
                  {...rest} 
                  slot="start"
                  //@ts-ignore
                  onIonChange={(e) => onChange(e.target.checked)}
                  onIonBlur={onBlur}
                />
              )}
              control={control}
              rules={{
                required: { value: true, message: "this required" },
              }}
            />

目前我让编译器忽略输入错误，因为我尝试了几件事但没有成功:

<强>1。我认为肯定会起作用:

onIonChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.checked)}

给了我一个问题:

类型“(e: React.ChangeEvent) => void”不可分配给类型“(event: CustomEvent) => void”。 参数“e”和“event”的类型不兼容。 类型“CustomEvent”缺少类型“ChangeEvent”中的以下属性:nativeEvent、isDefaultPrevented、isPropagationStopped、persistts(2322) Components.d.ts(3680, 9):预期类型来自属性“onIonChange”，该属性在类型“IntrinsicAttributes & IonCheckbox & Pick

<强>2。根据错误消息，我尝试了以下操作:

onIonChange={(e: CustomEvent<CheckboxChangeEventDetail> => onChange(e.target.checked)}

这给出了更简洁的错误:

找不到名称“CheckboxChangeEventDetail”.ts(2304)

<强>3。用这个捕获吸管

onIonChange={(e: EventEmitter<CheckboxChangeEventDetail>) => onChange(e.target.checked)}

这会产生一些错误:

类型“EventEmitter”不是 generic.ts(2315) 找不到名称“CheckboxChangeEventDetail”。

我已经遇到过几次这样的问题，现在的 @ts-ignore 评论比我能接受的还要多。 有人知道如何用 typescript 正确输入这个吗？

Answer 1

您只需添加接口(interface)即可...

export interface CheckboxChangeEventDetail {
  value: any;
  checked: boolean;
}

然后设置代码

<IonItem>
  <Controller
    render={({ onChange, onBlur }) => (
      <IonCheckbox
        onIonChange={(e: CustomEvent<CheckboxChangeEventDetail>) => {
          onChange(e?.detail.checked);
          console.log(e);
        }}
        onIonBlur={onBlur}
      />
    )}
    control={control}
    defaultValue={false}
    name="saveInfo"
    rules={{
      required: false,
    }}
  />
</IonItem>