TypeScript如何实现VS Code智能提示嵌套属性？

要实现支持'admin.name'字符串路径或('admin', 'name')元组路径的函数，同时保留VS Code智能提示，需要通过递归类型生成合法路径集合，再结合函数重载实现参数约束。

步骤1：定义递归路径类型 #

首先创建两个递归类型，分别生成所有合法的字符串路径和元组路径：

// 生成所有嵌套层级的字符串路径（如 'admin.name'、'greeting'）
type PathString<T> = T extends object
  ? { 
      [K in keyof T]: `${K & string}${PathString<T[K]> extends never ? '' : `.${PathString<T[K]>}`}` 
    }[keyof T]
  : never;

// 生成所有嵌套层级的元组路径（如 ['admin', 'name']、['greeting']）
type PathTuple<T> = T extends object
  ? { 
      [K in keyof T]: [K & string, ...PathTuple<T[K]>] 
    }[keyof T]
  : [];

// 合并两种路径类型，作为函数参数的约束
type Path<T> = PathString<T> | PathTuple<T>;

步骤2：编写函数重载与实现 #

通过函数重载分别处理字符串路径和元组路径的情况，同时利用上面定义的类型约束参数，确保只有合法路径能被传入，且VS Code会提供智能提示：

const example = {
  admin: {
    name: "Name",
  },
  greeting: "Hello",
};

// 函数重载：分别匹配字符串路径和元组路径
function myFunc(path: PathString<typeof example>): void;
function myFunc(...path: PathTuple<typeof example>): void;

// 函数实现：统一处理两种路径格式
function myFunc(...args: any[]): void {
  // 将参数转换为统一的字符串路径格式
  const finalPath = Array.isArray(args[0]) 
    ? args[0].join('.') 
    : args[0];
  
  // 这里可以添加你的业务逻辑
  console.log('当前处理路径:', finalPath);
}

验证效果 #

现在调用myFunc时，VS Code会自动提示所有合法路径，且非法路径会触发TypeScript报错：

• 合法调用：myFunc('admin.name')、myFunc('greeting')、myFunc('admin', 'name')
• 非法调用：myFunc('admin.age')（不存在的属性）、myFunc('greeting', 'xxx')（greeting不是对象，不能传多参数）

内容的提问来源于stack exchange，提问作者Erik Kránicz