JS类组件数组状态转TypeScript Hook时的类型错误如何解决

问题根因 #

你的data状态是存储多条结构一致对象的数组，所以useState的泛型需要声明为DataType[]（DataType类型的数组），而非单个DataType。

正确实现步骤 #

1. 首先定义数据结构接口：

interface DataType {
  chx: any; // 建议补充chx的实际类型替代any，进一步强化类型校验
  bin: string;
  type: 'read' | 'write' | 'notify' | 'error'; // 可把type限定为实际用到的枚举值，比string类型更严谨
  ascii: string;
}

2. 正确声明useState状态：

// 泛型指定为DataType[]，初始值为空数组，类型完全匹配
const [data, setData] = useState<DataType[]>([]);

3. 状态更新写法和你之前的写法一致即可正常运行：

setData([
  ...data,
  {
    chx: chx,
    type: type,
    bin: bin,
    ascii: ascii,
  }
]);

如果更新时需要依赖最新的前序状态，更稳妥的写法是用函数式更新：

setData(prevData => [
  ...prevData,
  {
    chx: chx,
    type: type,
    bin: bin,
    ascii: ascii,
  }
]);

之前的报错原因说明 #

• 最初写useState([])时，TypeScript会默认推断空数组的元素类型为never，因此往数组中插入对象会报类型不匹配错误
• 之后声明useState<DataType>([])时，你指定状态类型为单个DataType对象，但传入的初始值是空数组，两者类型不匹配触发报错
• 去掉初始值[]后，TypeScript会推断状态类型为DataType | undefined，你更新时传入数组自然也会触发类型不匹配错误

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