在 React 打字稿中使用导出函数

Question

我有两个问题。我应该如何使用导出函数以及如何使用可选参数？

我为功能创建了一个组件，我想通过将它们导入其他组件来调用它。

我将此函数导出为：

    export const verifyOTP = (
      inputId: string,
      setIsVer: (state: boolean) => void | null,
      setProfile: () => void | null,
      setIsAuth: (state: boolean) => void
    ) => {
      let codeInput = document.getElementById(inputId) as HTMLInputElement;
      if (codeInput.value.length === 6) {
        let confirmationRes = window.confirmationRes;

    confirmationRes
      .confirm(codeInput.value)
      .then((res: any) => {
        setIsVer(true);
        setProfile();
        setIsAuth(true);
      })
      .catch((error: ErrorCallback) => console.log(error));
  }
};

我在输入中将其称为：

<input
              type="text"
              id="code"
              onChange={() => verifyOTP('code', null, null, setIsAuth)}
              placeholder="Código"
              disabled={disable}
            ></input>

在这个组件中，我只想让它触发 setIsAuth。但是在另一个组件中我想使用所有 4 个参数。

它在 onChange 上抛出这个错误：

Argument of type 'null' is not assignable to parameter of type '(state: boolean) => void | null'.

Answer 1

一切都与运算符优先级有关：

(state: boolean) => void | null实际上是一个函数，可以returnvoid或null.

您需要 ((state: boolean) => void) | null，这是 returns void 的函数，或者只是值 null.

在 React 打字稿中使用导出函数

Using exported functions in React typescript

typescript

reactjs