TypeScript联合类型映射报错：如何修正ValueType类型匹配问题？

问题重现 #

定义以下类型与函数后，TypeScript报错提示'A'不存在于ValueType类型上：

type AUnion = 'A'|'AA'|'AAA'
type BUnion = 'B'|'Number'

type ValueType = {
'A': string;
'AA': string;
'AAA': string;
} | {
'B': string;
'Number': number;
}

const myFn = (value: ValueType, message: AUnion | BUnion) => {
  const mappingResult = value[message] // 此处触发类型报错
  return mappingResult 
}

补充背景：value来自以下映射对象，已通过typeof value === 'string'处理m1/m2的字符串情况，剩余为上述联合类型：

const mapping = {
    m1: "abc",
    m2: "edf",
    aUnion: {
        A: "aUnionA",
        AA: "aUnionAA",
        AAA: "aUnionAAA",
    },
    bUnion: {
        B: "bUnionB",
        Number: 123,
    },
}

type MappingKey = "m1" | "m2" | "aUnion" | "bUnion"
// value = mapping[key]，已处理string类型分支

报错原因 #

当前ValueType是两个独立对象类型的联合，message是AUnion | BUnion的联合，TypeScript无法确认传入的value与message是否匹配——比如可能传入bUnion对应的对象，但message是A，此时该属性确实不存在，因此触发类型校验错误。

修正方案 #

方案1：用泛型关联参数类型 #

通过泛型约束，让TypeScript明确value与message的对应关系：

type AUnion = 'A'|'AA'|'AAA'
type BUnion = 'B'|'Number'

// 定义对应类型的键值结构
type AType = { [K in AUnion]: string }
type BType = { [K in BUnion]: string | number }

// 泛型函数关联value和message的类型匹配
const myFn = <K extends AUnion | BUnion>(
  value: K extends AUnion ? AType : BType,
  message: K
) => {
  return value[message]
}

方案2：从原映射对象推导类型（更贴合场景） #

直接基于mapping对象的类型推导，避免手动维护重复类型，保证类型一致性：

const mapping = {
    m1: "abc",
    m2: "edf",
    aUnion: {
        A: "aUnionA",
        AA: "aUnionAA",
        AAA: "aUnionAAA",
    },
    bUnion: {
        B: "bUnionB",
        Number: 123,
    },
}

// 提取mapping中非string类型的value类型
type NonStringMappingValue = Exclude<typeof mapping[keyof typeof mapping], string>

// 泛型约束确保message是当前value的合法键
const myFn = <T extends NonStringMappingValue>(
  value: T,
  message: keyof T
) => {
  return value[message]
}

调用时TypeScript会自动校验合法性：

// 合法调用
myFn(mapping.aUnion, 'A') // 返回string类型
myFn(mapping.bUnion, 'Number') // 返回number类型

// 非法调用触发报错
myFn(mapping.aUnion, 'B') // 类型错误：'B'不是aUnion的键

方案3：类型断言（仅在能确保类型匹配时使用） #

如果可以完全保证传入的value与message一定匹配，可通过类型断言跳过检查，但会丢失类型安全，不推荐：

const myFn = (value: ValueType, message: AUnion | BUnion) => {
  const mappingResult = (value as Record<string, any>)[message]
  return mappingResult 
}

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