TypeScript：对象区分联合类型的类型推断异常

问题代码 #

// 接受两种props的函数：分别对应个人和实体场景
function Sample(props: { as: "individual", onSubmit: (v: string) => void } | { as: "entity", onSubmit: (v: number) => void }) {

}

const as = "" as "individual" | "entity";

let a = Sample({
    as,
    // 期望v的类型是string | number，而非any
    onSubmit: (v) => {}
});

问题说明 #

Sample函数定义了两种联合类型的props：

• 当指定as: "individual"时，onSubmit回调的参数类型为string
• 当指定as: "entity"时，onSubmit回调的参数类型为number

但使用类型为"individual" | "entity"的变量as传入时，onSubmit的参数v被推断为any类型，不符合预期的string | number；同时onSubmit的类型应该是(v: string) => void | (v: number) => void。

解决方案：通过泛型关联类型 #

使用泛型将as的取值与onSubmit的参数类型绑定，让TypeScript能准确推断类型：

// 定义泛型Props类型，根据T的取值关联对应的onSubmit参数类型
type Props<T extends "individual" | "entity"> = 
  T extends "individual" 
    ? { as: T, onSubmit: (v: string) => void } 
    : { as: T, onSubmit: (v: number) => void };

// 函数使用泛型约束props类型
function Sample<T extends "individual" | "entity">(props: Props<T>) {

}

const as = "" as "individual" | "entity";

let a = Sample({
    as,
    // 现在v的类型被正确推断为string | number
    onSubmit: (v) => {}
});

这种方式让TypeScript能识别as和onSubmit之间的类型关联，既保证了类型安全，又实现了预期的类型推断。

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