如何解决TypeScript中给const赋值string[]时出现undefined的TS2322报错

报错原因 #

你当前的判断逻辑是处理catNames整体为undefined的场景，但真正的报错根源是catNames数组的单个元素类型存在undefined可能：
TS的类型系统不会关联filter((id) => dataMap.has(id))和后续map中dataMap.get(id)的返回值，Map.get()方法的原生返回值就是T | undefined，因此最终catNames的类型是(string | undefined)[]，和你声明的string[]不匹配。

解决方案 #

方案1：添加类型断言（最简单，适合确定has判断后get必然返回有效值的场景）

在get调用后添加类型断言，明确告知TS返回值必然是string类型：

const catNames = categories
        .filter((id) => dataMap.has(id))
        .map((id) => dataMap.get(id) as string); // 这里加as string断言

const categoryNames: string[] = catNames;

方案2：显式过滤undefined值（更安全，适合不确定值是否存在的场景）

在map后新增一轮带类型守卫的过滤，自动把类型收窄为string[]：

const catNames = categories
        .map((id) => dataMap.get(id))
        .filter((item): item is string => item !== undefined); // 类型守卫过滤+收窄类型

const categoryNames: string[] = catNames;

这个方案甚至可以省略前置的filter步骤，一次完成过滤和类型校验。

方案3：用reduce合并逻辑

一次性遍历完成存在性判断和值收集，避免类型不匹配问题：

const categoryNames: string[] = categories.reduce((res, id) => {
  const name = dataMap.get(id);
  if (name) res.push(name);
  return res;
}, [] as string[]);

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