TypeScript泛型封装表格行类无法补全子类属性问题排查

问题原因 #

你定义FixedTable泛型时，仅约束了传入的参数是Base的子类构造函数，但没有显式声明rows getter的返回值是传入子类的实例类型，TypeScript默认推导返回值为基类Base，因此只能补全基类的属性。

修复方案 #

两种修改方式都可以实现预期的代码补全效果：

方案1：最小改动，仅补充返回类型声明

仅需要给rows getter显式指定返回类型为InstanceType<T>即可：

class Base {
    protected myRoot : string
    constructor (root : string) {
        this.myRoot = root;
    }
    get base () {
        return "base getter"
    }
}
class FixedRows1 extends Base {
    get id1 () {
        return "id1"
    }
}
class FixedRows2 extends Base {
    get id2 () {
        return "id2"
    }
}
class FixedTable <T extends typeof Base> extends Base {
    private fixedRows : T
    constructor (inRoot : string, inFinalLayer : T) {
        super(inRoot)
        this.fixedRows = inFinalLayer
    }
    // 仅修改这一行，指定返回值为T构造函数对应的实例类型
    get rows () : InstanceType<T> {
        return new this.fixedRows(this.myRoot) as InstanceType<T>
    }
}

const layer = new FixedTable("root", FixedRows1);
layer.rows.id1 // 现在可以正常补全id1、base两个属性

方案2：调整泛型定义，可读性更高

直接把泛型约束为行实例类型，逻辑更直观：

class Base {
    protected myRoot : string
    constructor (root : string) {
        this.myRoot = root;
    }
    get base () {
        return "base getter"
    }
}
class FixedRows1 extends Base {
    get id1 () {
        return "id1"
    }
}
class FixedRows2 extends Base {
    get id2 () {
        return "id2"
    }
}
// 泛型T直接代表行实例的类型，约束为继承Base
class FixedTable <T extends Base> extends Base {
    private fixedRows: new (root: string) => T
    constructor (inRoot : string, inFinalLayer: new (root: string) => T) {
        super(inRoot)
        this.fixedRows = inFinalLayer
    }
    get rows () : T {
        return new this.fixedRows(this.myRoot)
    }
}

const layer = new FixedTable("root", FixedRows1);
layer.rows.id1 // 可正常补全

内容的提问来源于stack exchange，提问作者A. L