React TypeScript扩展运算符报错：string[]无法赋值给never[]求助

嘿，我刚接触TypeScript的时候也踩过这个一模一样的坑！咱们来一步步拆解这个问题：

错误原因分析 #

你初始化useState的时候用了空数组[]，TypeScript没办法自动推断出这个数组里应该存什么类型的元素，所以它默认把这个数组的类型设为never[]——意思是这个数组永远不能包含任何元素。当你尝试把string类型的query添加进去时，TypeScript自然会报错，因为string和never类型完全不兼容。

解决方法 #

有几种简单的方式可以修复这个问题，首推第一种最直观清晰的：

1. 显式指定useState的泛型类型 #

直接告诉TypeScript这个数组是用来存储字符串的，在useState后面加上<string[]>：

const [dataList, setDataList] = useState<string[]>([]);
const transferData = (query: string) => { 
  setDataList([...dataList, query]); 
};

这样TypeScript就明确知道dataList是string[]类型，setDataList接受的参数也必须是string[]，你的扩展运算符写法就完全符合类型要求了。

2. 初始化时提供带类型的示例（可选） #

如果你的数组初始不是完全空的，可以给一个符合目标类型的初始值，让TypeScript自动推断数组类型：

// TypeScript会自动推断dataList是string[]类型
const [dataList, setDataList] = useState(['初始示例字符串']);

不过如果初始必须是空数组，第一种方法显然更合适。

3. 使用类型断言（不推荐） #

虽然也能用类型断言强制指定类型，但这种写法不如泛型直观清晰，不推荐作为常规写法：

const [dataList, setDataList] = useState([] as string[]);

修改之后，你的transferData函数就能正常把新的字符串添加到数组里，编辑器也不会再弹出报错啦！

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