如何优雅扩展抽象类AbstractPanelComponent中config对象的类型？

现有抽象类AbstractPanelComponent包含存储配置的config对象，希望在继承该类时能扩展config的类型，添加自定义配置项。当前通过override重写config属性实现需求，但写法不够优雅，想了解更优方案（曾考虑泛型但不知如何应用）。

原代码示例：

// 默认配置类型
export type DefaultPanelConfig = {
    name: string
}

// 用于扩展的自定义配置类型
export type CustomConfig = {
    additionalConfig: string;
}

@Component({template: ''})
export abstract class AbstractPanelComponent {
    config: Partial<DefaultPanelConfig> = {};
}

@Component(...)
export class APanelComponent extends AbstractPanelComponent {
    // 当前实现方式：重写config属性扩展类型
    override config: Partial<CustomConfig & DefaultPanelConfig> = {}
}

可以给抽象类添加泛型参数，让子类继承时指定自定义配置类型，这样无需手动重写config属性，类型会自动合并，写法更简洁优雅。

实现代码如下：

// 默认配置类型
export type DefaultPanelConfig = {
    name: string
}

// 用于扩展的自定义配置类型
export type CustomConfig = {
    additionalConfig: string;
}

// 给抽象类添加泛型参数，默认值为DefaultPanelConfig
@Component({template: ''})
export abstract class AbstractPanelComponent<T extends DefaultPanelConfig = DefaultPanelConfig> {
    // 合并默认配置与泛型传入的自定义配置，再转为Partial
    config: Partial<DefaultPanelConfig & T> = {};
}

// 子类继承时指定自定义配置类型，无需重写config
@Component(...)
export class APanelComponent extends AbstractPanelComponent<CustomConfig> {
    constructor() {
        super();
        this.config.name = "Panel A";
        this.config.additionalConfig = "Custom Info"; // TypeScript自动校验属性合法性
    }
}

方案优势 #

• 无需手动编写override和重复合并类型，代码更简洁
• 泛型参数设置了默认值，不扩展配置的子类可直接继承，无需额外指定类型
• 类型自动合并，TypeScript能自动校验config的所有属性，避免手动合并出错

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