如何优雅优化updateWidget()以消除TypeScript类型索引警告？

问题背景 #

当前updateWidget函数的else分支中，使用string|number类型的key直接索引Widget对象时触发TypeScript类型警告，错误提示如下：

Element implicitly has an 'any' type because expression of type 'string | number' can't be used to index type 'Widget'.
No index signature with a parameter of type 'string' was found on type 'Widget'.(7053)

原代码：

type Widget = {
    name: string;
    quantity: number;
    properties: Record<string, any>
}

const widget: Widget = {
    name: "value",
    quantity: 1,
    properties: {name: "property1", name: "property2"}
}

function updateWidget(key: string|number, value: string|number, property:boolean) {
    if(property) {
        widget.properties[key] = value;
    } else {
        widget[key] = value;
    }
    return widget;
}

解决方案 #

方案1：类型守卫+属性键约束

通过将key的类型约束为Widget的已知属性键，配合类型守卫确保else分支的key合法，同时保持类型安全：

type Widget = {
    name: string;
    quantity: number;
    properties: Record<string, any>
}

const widget: Widget = {
    name: "value",
    quantity: 1,
    properties: {name: "property1", name: "property2"}
}

type WidgetRootKey = keyof Widget;

function updateWidget(
    key: WidgetRootKey | string | number, 
    value: string | number, 
    property: boolean
) {
    if (property) {
        widget.properties[key as string] = value;
    } else {
        // 类型守卫验证key为Widget根属性
        if (typeof key === 'string' && (key === 'name' || key === 'quantity')) {
            widget[key] = value as Widget[WidgetRootKey];
        } else {
            throw new Error('Key is invalid for widget root properties');
        }
    }
    return widget;
}

方案2：拆分函数（推荐）

将更新逻辑拆分为两个独立函数，彻底避免用boolean参数分支判断，让类型逻辑更清晰：

type Widget = {
    name: string;
    quantity: number;
    properties: Record<string, any>
}

const widget: Widget = {
    name: "value",
    quantity: 1,
    properties: {name: "property1", name: "property2"}
}

// 更新Widget根属性，严格约束键和值的类型
function updateWidgetRoot<K extends keyof Widget>(key: K, value: Widget[K]) {
    widget[key] = value;
    return widget;
}

// 更新properties属性
function updateWidgetProperties(key: string | number, value: string | number) {
    widget.properties[key] = value;
    return widget;
}

// 可选保留原函数作为统一入口
function updateWidget(key: keyof Widget | string | number, value: string | number, property: boolean) {
    return property 
        ? updateWidgetProperties(key, value) 
        : updateWidgetRoot(key as keyof Widget, value as Widget[keyof Widget]);
}

方案3：添加索引签名（谨慎使用）

如果需要允许任意字符串索引Widget对象，可以添加索引签名，但会丢失部分类型校验能力：

type Widget = {
    name: string;
    quantity: number;
    properties: Record<string, any>;
    // 添加字符串索引签名
    [key: string]: any;
}

const widget: Widget = {
    name: "value",
    quantity: 1,
    properties: {name: "property1", name: "property2"}
}

function updateWidget(key: string|number, value: string|number, property:boolean) {
    if(property) {
        widget.properties[key] = value;
    } else {
        widget[key as string] = value;
    }
    return widget;
}

方案推荐 #

方案2的拆分函数方式最优雅，既保证了类型安全性，又让代码职责更明确，避免了分支判断带来的类型模糊问题。

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