在TypeScript中使用React的useState Hook（附代码）

在TypeScript中使用React的useState Hook时，该方法通常从提供的参数中自动推断出返回状态的隐含类型。在下面的例子中，React的useState Hook在一个函数组件中知道它处理的是一个number 类型。因此，返回的状态（这里是：count ）的类型是number ，此外，状态更新函数（这里是：setCount ）需要一个类型为number 的值作为参数：

import * as React from 'react';
const App = () => {  const [count, setCount] = React.useState(0);
  const handleIncrease = () => {    setCount(count + 1);  };
  return (    <div>      <button type="button" onClick={handleIncrease}>        Increase      </button>
      <div>{count}</div>    </div>  );};
export default App;

然而，当处理基元以外的其他类型时（例如对象的复杂类型、空类型、联合类型），自动推断类型并不总是有效。那么你可以使用TypeScript的类型参数，用它可以明确地告诉React的useState Hook的通用类型。反正我喜欢用这个作为最佳实践，因为它使代码具有自我描述性：

import * as React from 'react';
const App = () => {  const [count, setCount] = React.useState<number>(0);
  ...};

如果类型参数变成了基元以外的东西，把它提取为TypeScript接口：

import * as React from 'react';
interface UserFormState {  email: string;  password: string;}
const App = () => {  const [userForm, setUserForm] = React.useState<UserFormState>({    email: '',    password: '',  });
  ...};

就这样了。大多数情况下，你可以依靠TypeScript的能力来自动推断类型。然而，有时你需要使用TypeScript的类型参数来帮助TS编译器解决。如果你想拥有自我描述的代码，你可以使用类型参数。