TypeScript：动态计算对象属性未类型化问题及解决方法

原因 #

TypeScript对对象字面量的计算属性键的类型推断逻辑存在差异：

• 当键是**字符串字面量（如'3'）**时，TypeScript能直接匹配Mutations的字符串索引签名[key: string]: Mutation，因此会自动为函数参数state和data推断出State和unknown类型。
• 当键是**动态表达式（如''+3）**时，TypeScript默认会将键的类型推断为宽泛的string，而非具体的字面量'3'。此时TypeScript无法精确关联该计算属性与Mutations的索引签名，因此不会自动推断函数参数类型，参数会默认为any类型。

修复方案 #

有三种常见的修复方式：

1. 显式标注函数参数类型 #

直接为动态键对应的函数参数指定类型：

private buildMutations(): Mutations {
    return {
        ['3']: (state, data) => {},
        [''+3]: (state: State, data: unknown) => {},
    }
}

2. 对计算属性表达式做类型断言 #

告诉TypeScript表达式的结果是具体的字符串字面量：

private buildMutations(): Mutations {
    return {
        ['3']: (state, data) => {},
        [('' + 3) as '3']: (state, data) => {},
    }
}

3. 提前定义带类型标注的键变量 #

先将动态计算的键赋值给一个标注了字面量类型的变量，再用该变量作为计算属性键：

private buildMutations(): Mutations {
    const key = '' + 3 as '3';
    return {
        ['3']: (state, data) => {},
        [key]: (state, data) => {},
    }
}

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