React状态数组无法正确类型标注？TypeScript类型报错求助

问题根源 #

你遇到的Argument of type 'any' is not assignable to parameter of type 'never'错误，核心原因是TypeScript对空数组的类型推断逻辑，以及组件state和你定义的State接口没有正确关联。

当你只写state = { array: [] }时，TypeScript会默认把空数组推断为never[]类型——因为它不知道数组里应该存放什么类型的元素，哪怕你定义了State接口，如果组件没有明确把state和这个接口绑定，TypeScript还是会用自己推断的never[]来处理array，这时候传入any类型的el调用includes，自然会出现类型不匹配的报错。

解决方案 #

你需要明确把组件的state和State接口关联起来，有两种常用方式：

1. 给组件指定State泛型（类组件）

在定义组件时，通过React.Component的泛型参数，把你的State接口传递进去：

import React from 'react';

export interface State {
  array: any[];
}

class YourComponent extends React.Component<{}, State> {
  // 这里的state会自动继承State接口的类型，不需要额外标注
  state = { array: [] };

  method = (el: any): void => {
    const { array } = this.state;
    const includesEl = array.includes(el); // 报错消失
  };
}

2. 给state变量显式标注类型

如果不想通过组件泛型绑定，也可以直接在state声明时指定类型：

import React from 'react';

export interface State {
  array: any[];
}

class YourComponent extends React.Component {
  // 显式标注state的类型为State接口
  state: State = { array: [] };

  method = (el: any): void => {
    const { array } = this.state;
    const includesEl = array.includes(el); // 报错消失
  };
}

额外建议 #

尽量避免使用any[]，最好根据数组实际存放的元素类型指定具体类型（比如string[]、number[]或者自定义类型数组），这样能充分发挥TypeScript的类型检查优势，避免潜在的类型问题。

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