如何在带有打字稿的 React 中正确使用 useState 钩子？

Question

我正在尝试使用打字稿制作登录表单。但是 setEmail 方法不接受值。它说“字符串”类型的参数不能分配给“SetStateAction”类型的参数。我应该怎么做才能解决它？

Answer 1

如果没有任何初始参数，email 和 setEmail 的类型将是未定义的。

const [email, setEmail]: [undefined, (value: ((prevState: undefined) => undefined) | undefined) => void] = useState();

因此，第一步是通过使用 useState("") 或更好的 useState<string>("") 来强制电子邮件为字符串。

Answer 2

用空字符串初始化 useState 即可解决。

useState 可以根据你的 initialState 推断类型，这就是为什么用空字符串初始化可以解决你的情况。

没有initialState 的useState 将是未定义的，所以你的类型和状态是未定义的。

如果你想让你的状态有一个更复杂的类型，你需要传递一个具有定义类型的initialState：

const initialState: TYPE = {
  // ...
};
const [state, setState] = useState(initialState);

或

将类型传递给 useState 而不将 type 设置为 initialState，例如：useState<TYPE>(initialState);

Answer 3

您可以为其设置字符串类型

显式方式：

const [email, setEmail] = useState<string>('')

或隐式方式：

const [email, setEmail] = useState('')

或者如果你想设置数字类型

  const [inputNumber, setInputNumber] = useState<number>(0);

然后在 jsx 中这样做

 <input
     type="number"
     value={inputNumber}
     onChange={(val) => {
      //Some ways to do this
       setInputNumber(Number(val.target.value));
       setInputNumber(+val.target.value);
       setInputNumber(parseInt(val.target.value,0));
       }}
 />

see more examples

Answer 4

在这种情况下，您只需要使用带有 useState 钩子的泛型

简单案例

const [email, setEmail] = useState<string>("")

复杂情况

• 声明一个接口

     interface IUser{
        email:string
        }

• 使useState通用

     const [email, setEmail] = useState<IUser>({email: ''})

你可以看到DefinitelyTyped