TypeScript函数映射的逆变问题及解决方案咨询

问题核心是TypeScript的函数参数逆变特性：接受更窄类型（如Triangle）的函数无法赋值给接受更宽联合类型（如Shapes）的函数类型，因为前者无法处理联合类型中的其他子类型（如Square/Circle）。要绕开这个限制且不用类型守卫，关键是让TypeScript明确追踪每个映射键对应的函数参数类型，而不是统一用父类型。

具体实现方案 #

1. 定义键与子类型的关联映射
   先创建一个类型，明确每个键对应的Shape子类型，让类型系统建立键和参数类型的绑定关系：

   interface Shape { type: string }
   interface Triangle extends Shape { type: 'TRIANGLE' }
   interface Square extends Shape { type: 'SQUARE' }
   interface Circle extends Shape { type: 'CIRCLE' }
   
   const triangle: Triangle = { type: 'TRIANGLE' }
   const square: Square = { type: 'SQUARE' }
   
   // 键与对应Shape子类型的关联定义
   type ShapeKeyMap = {
     'triangle-handler': Triangle,
     'square-handler': Square,
     'circle-handler': Circle
   }
   

2. 生成类型安全的函数映射
   基于上面的关联类型，用映射类型生成每个键对应的函数类型，确保每个函数只接受指定的子类型：

   // 自动推导每个键对应的函数参数类型
   type FunctionMap = {
     [K in keyof ShapeKeyMap]: (shape: ShapeKeyMap[K]) => void
   }
   

3. 创建符合类型的映射对象
   此时定义映射对象时，每个函数的参数类型会被严格校验，且无需额外断言：

   const shapeHandlers: FunctionMap = {
     'triangle-handler': (shape) => {
       // shape自动推导为Triangle，直接访问子类型属性
       console.log('处理三角形:', shape.type)
     },
     'square-handler': (shape) => {
       console.log('处理正方形:', shape.type)
     },
     'circle-handler': (shape) => {
       console.log('处理圆形:', shape.type)
     }
   }
   

4. 编写类型安全的调用函数
   通过泛型绑定键和对应的子类型，确保调用时传入的shape与key严格匹配：

   const handleShape = <K extends keyof ShapeKeyMap>(shape: ShapeKeyMap[K], key: K) => {
     shapeHandlers[key](shape)
   }
   
   // 合法调用：类型完全匹配
   handleShape(triangle, 'triangle-handler')
   handleShape(square, 'square-handler')
   
   // 非法调用会直接触发TypeScript错误
   // handleShape(triangle, 'square-handler') // 报错：类型不匹配
   

方案优势 #

• 完全基于TypeScript类型系统实现，无需类型守卫或类型断言
• 编译阶段就能拦截键与参数类型不匹配的错误，运行时更安全
• 函数内部直接获取子类型的完整类型信息，代码更简洁

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