TypeScript：如何为后续添加属性的对象定义类型？

针对你遇到的问题，这里提供几种无需冗余/重复代码的优雅解决方案，核心思路是利用TypeScript的类型推导与扩展能力，既保留原对象的键限制，又允许动态添加属性：

方案1：基于typeof推导+类型扩展（最优解） #

通过typeof推导初始layers的键和基础类型，再用类型交叉（&）扩展后续要添加的属性，全程无需重复声明top/bottom键：

// 定义初始图层配置，用as const锁定类型推导精度
const initialLayers = {
    top: { description: 'everything on top' },
    bottom: { description: 'everything below' },
} as const;

// 扩展基础图层类型，注入后续要添加的属性
type Layer = typeof initialLayers[keyof typeof initialLayers] & {
    element: HTMLElement;
    style: { background: string };
};

// 定义最终layers类型：仅允许初始键，且每个图层为完整Layer类型
let layers: Record<keyof typeof initialLayers, Layer> = initialLayers as Record<keyof typeof initialLayers, Layer>;

function addThingsToLayers() {
    Object.entries(layers).forEach(([_, layerObject]) => {
        layerObject.element = document.createElement('div');
        layerObject.style = { background: 'hotpink' };
    });
}

这个方案的优势：

• 完全复用初始对象的键定义，避免重复编写top/bottom
• 严格限制layers只能包含初始键，不会出现无效的额外键
• 类型安全，后续访问layer.element/layer.style时无类型报错

方案2：临时类型断言（快速修复） #

如果只是想快速消除报错，且不介意局部放宽类型检查，可以用类型断言临时扩展对象类型：

// 提前定义完整的图层类型
type Layer = {
    description: string;
    element: HTMLElement;
    style: { background: string };
};

let layers = {
    top: { description: 'everything on top' },
    bottom: { description: 'everything below' },
};

function addThingsToLayers() {
    Object.entries(layers).forEach(([_, layerObject]) => {
        // 断言当前图层为完整Layer类型
        const layer = layerObject as Layer;
        layer.element = document.createElement('div');
        layer.style = { background: 'hotpink' };
    });
}

适合快速调试场景，无需修改初始对象结构。

方案3：Partial类型延迟初始化 #

如果允许属性在初始阶段可选，可以用Partial标记可选属性，赋值完成后再转为完整类型：

type Layer = {
    description: string;
    element: HTMLElement;
    style: { background: string };
};

// 初始仅提供必填的description，其他属性设为可选
let layers: Record<'top' | 'bottom', Partial<Layer>> = {
    top: { description: 'everything on top' },
    bottom: { description: 'everything below' },
};

function addThingsToLayers() {
    Object.entries(layers).forEach(([_, layerObject]) => {
        layerObject.element = document.createElement('div');
        layerObject.style = { background: 'hotpink' };
    });

    // 赋值完成后断言为完整类型，后续访问更严格
    layers = layers as Record<'top' | 'bottom', Layer>;
}

若不想重复写'top' | 'bottom'，可结合typeof推导键类型：

const layerKeys = ['top', 'bottom'] as const;
type LayerKey = typeof layerKeys[number];
// 后续用Record<LayerKey, ...>替代Record<'top' | 'bottom', ...>

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