如何让VS Code TypeScript IntelliSense根据对象属性值限制提示选项？

我定义了一个带type和position属性的联合类型对象：

• type只能是'a'或'b'
• 当type为'a'时，position必须是"top" | "bottom"
• 当type为'b'时，position必须是"left" | "right"

代码如下：

type Height = { type: 'a'; position: 'top' | 'bottom' };
type Width = { type: 'b'; position: 'left' | 'right' };
type MyObject = Height | Width;

export const myObj: MyObject = {
  position: 'right',
  type: 'a', // 这里会触发类型错误，检查逻辑是正常的
};

目前类型检查能正常工作，但访问myObj.position时，IntelliSense会把四个选项全列出来，不会根据type的值过滤合法选项。想实现：选type为'a'时只显示top/bottom，选'b'时只显示left/right。

核心思路是缩小变量的类型范围，让TypeScript明确当前代码上下文里变量的具体子类型，这样IntelliSense就能给出精准提示。

1. 用条件判断做自动类型守卫 #

通过判断type的值，TypeScript会自动在分支里把变量类型缩小为对应的子类型，此时position的提示就会匹配当前类型：

if (myObj.type === 'a') {
  // 这里输入myObj.position时，只会提示top或bottom
  console.log(myObj.position);
} else {
  // 这里只会提示left或right
  console.log(myObj.position);
}

2. 写工厂函数创建类型安全的对象 #

如果是在创建对象时想要即时的精准提示，可以写一个简单的工厂函数，利用TypeScript的类型推断来绑定type和position的对应关系：

function createMyObj<T extends MyObject>(obj: T): T {
  return obj;
}

// 创建对象时，选type为'a'后，position只会弹出top/bottom的选项
const objA = createMyObj({ type: 'a', position: 'top' });
// 选type为'b'后，position只会显示left/right
const objB = createMyObj({ type: 'b', position: 'right' });

3. 类型断言（谨慎使用） #

如果已经确定变量的具体类型，可以用类型断言强制缩小范围，但这种方式需要自己保证正确性，不如类型守卫可靠：

const objAsHeight = myObj as Height;
// 这里position只会提示top/bottom
objAsHeight.position;

TypeScript的联合类型在未做类型缩小时，会合并所有分支的属性可能值。只有通过类型守卫（比如条件判断、自定义类型谓词）让TypeScript明确当前变量属于联合类型中的某一个具体子类型时，IntelliSense才会显示该子类型对应的属性选项。

内容的提问来源于stack exchange，提问作者cyrus-d