如何为自定义DOM的create方法实现TypeScript类型提示？

我正在为项目实现一个类似createElement的自定义DOM创建方法（支持自定义节点），这个create方法接收nodeName参数并返回对应的Node实例。现有代码能正常运行，但存在两个问题：

• 调用create时无法获得可用节点名的便捷提示
• 返回类型始终只是Node，而非具体的节点类型

现有示例代码：

import { Node } from "./tree";

export class DOM
{
    private defs: Record<string, new () => Node>;

    constructor(nodeDefs: Record<string, new () => Node>)
    {
        for (const [nodeName, NodePrototype] of Object.entries(nodeDefs))
            this.defs[nodeName] = NodePrototype;
    }

    create(nodeName: keyof typeof this.defs)
    {
        const newNode = new this.defs[nodeName]();
        newNode.name = nodeName;

        return newNode;
    }
}

期望效果：

const dom = new DOM({
    paragraph: Paragraph,
    text: Text
});

const myP = dom.create('paragraph'); // 此处需显示正确的类型提示！

解决方案 #

要实现正确的类型提示，核心是通过泛型约束让TypeScript追踪传入的节点定义的具体类型信息，具体修改如下：

1. 给DOM类添加泛型参数 #

将DOM定义为泛型类，泛型T约束为节点名到对应构造函数的映射，确保TypeScript能记住每个节点名对应的具体构造函数类型。

2. 修正成员与构造函数的类型定义 #

把defs的类型改为泛型T，构造函数参数也同步为T，避免类型模糊导致的信息丢失。

3. 让create方法返回具体节点类型 #

利用InstanceType工具类型从构造函数中提取实例类型，同时将nodeName参数的类型限定为keyof T，这样IDE就能自动提示可用的节点名，并推断出正确的返回类型。

修改后的完整代码：

import { Node } from "./tree";

// 泛型T约束为节点名到Node构造函数的映射
export class DOM<T extends Record<string, new () => Node>> {
    private defs: T;

    constructor(nodeDefs: T) {
        this.defs = nodeDefs; // 直接赋值，原遍历逻辑冗余且会丢失类型信息
    }

    // K为节点名的联合类型，返回对应构造函数的实例类型
    create<K extends keyof T>(nodeName: K): InstanceType<T[K]> {
        const newNode = new this.defs[nodeName]();
        newNode.name = nodeName as string; // 类型断言，确保nodeName符合name属性的类型要求
        return newNode as InstanceType<T[K]>;
    }
}

效果验证 #

使用修改后的代码，就能实现预期的类型提示效果：

// 假设Paragraph和Text均继承自Node类
const dom = new DOM({
    paragraph: Paragraph,
    text: Text
});

const myP = dom.create('paragraph'); // 自动推断类型为Paragraph，输入节点名时有智能提示
const myText = dom.create('text'); // 自动推断类型为Text

关键细节说明 #

• 泛型T保留了传入节点定义的具体类型，而非模糊的Record<string, new () => Node>，这是实现精准类型提示的核心
• InstanceType<T[K]>工具类型可以从构造函数类型中提取出对应的实例类型，让返回值类型更具体
• 移除了原构造函数中的遍历赋值，因为直接赋值this.defs = nodeDefs既简洁又不会丢失类型信息

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