如何在无TypeScript错误的情况下移除ES6映射中的undefined？解析相关TS报错

1. 如何在不触发TypeScript错误的前提下，从ES6映射中移除undefined值？ #

有两种实用方案，你可以根据是否需要保留原Map来选择：

• 直接修改原Map：用forEach遍历Map，判断值是否为undefined，如果是就调用delete方法移除对应的键值对。TypeScript能正确识别操作后的Map类型，不会报错：

  const myMap = new Map<string, string | undefined>([
    ['name', 'Alice'],
    ['age', undefined],
    ['city', 'New York']
  ]);
  
  myMap.forEach((value, key) => {
    if (value === undefined) {
      myMap.delete(key);
    }
  });
  // 此时myMap的类型自动推断为Map<string, string>
  

• 生成新的过滤后Map：如果不想改动原Map，可以把Map转为数组，过滤掉值为undefined的条目，再重新生成新Map。这种方式同样能让TS正确推断新Map的类型：

  const filteredMap = new Map(
    Array.from(myMap).filter(([_, value]) => value !== undefined)
  );
  // filteredMap的类型为Map<string, string>
  

2. 为什么执行.filter(x => x.id !== undefined).map(y => y.id)会触发TypeScript错误？ #

这是因为TypeScript默认不会把filter回调里的判断逻辑自动转化为类型约束，传递给后续的map。简单来说，普通的x => x.id !== undefined只是返回一个布尔值，TS没办法仅凭这个就确定过滤后的元素的id一定是非undefined的——它需要更明确的类型提示。

解决方法是使用类型谓词（Type Predicate），直接告诉TS：当回调返回true时，当前元素的类型是包含非undefined的id的版本。举个具体例子：

假设你的数组元素类型是这样的：

interface User {
  id?: number;
  name: string;
}

const users: User[] = [
  { id: 1, name: 'Bob' },
  { id: undefined, name: 'Charlie' },
  { id: 3, name: 'David' }
];

错误写法（会触发报错） #

// TS会提示：y.id可能为undefined
const userIds = users.filter(u => u.id !== undefined).map(y => y.id);

正确写法（使用类型谓词） #

你可以定义一个类型守卫函数：

// 类型谓词：返回true时，u的类型是User & { id: number }
const hasValidId = (u: User): u is User & { id: number } => {
  return u.id !== undefined;
};

// 此时filter后的数组类型是(User & { id: number })[]，map时y.id就是确定的number类型
const validUserIds = users.filter(hasValidId).map(y => y.id);

或者也可以直接把类型谓词写在filter的回调里，不用单独定义函数：

const validUserIds = users.filter((u): u is User & { id: number } => {
  return u.id !== undefined;
}).map(y => y.id);

这样TS就能准确识别过滤后元素的类型，不会再提示y.id may be undefined的错误了。

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