TypeScript中Array<string>类型useState调用indexOf报never类型错误如何解决

1. useState类型定义错误
   你写的React.useState<Array<string>| [] >([])里额外联合了[]类型，该类型在TypeScript中默认被推断为never[]，表示永远不会存放元素的空数组。和Array<string>联合后，TypeScript无法正确收敛类型，会认定数组元素类型为never，调用indexOf时自然要求传入never类型的参数，你传入字符串就会触发类型不匹配错误。
2. 代码笔误

• selectHandler中调用newSelected.push(element)时，element变量未定义，应该是你传入的参数listId
• Checkbox组件的checked属性里你用了未定义的checked变量调用indexOf，这个未声明的变量被TypeScript推断为any，结合之前的never类型问题，就抛出了any cannot be assigned to never的错误。

• 第一步：修正useState的类型定义
  直接指定数组类型为字符串数组即可，不需要额外联合空数组类型，空数组本身就是字符串数组的合法初始值：

const [selected, setSelected] = React.useState<Array<string>>([]);

• 第二步：修正selectHandler的笔误
  把push的参数替换为入参listId：

const selectHandler = (listId: string) => () => {
  const currentIndex = selected.indexOf(listId);
  const newSelected = [...selected];
  if (currentIndex === -1) {
    newSelected.push(listId);
  } else {
    newSelected.splice(currentIndex, 1);
  }
  setSelected(newSelected);
}

• 第三步：修正Checkbox的checked属性逻辑
  把未定义的checked变量替换成你声明的状态变量selected：

<Checkbox
  edge='end'
  onChange={selectHandler(value._links.self.href)}
  checked={selected.indexOf(value._links.self.href) !== -1}
  inputProps={{ 'aria-labelledby': labelId }}
/>

如果value._links.self.href被TypeScript推断为any类型，你可以给value定义对应结构类型，或者手动转成字符串确保类型匹配：String(value._links.self.href)

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