React TypeScript动态useState数组类型错误求助（string[]/number[]）

核心方案是给FilteringGroup组件添加泛型约束，让checkedValues的类型自动跟随options的类型，彻底解决类型不匹配问题。

具体实现代码 #

import { useState } from 'react';

// 定义泛型组件，约束T只能是string或number
export const FilteringGroup = <T extends string | number>({ options }: { options: T[] }) => {
  // 用泛型指定checkedValues的类型为T[]，明确初始空数组的类型
  const [checkedValues, setCheckedValues] = useState<T[]>([]);

  const handleToggle = (val: T) => {
    setCheckedValues(prev => {
      // 此时val和prev的元素类型完全匹配，includes不再报错
      if (prev.includes(val)) {
        return prev.filter(item => item !== val);
      } else {
        return [...prev, val];
      }
    });
  };

  // 渲染逻辑示例
  return (
    <div>
      {options.map(opt => (
        <label key={String(opt)}>
          <input
            type="checkbox"
            checked={checkedValues.includes(opt)}
            onChange={() => handleToggle(opt)}
          />
          {opt}
        </label>
      ))}
    </div>
  );
};

原理说明 #

1. 泛型约束：通过<T extends string | number>限定组件的泛型类型，确保T只能是string或number，和传入的options类型严格对应。
2. 类型自动推断：当父组件传递string[]类型的options时，TS会自动推断T为string，checkedValues就变成string[]；传递number[]时，checkedValues自动变为number[]。
3. 消除never类型：原本初始空数组[]会被TS推断为never[]，现在通过useState<T[]>([])明确指定类型，彻底解决includes方法的参数类型不兼容问题。

父组件使用示例 #

// 传递string[]类型的选项
<FilteringGroup options={['apple', 'banana', 'orange']} />

// 传递number[]类型的选项
<FilteringGroup options={[1, 2, 3, 4]} />

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