TypeScript类如何动态设置函数预期类型实现链式路径类型推导

完整实现代码 #

interface Foo {
  x: {
    x1: string;
    x2: {
       x3: number; 
    }
  };
}

class SomeHelperClass<T> {
  // 存储已拼接的属性路径
  private path: string;

  constructor(initialPath = '') {
    this.path = initialPath;
  }

  public ref<K extends keyof T>(key: K): SomeHelperClass<T[K]> {
    const newPath = this.path ? `${this.path}/${String(key)}` : String(key);
    return new SomeHelperClass<T[K]>(newPath);
  }

  public getAsPath(): string {
    return this.path;
  }
}

// 初始化使用
class Test extends SomeHelperClass<Foo> {}
const t = new Test();

// 测试调用
const targetPath = t.ref('x').ref('x2').ref('x3').getAsPath();
console.log(targetPath); // 输出：x/x2/x3

实现说明 #

• 泛型约束：ref方法通过泛型K extends keyof T限制入参只能是当前类型的合法属性，IDE会自动弹出可选属性的补全提示，非法入参直接抛出类型错误
• 链式类型推导：ref返回值的泛型自动替换为当前选中属性的类型T[K]，后续链式调用的ref会基于新类型做校验，符合需求：上一步选中x2时下一步会提示x3，如果上一步选中x1（string基础类型），则没有合法的ref入参，调用会报错
• 路径拼接：每次调用ref都返回全新的类实例，内部存储最新的拼接路径，多个链式调用互不干扰

注意：示例中写的ref('x1 | x2')是错误写法，实际调用时不需要手动加|，输入引号后IDE会自动提示x1、x2两个可选值，直接选择即可。

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