react useState ts定义类型

徐同保2025-10-18 20:28

在 React 中使用 useState 时，如果你在 TypeScript 里想为 useState 明确指定状态的类型，可以这样做：

1. 基础类型

比如，声明一个数字类型的 state：

tsx 复制代码

import React, { useState } from "react";

const Example: React.FC = () => {
  // 方式一：类型自动推断
  // const [count, setCount] = useState(0);

  // 方式二：显式指定类型
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>点击: {count}</button>
    </div>
  );
};

export default Example;

2. 对象类型

当 state 是对象时：

tsx 复制代码

type User = {
  name: string;
  age: number;
};

const [user, setUser] = useState<User>({ name: "张三", age: 18 });

3. 数组类型

tsx 复制代码

const [list, setList] = useState<string[]>([]);

4. 联合类型或可为空

如果 state 可能为 null，需要加上 null：

tsx 复制代码

const [data, setData] = useState<string | null>(null);

总的语法形式：

tsx 复制代码

const [state, setState] = useState<类型>(初始值);

如果有具体的类型定义问题，可以把你的实际代码发出来帮你更详细解答！