React+TypeScript使用扩展运算符更新useState时报错如何正确定义类型

• 你的history状态是二维数组结构，setHistory作为React状态更新函数，仅支持传入单个与history类型匹配的值或返回该值的更新函数
• 你使用setHistory(...newHistory)相当于把newHistory这个二维数组拆成多个一维数组作为参数传入，参数数量、类型均不符合setHistory的入参要求，因此触发TS类型校验报错

1. 给useState显式声明泛型类型 #

先明确状态的类型规则，避免TS自动推导出现偏差：

// 可根据业务调整棋子的可选类型，比如井字棋场景下为null、'X'、'O'
type ChessPiece = null | 'X' | 'O';
// 显式指定history是二维数组：每一项对应一局快照，是长度为9的棋子数组
const [history, setHistory] = useState<ChessPiece[][]>([Array(9).fill(null)]);

2. 修正状态更新写法 #

直接将完整的newHistory作为参数传入即可，不需要加扩展运算符：

const newHistory = history.slice(0, currentStep + 1);
// 正确写法：传入完整的新数组
setHistory(newHistory);

如果是要在现有历史基础上追加新的棋局快照，按如下方式构造新数组即可：

const currentSquares = /* 最新的9格棋局状态 */
const newHistory = [...history.slice(0, currentStep + 1), currentSquares];
setHistory(newHistory);

只有当你调用的函数本身支持接收多参数（rest参数），或者你能保证扩展的数组是固定长度的tuple类型时，才需要用扩展运算符传参。React状态更新函数固定仅接收1个参数，该场景下无需调整tuple类型，直接按上述写法修正即可。

内容的提问来源于stack exchange，提问作者Mateusz Matuś Kowalski