TypeScript类型不匹配：string[]无法赋值给number[]参数求助

问题核心是selectedCategory、selectedLocation、selectedMonth为字符串类型，但onCategoriesChange要求传入数字数组，导致TypeScript类型校验报错。以下是几种直接可行的解决方式：

1. 过滤后转换为数字数组 #

在sanitizeCategories函数里，把过滤后的字符串元素统一转为数字：

const sanitizeCategories = () => {
  const filteredCategories = [selectedCategory, selectedLocation, selectedMonth]
    .filter(category => Boolean(category))
    // 将每个字符串元素转为数字类型
    .map(Number);

  return filteredCategories;
}

注：filter(Boolean)已经过滤掉空值、undefined等无效内容，所以Number()转换不会出现0（空字符串转0的情况已被过滤）。

2. 从源头保证变量为数字类型 #

检查selectedCategory等变量的赋值逻辑，如果这些值来自表单输入、URL参数等字符串场景，在赋值时直接转成数字：

// 示例：表单选择框 onChange 时转换
const handleCategoryChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
  setSelectedCategory(Number(e.target.value));
};

// 示例：从URL参数获取时转换
const selectedMonth = Number(new URLSearchParams(window.location.search).get('month'));

从源头把变量类型固定为数字，后续无需额外转换。

3. 安全转换（处理非法数字场景） #

如果存在变量可能是非法字符串（比如非数字内容），需要额外校验避免转换出NaN：

const sanitizeCategories = () => {
  const filteredCategories = [selectedCategory, selectedLocation, selectedMonth]
    .filter(category => {
      const num = Number(category);
      // 确保转换后是有效数字，且原始内容非空
      return !isNaN(num) && Boolean(category);
    })
    .map(Number);

  return filteredCategories;
}

这种方式能保证最终传入onCategoriesChange的数组全是有效数字。

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