TypeScript使用查找键时泛型自动补全失效问题

先看你给出的类型定义：

type A = {
  key: "A";
  data: {
    a: number;
  }
}

type B = {
  key: "B";
  data: {
    b: number;
    c: string;
  }
}

type MyTypes = A | B

情况1：自动补全正常的逻辑 #

当直接将泛型约束的类型作为参数类型时：

type DoSomethingOptions<T extends MyTypes> = T
function doSomething<T extends MyTypes>(options: DoSomethingOptions<T>) {}

doSomething({
  key: "A",
  data: {
    // 仅允许a，补全正常
  }
})

这里TypeScript会自动把泛型T锁定为具体的联合成员——当你传入key: "A"时，T会被推断为A类型，因为它是MyTypes中唯一key值为"A"的成员。此时data的类型就是A['data']，自动补全只会显示对应属性。

情况2：自动补全失效的核心原因 #

而用索引访问定义参数类型时：

type DoSomethingOptions<T extends MyTypes> = {
  key: T["key"];
  props: T["data"];
}
function doSomething<T extends MyTypes>(options: DoSomethingOptions<T>) {}

doSomething({
  key: "A",
  props: {
    // 显示a、b、c，补全失效
  }
})

问题出在泛型的推断逻辑上：

• 当约束T extends MyTypes时，TypeScript默认会把T当成整个联合类型A | B处理，不会自动缩小到具体成员。
• T["key"]会被计算为"A" | "B"，T["data"]会被计算为A['data'] | B['data']——这两个索引操作是独立的，TypeScript没有建立key和props的关联关系。
• 即便你传入key: "A"，TypeScript也不会自动将T缩小为A，所以props的类型仍然是两个data类型的联合，自然会显示所有属性。

解决方案：建立键与数据的关联 #

要让自动补全正常工作，需要显式关联key和props，常见两种实现方式：

方式1：映射类型构建关联

// 先构建key到data的映射关系
type MyTypeMap = {
  [T in MyTypes as T["key"]]: T["data"];
};

// 生成每个key对应的选项类型联合
type DoSomethingOptions = {
  [K in keyof MyTypeMap]: {
    key: K;
    props: MyTypeMap[K];
  };
}[keyof MyTypeMap];

function doSomething(options: DoSomethingOptions) {}

doSomething({
  key: "A",
  props: {
    // 仅显示a，补全正常
  }
});

方式2：泛型+Extract缩小类型

type DoSomethingOptions<K extends MyTypes["key"]> = {
  key: K;
  // 从MyTypes中提取对应key的类型，再取其data属性
  props: Extract<MyTypes, { key: K }>["data"];
};

function doSomething<K extends MyTypes["key"]>(options: DoSomethingOptions<K>) {}

doSomething({
  key: "A",
  props: {
    // 仅显示a，补全正常
  }
});

这两种方式都能让TypeScript识别出key和props的对应关系，从而提供正确的自动补全。

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