TypeScript中父类如何访问子类定义的属性？

问题结论 #

可以实现，需要根据你的使用场景调整属性定义方式即可，核心是利用JS类的this指向规则和属性初始化逻辑。

适配你当前的静态方法调用场景 #

你现在调用的是Product.getAll()静态方法，父类静态方法中的this默认指向调用它的类（也就是子类Product），只需要把子类的table改为静态属性即可：

修改后的父类代码

class Model{
    constructor() {
        // 实例场景的用法后面说明
    }  
    public static getAll(){
        // 此处this指向调用该方法的子类，可直接取子类静态属性
        return `操作表：${this.table}，返回所有数据`;
    }
}
export default Model;

修改后的子类代码

import Model from "../providers/Model";
class Product extends Model{
    // 改为静态属性，供给父类静态方法访问
    public static table = "products";
}
export default Product;

修改后调用Product.getAll()即可正常拿到子类定义的表名。

父类构造器/实例方法访问子类表名的场景 #

如果你需要在父类的构造器或者实例方法中访问表名，要注意：子类的普通实例属性默认在父类构造器执行完毕后才会初始化，直接在父类构造器读this.table会得到undefined，有两种通用解决方法：

• 方法1：子类构造器先赋值再调用super

class Product extends Model{
    constructor() {
        this.table = "products";
        // 赋值完成后再执行父类构造逻辑
        super();
    }
}

• 方法2：将table定义为getter

class Product extends Model{
    get table() {
        return "products";
    }
}

两种方法都可以让你在父类构造器和实例方法中直接通过this.table拿到值。

同时支持静态调用和实例使用的完整示例 #

如果需要同时适配两种场景，可以同时定义静态属性和实例getter做兼容：

// 父类
class Model{
    constructor() {
        console.log('构造器获取表名：', this.table)
    }
    // 实例方法
    getTableName() {
        return this.table
    }
    // 静态方法
    public static getAll(){
        return `操作表：${this.table}，查询所有数据`;
    }
}

// 子类
class Product extends Model{
    // 静态属性给静态方法调用
    public static table = "products";
    // getter给实例场景调用
    get table() {
        return Product.table;
    }
}

// 测试
console.log(Product.getAll()) // 输出：操作表：products，查询所有数据
const productIns = new Product()
console.log(productIns.getTableName()) // 输出：products

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