TypeScript中调用返回联合类型的函数后如何获取VSCode自动补全

问题复现 #

以下代码中，调用getProperty<ColorfulOrCircle>()后，输入b.不会触发正确的属性补全，访问b.color还会报类型错误：

interface Colorful {
  color: string;
}
interface Circle {
  radius: number;
}

type ColorfulOrCircle = Colorful | Circle;

function getProperty<T>(cc: T): T {
  return cc;
}

let b = getProperty<ColorfulOrCircle>({color: "red"})
b. ; // 无正确自动补全

问题原因 #

• 调用时显式传入泛型参数ColorfulOrCircle，强制将返回值类型固定为Colorful | Circle联合类型，丢失了传入实参{color: "red"}本身的精确类型信息。
• TypeScript对未经过窄化的联合类型，仅允许访问所有联合成员共有的属性。示例中Colorful和Circle没有公共属性，自然不会出现合法属性提示，直接访问某一类型独有的属性也会触发类型错误，这是类型安全的设计，不是编辑器bug。

解决方案 #

方案1：用泛型约束替代手动指定联合类型泛型参数 #

修改函数的泛型声明，给泛型添加类型约束，既限制入参必须符合ColorfulOrCircle类型，又保留TS对入参的自动推断能力，拿到精确的窄化类型：

// 泛型T继承自联合类型，入参符合联合类型要求的同时，保留传入值的具体类型
function getProperty<T extends ColorfulOrCircle>(cc: T): T {
  return cc;
}

// 调用时不需要手动传泛型参数，TS会自动推断T为{color: "red"}类型
let b = getProperty({color: "red"})
b.color; // 可以正常补全，无类型错误

方案2：对联合类型变量做类型收窄 #

如果确实需要将变量标注为完整的联合类型，通过类型守卫收窄类型后即可获得对应分支的正确补全：

let b: ColorfulOrCircle = getProperty({color: "red"})
// 通过in操作符做类型守卫
if ('color' in b) {
  // 此分支内b被收窄为Colorful类型，可正常补全color属性
  b.color;
} else {
  // 此分支内b被收窄为Circle类型，可正常补全radius属性
  b.radius;
}

注意：不推荐为了补全直接使用类型断言绕开类型检查，会破坏TypeScript的类型安全保障。

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