TypeScript多接口联合keyof函数参数类型推导与补全问题

一、基础双接口场景解决方法 #

原来的代码报错，是因为泛型T可能是A的键，也可能是B的键——当T是B的键时，A[T]根本不存在，反过来也一样，TypeScript没法安全做索引操作。

我们可以用条件类型精准匹配：判断T属于哪个接口的键，再对应取出params类型：

interface A {
  X: {params: {a: string; b: number}};
  Y: {params: {c: number; d: number}};
}

interface B {
  Z: {params: {e: string; f: string}};
}

const foo = <T extends keyof A | keyof B>(
  k: T,
  params: T extends keyof A ? A[T]["params"] : B[T]["params"]
) => {
  console.log(k, params);
};

foo("X", {a: "a", b: 1}); // 正常工作，params类型自动推导
foo("Y", {c: 1, d: 2}); // 正常工作
foo("Z", {e: "z", f: "z"}); // 正常工作
foo("Y", {c: "1", d: 2}); // 正确报错：string不能赋值给number

这样既解决了索引报错，又保留了键的自动补全和参数的类型校验。

二、泛类场景适配方案 #

原泛类代码的问题有两个：一是直接用A[T]["params"] | AP[T]["params"]会因为T可能只属于其中一方而触发索引错误；二是AP继承了字符串索引签名，导致键的自动补全失效，甚至出现never类型的参数。

我们可以通过两层条件类型来区分键的来源，同时优化泛型约束保留补全：

优化后的代码 #

interface A {
  X: {params: {a: string; b: number}};
  Y: {params: {c: number; d: number}};
}

// 调整约束：仅限制AP的键不能与A重复，去掉字符串索引避免补全混乱
type AdditionalProps = { 
  [K in keyof any]: K extends keyof A ? never : { params: any } 
};

interface B extends AdditionalProps {
  Z: {params: {e: string; f: string}};
}

class C<AP extends AdditionalProps> {
  foo = <T extends keyof A | keyof AP>(
    k: T,
    params: T extends keyof A 
      ? A[T]["params"] 
      : AP[T]["params"]
  ) => {
    console.log(k, params);
  };
}

const c = new C<B>();

c.foo("X", { a: "", b: 1 }); // 正常工作，键和参数都有补全
c.foo("Z", { e: "", f: "" }); // 正常工作，参数类型正确
c.foo("Z", { e: "", f: 1 }); // 正确报错：number不能赋值给string

关键优化点 #

• 条件类型分支：通过T extends keyof A判断键的来源，只在有效范围内做索引，避免TypeScript报错；
• 去掉字符串索引：修改AdditionalProps的定义，不再使用字符串索引签名，而是通过泛型约束确保AP的键不与A冲突，这样键的自动补全只会显示A和AP中定义的具体键，不会出现所有字符串的模糊选项；
• 保留类型推导：每个分支对应正确的params类型，输入时自动补全，错误类型会及时提示。

内容的提问来源于stack exchange，提问作者J. Doe