基于类型定义创建对象：TS动态实例化Konva.Layer问题求助

你的需求完全可行，原代码的核心问题是：TypeScript的类型在编译阶段会被擦除，运行时无法通过Object.keys({} as Layers)获取LayerName定义的键名——{} as Layers在运行时只是个空对象，导致循环根本不会执行。

解决思路是把图层名称同时保留为运行时的数组和编译时的类型，这样后续新增图层只需要修改数组，类型和实例化逻辑会自动同步。

修改后的完整代码 #

// 运行时数组：后续新增图层名称直接添加到这里
const layerNames = ["overlays", "vehicles", "visual"] as const;
// 从数组自动推导联合类型，无需手动维护LayerName
type LayerName = typeof layerNames[number];
// 保持Layers类型定义不变
type Layers = { [key in LayerName]: Konva.Layer };

function instantiateLayers(): Layers {
    if (!stage) throw new Error("Stage was not instantiated before the layers");
    
    // 直接断言为Layers类型，因为我们会遍历所有键并赋值
    const layers = {} as Layers;

    for (const layerName of layerNames) { 
        const layer = new Konva.Layer({ x: 0, y: 0 });
        layers[layerName] = layer;
        stage.add(layer);      
    }

    return layers;
}

关键改动说明 #

• 运行时数组驱动类型：用const layerNames定义运行时可用的图层名称数组，通过typeof layerNames[number]自动推导LayerName联合类型，避免了类型和运行时数据的重复维护。
• 循环遍历真实数组：直接遍历layerNames数组，确保每个图层名称都会被实例化，不会因为类型擦除导致循环失效。
• 简化类型断言：初始对象直接断言为Layers，因为我们明确会覆盖所有键，不会出现缺失属性的情况，比使用Partial<Layers>更简洁可靠。

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