TypeScript泛型场景下调用类静态函数的类型与运行时问题

问题本质分析 #

你遇到的问题是TypeScript类型推断与JavaScript运行时行为不匹配导致的：

• 运行时错误Uncaught TypeError: ctor.constructor.fromEntryList is not a function：因为ctor本身就是Bean（或其子类）的构造函数，它的constructor属性指向的是JavaScript内置的Function构造函数，而不是你的Bean类，自然找不到fromEntryList方法。
• 移除.constructor后TypeScript报错：因为你给ctor定义的类型new (p: number) => T只描述了构造函数的实例化能力，没有包含静态方法的类型信息，TypeScript不知道ctor拥有fromEntryList这个静态方法。

解决方案：给构造函数类型添加静态方法声明 #

我们需要先定义一个接口，明确包含fromEntryList静态方法的构造函数类型，然后用这个类型约束ctor参数，这样TypeScript就能正确识别静态方法，同时运行时也能直接调用：

修改后的完整代码 #

// 定义包含静态方法的构造函数接口
interface BeanConstructor<T extends Bean> {
  new (p: number): T;
  fromEntryList<T1>(ctor: new (p: number) => T1, numbers: Array<number>): Array<T1>;
}

// 待扩展的基类
class Bean {
  id: number;
  static fromEntryList<T1>(ctor: new (p: number) => T1, numbers: Array<number>): Array<T1> {
    let result: Array<T1> = [];
    for (let anumber of numbers) {
      result.push(new ctor(anumber));
    }
    return result;
  }
  constructor(p: number) {
    this.id = p;
  }
}

// 待扩展的基服务类
class BeanService {
  constructor() { }
  get_entry_list<T extends Bean>(ctor: BeanConstructor<T>): T[] {
    // 直接调用ctor的静态方法，无需.constructor
    let x: T[] = ctor.fromEntryList(ctor, [1, 2, 3, 4]);
    return x;
  }
}

let service = new BeanService();
let beans: Bean[] = service.get_entry_list(Bean);
console.log(beans); // 运行正常，输出[{id:1}, {id:2}, ...]

关键修改点说明 #

1. 新增BeanConstructor接口：这个接口同时描述了构造函数的实例化签名（new (p: number) => T）和静态方法fromEntryList，让TypeScript知道传入的ctor不仅能创建实例，还拥有该静态方法。
2. 修改get_entry_list的参数类型：把ctor的类型从new (p: number) => T改为BeanConstructor<T>，解决TypeScript的类型报错。
3. 移除.constructor调用：直接使用ctor.fromEntryList，因为ctor本身就是Bean类（或其子类）的构造函数，直接拥有静态方法，运行时不会再报错。

扩展说明（针对子类场景） #

如果后续你需要扩展Bean子类，这个方案也能完美支持：

class UserBean extends Bean {
  name: string;
  constructor(p: number) {
    super(p);
    this.name = `User${p}`;
  }
}

let userBeans: UserBean[] = service.get_entry_list(UserBean);
console.log(userBeans); // 输出[{id:1, name:"User1"}, ...]

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