使用 TypeScript 中的 useState Hook

在 React 中，useState 是一种常用的 Hook，可以使函数组件拥有状态（state）和更新状态的能力。但是如果你是 TypeScript 用户，如何正确使用 useState，例如如何推断状态的类型？

本篇文章将介绍使用 TypeScript 中的 useState Hook 的基本用法和类型推断。

基本用法

useState 的基本用法很简单，它接收一个初始值参数（initial value），并返回一个数组，第一个元素是当前状态的值，第二个元素是更新状态的函数。

const [state, setState] = useState(initialValue);

例如，下面的例子中，我们初始化 count 的值为 0：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

当我们点击 Increment 按钮时，count 值会增加，并且组件会重新渲染。

类型推断

除了基本用法外，如何正确推断状态的类型呢？这里有两种方法：

显式指定泛型类型

第一种方法是显式指定泛型类型，即在调用 useState 时，手动注明状态的类型。例如，如果你想要一个字符串类型的状态，可以这样写：

const [str, setStr] = useState<string>("hello world");

这样一来，TypeScript 就会根据指定的类型来推断 state 和 setState 的类型。

使用类型推断

第二种方法是使用类型推断。我们可以定义一个泛型接口来描述状态的类型，并传递给 useState 的类型参数中。例如，我们想要一个包含 name 和 age 两个字段的状态：

interface User {
  name: string;
  age: number;
}

function UserInfo() {
  const [user, setUser] = useState<User>({ name: "", age: 0 });

  return (
    <div>
      <input
        value={user.name}
        onChange={(e) => setUser({ ...user, name: e.target.value })}
      />
      <input
        value={user.age}
        onChange={(e) => setUser({ ...user, age: parseInt(e.target.value) })}
      />
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
    </div>
  );
}

这样一来，TypeScript 就会根据 User 接口来推断 state 和 setState 的类型。注意，我们在更新状态时，需要使用展开运算符（spread operator）来合并对象。

总结

本文介绍了如何使用 TypeScript 中的 useState Hook，包含基本用法和类型推断两个方面。在 TypeScript 中使用 useState 对于类型安全和代码维护都非常有帮助。但是要记住，useState 并不是唯一的 Hook，还有很多其他的 Hooks，可以帮助你更好地编写 React 和 TypeScript 应用。