TypeScript泛型继承类无法用于映射的问题咨询

初始代码及编译错误 #

我编写了如下TypeScript代码：

interface BaseComponentData {}

class ComponentBase<T extends BaseComponentData = BaseComponentData> {
    constructor(public id: string, protected _componentData: T, protected parent?: ComponentBase) { }
}

class ActionButtonComponent extends ComponentBase {}

const COMPONENT_MAP: { [key: string]: typeof ComponentBase } = {
    'actionButton': ActionButtonComponent
}

编译时出现如下错误：

Types of construct signatures are incompatible.
Type 'new (id: string, _componentData: BaseComponentData, parent?: ComponentBase) => ActionButtonComponent' is not assignable to type 'new (id: string, _componentData: T, parent?: ComponentBase) => ComponentBase<...>'.
Construct signature return types 'ActionButtonComponent' and 'ComponentBase' are incompatible.
The types of '_componentData' are incompatible between these types.
Type 'BaseComponentData' is not assignable to type 'T'.
'BaseComponentData' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'BaseComponentData'.

'actionButton': ActionButtonComponent

const COMPONENT_MAP: { [key: string]: typeof ComponentBase } = {
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The expected type comes from this index signature.

尝试添加泛型后的错误 #

当我尝试为映射添加泛型类型：

const COMPONENT_MAP: { [key: string]: typeof ComponentBase<BaseComponentData> } = {
    'actionButton': ActionButtonComponent
}

VS Code中无警告，但编译时出现如下错误：

tsTest.ts: 11: 59 - error TS1005: ';' expected.

11 const COMPONENT_MAP: { [key: string]: typeof ComponentBase } = {
~

tsTest.ts: 11: 79 - error TS1005: '(' expected.

11 const COMPONENT_MAP: { [key: string]: typeof ComponentBase } = {
~

我对此报错不甚理解，想请教是否存在合法方式，实现字符串到受类型限制的类的映射？

错误原因分析 #

1. 第一个错误核心：typeof ComponentBase代表泛型类的构造函数类型，要求能接受任意T extends BaseComponentData类型的_componentData并返回对应ComponentBase<T>。但ActionButtonComponent的构造函数仅能接受BaseComponentData类型参数，无法匹配泛型构造函数的要求。
2. 第二个错误是语法问题：typeof ComponentBase<BaseComponentData>写法不合法，typeof作用于泛型类时，不能直接在后面加泛型参数，需先定义具体的构造函数类型。

合法实现方式 #

可以通过定义非泛型构造函数类型约束映射中的类，确保它们符合ComponentBase的实例构造规则：

interface BaseComponentData {}

class ComponentBase<T extends BaseComponentData = BaseComponentData> {
    constructor(public id: string, protected _componentData: T, protected parent?: ComponentBase) { }
}

// 定义统一的构造函数类型：接受指定参数，返回ComponentBase实例
type ComponentConstructor = new (id: string, data: BaseComponentData, parent?: ComponentBase) => ComponentBase;

class ActionButtonComponent extends ComponentBase {}

const COMPONENT_MAP: { [key: string]: ComponentConstructor } = {
    'actionButton': ActionButtonComponent
};

如果需要支持不同子类型的ComponentData，可以用精确泛型映射保证类型安全：

// 扩展不同的ComponentData子类型
interface ActionButtonData extends BaseComponentData {
    label: string;
}

interface DialogComponentData extends BaseComponentData {
    title: string;
}

class ActionButtonComponent extends ComponentBase<ActionButtonData> {}
class DialogComponent extends ComponentBase<DialogComponentData> {}

// 定义精确的映射类型，让每个key对应专属组件类
type ComponentMap = {
    actionButton: typeof ActionButtonComponent;
    dialog: typeof DialogComponent;
};

// 自动推导类型，无需手动指定
const COMPONENT_MAP: ComponentMap = {
    actionButton: ActionButtonComponent,
    dialog: DialogComponent
};

这种方式既解决了构造函数类型不兼容问题，又能保证类型约束的严谨性。

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