React TypeScript中SetStateAction类型不兼容错误求助

错误原因 #

当使用useState([])初始化状态时，TypeScript无法自动推断数组元素的具体类型，会默认将其推断为never[]（表示数组元素类型为“不存在”）。而后续要赋值的shuffledColors是{ id: number; color: string; }[]类型的数组，两种类型不兼容，因此抛出类型错误。

解决方案 #

核心是给useState显式指定状态的类型，让TypeScript明确知道数组元素的结构。

方法1：定义接口指定类型 #

先定义数组元素的接口，再在useState中声明泛型参数：

// 定义颜色项的类型接口
interface ColorItem {
  id: number;
  color: string;
}

// 初始化状态时指定类型
const [colors, setColors] = useState<ColorItem[]>([])

方法2：直接在useState中指定类型（简洁版） #

如果不想单独定义接口，也可以直接在useState中写出类型结构：

const [colors, setColors] = useState<{ id: number; color: string; }[]>([])

方法3：基于已有变量推导类型 #

利用colorSequence的类型进行扩展，避免重复定义color字段：

// 提取colorSequence中单个元素的类型
type BaseColor = typeof colorSequence[0];
// 扩展id属性得到最终类型
interface ColorItem extends BaseColor {
  id: number;
}

const [colors, setColors] = useState<ColorItem[]>([])

修改后的完整代码示例 #

import React, { useState } from "react";
import "./App.css";
import { Button } from "@mui/material";

interface ColorItem {
  id: number;
  color: string;
}

// 给colorSequence指定类型，避免隐式any
const colorSequence: Omit<ColorItem, 'id'>[] = [
  { "color":  "#3db44b" },
  { "color":  "#bfef45" },
  { "color":  "#42d3f4" },
  { "color":  "#4263d8" },
  { "color":  "#f68232" },
  { "color":  "#fee118" },
  { "color":  "#e6194a" },
  { "color":  "#f032e6" },
  { "color":  "#921eb3" }
]

function App() {
  const [colors, setColors] = useState<ColorItem[]>([])

  const shuffleColors = () => {
    const shuffledColors = [...colorSequence]
      .sort(() => Math.random() - 0.5)
      .map((color) => ({ ...color, id: Math.random() }))

    setColors(shuffledColors)
  }

  return (
    <div className="App">
      <Button onClick={shuffleColors}>打乱颜色</Button>
      {/* 可添加colors的渲染逻辑，例如：
      {colors.map(item => (
        <div key={item.id} style={{backgroundColor: item.color, width: 50, height: 50}} />
      ))}
      */}
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Jikk