TypeScript泛型使用类类型时如何让TS识别类上的静态方法

问题原因 #

TypeScript 中类的静态成员属于构造函数本身，不属于类的实例类型。你原本的泛型约束 A extends Animal 仅能约束类实例的结构，new () => A 也仅描述了构造函数的实例化签名，没有覆盖构造函数上的静态方法，因此 TS 无法识别到你定义的静态方法。

另外你当前代码存在静态方法命名不统一的问题：父类 Animal 中定义的静态方法名为 beforeInit，但子类实现和 createInstance 中调用的方法名为 beforeInstantiate，需要先统一命名。

解决方案 #

自定义同时包含构造签名和静态方法约束的构造函数类型，替换原有参数类型即可，完整修改代码如下：

class BeeKeeper {
    hasMask: boolean = true;
}

class ZooKeeper {
    nametag: string = "Mikle";
}

class Animal {
    // 统一静态方法名
    static beforeInstantiate() {
        console.log('do something here');
    };

    numLegs: number = 4;
}

class Bee extends Animal {
    static override beforeInstantiate() {
        console.log('do some bee stuff here');
    };
    keeper: BeeKeeper = new BeeKeeper();
}

class Lion extends Animal {
    static override beforeInstantiate() {
        console.log('do some lion stuff here');
    };
    keeper: ZooKeeper = new ZooKeeper();
}

// 自定义包含静态方法的构造函数类型
type AnimalConstructor<A extends Animal> = {
    new (): A;
    beforeInstantiate(): void;
}

function createInstance<A extends Animal>(c: AnimalConstructor<A>): A {
    c.beforeInstantiate(); // 不再报错
    return new c();
}

createInstance(Lion).keeper.nametag;
createInstance(Bee).keeper.hasMask;

如果不需要复用构造函数类型，也可以直接把约束写在参数声明里：

function createInstance<A extends Animal>(c: { new(): A, beforeInstantiate(): void }): A {
    c.beforeInstantiate();
    return new c();
}

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