TypeScript映射类型函数编写：mapFn类型不匹配报错排查

问题描述 #

我正在编写一个类型安全的对象映射工具函数，要求严格遵循映射类型约束，映射函数的返回值必须和目标类型的对应键类型匹配。我想用它实现数据扁平化，把嵌套对象转换成结构简化的对象，但始终无法满足mapFn: <Key extends keyof From>(key: Key) => To[Key]的类型规范，编写的箭头函数出现如下编译错误：

Type 'readonly ["xwing", "speeder"] | readonly ["falcon", "eravana"]' is not assignable to type '{ readonly luke: readonly ["xwing", "speeder"]; readonly han: readonly ["falcon", "eravana"]; }[Key]'

解决方案 #

错误原因分析 #

TypeScript 无法自动推断出你的映射函数返回值与To[Key]的精确关联——你当前的实现返回的是所有可能值的联合类型，但类型约束要求：当输入的key是From的某个具体键时，返回值必须严格对应To中该键的具体类型，而非所有类型的混合。

具体修复步骤 #

1. 将映射函数定义为泛型函数
   确保mapFn的泛型参数Key与输入的key类型绑定，让 TypeScript 能跟踪每个键对应的目标类型：

   const mapFn = <Key extends keyof From>(key: Key): To[Key] => {
     // 实现逻辑
   };
   

2. 针对每个键返回精确类型
   在函数内部，通过分支逻辑（如switch或if-else）为每个具体的key返回对应的目标值，避免返回联合类型。由于 TypeScript 的控制流分析在泛型场景下存在局限性，需要用类型断言as To[Key]明确告诉编译器返回值的类型：

   // 假设 From 和 To 类型定义如下：
   type From = {
     luke: { vehicles: readonly ["xwing", "speeder"] },
     han: { vehicles: readonly ["falcon", "eravana"] }
   };
   type To = {
     luke: readonly ["xwing", "speeder"],
     han: readonly ["falcon", "eravana"]
   };
   
   const from: From = {
     luke: { vehicles: ["xwing", "speeder"] },
     han: { vehicles: ["falcon", "eravana"] }
   };
   
   const mapFn = <Key extends keyof From>(key: Key): To[Key] => {
     switch (key) {
       case "luke":
         return from.luke.vehicles as To[Key];
       case "han":
         return from.han.vehicles as To[Key];
       default:
         throw new Error(`Unsupported key: ${key}`);
     }
   };
   

3. 简化实现（当结构规律时）
   如果你的嵌套对象结构有统一规律（比如每个From的属性都包含vehicles字段），可以直接通过索引访问简化实现，同样配合类型断言确保类型匹配：

   const mapFn = <Key extends keyof From>(key: Key): To[Key] => {
     return from[key].vehicles as To[Key];
   };
   

完整的映射工具函数示例 #

将上述mapFn整合到你的工具函数中，确保整体类型安全：

function flattenObject<From extends object, To extends object>(
  from: From,
  mapFn: <Key extends keyof From>(key: Key) => To[Key]
): To {
  const result = {} as To;
  (Object.keys(from) as Array<keyof From>).forEach((key) => {
    result[key] = mapFn(key);
  });
  return result;
}

// 调用示例
const flattened = flattenObject(from, mapFn);
// flattened 类型为 To，且编译无错误

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