TypeScript报错：类型'string'无法用于索引对象，原因是什么？

为什么会触发TypeScript错误？ #

这个错误（TS7053）的核心是类型不匹配：

• TypeScript会自动推断characters对象的类型为仅包含特定键的对象（键为&、"、'、<、>），而非允许任意字符串索引的通用对象。
• text.replace的回调参数x被推断为string类型——TypeScript无法确认x一定是characters中存在的键，因此禁止用任意字符串去索引这个严格类型的对象。

另外，你的代码存在逻辑bug：正则表达式匹配的是单引号'，但characters里没有'这个键，对应的键是'，这会导致匹配到单引号时返回undefined，不仅类型报错，实际运行也会出问题。

解决方法 #

方法1：修正键名并添加索引签名 #

把characters的键改成正则实际匹配的字符，同时添加索引签名告诉TypeScript允许用字符串索引：

export function escapeHtml(text:string) {
    const characters: { [key: string]: string } = {
        '&': '&',
        '"': '"',
        "'": ''',
        '<': '&lt;',
        '>': '&gt;'
    };

    return text.replace(/[&<>"']/g, (x) => characters[x]);
}

方法2：用类型断言明确参数类型 #

如果想保留对象的严格类型，可以将回调参数x断言为characters的键类型：

export function escapeHtml(text:string) {
    const characters = {
        '&': '&',
        '"': '"',
        "'": ''',
        '<': '&lt;',
        '>': '&gt;'
    };

    return text.replace(/[&<>"']/g, (x) => characters[x as keyof typeof characters]);
}

方法3：添加类型守卫兜底 #

用类型守卫确保x是合法键，同时兜底返回原字符避免undefined：

export function escapeHtml(text:string) {
    const characters = {
        '&': '&',
        '"': '"',
        "'": ''',
        '<': '&lt;',
        '>': '&gt;'
    };

    function isValidKey(x: string): x is keyof typeof characters {
        return x in characters;
    }

    return text.replace(/[&<>"']/g, (x) => {
        return isValidKey(x) ? characters[x] : x;
    });
}

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