TypeScript中通过字符串键获取对象值报错ts(7053)如何解决？

问题描述 #

我定义了如下对象：

export const roles = {
  "key1": "value1",
  "key2": "value2",
  "key3": "value3"
};

尝试通过字符串变量按键取值：

let x = "key1"; 
let y = roles[x]

却触发了TypeScript错误：

元素隐式拥有 "any" 类型，因为类型为 "string" 的表达式不能用于索引类型 "{ key1: string; key2: string; key3: string; }"。未在类型 "{ key1: string; key2: string; key3: string; }" 上找到具有类型为 "string" 参数的索引签名。ts(7053)

解决方案 #

方法1：限定变量类型为对象的键类型 #

TypeScript会把let x = "key1"默认推断为string类型，但我们可以明确指定x的类型是keyof typeof roles，让TS知道x只能是roles的有效键：

let x: keyof typeof roles = "key1"; 
let y = roles[x]; // 类型安全，无报错

方法2：给对象添加字符串索引签名 #

如果需要支持任意字符串索引，可以给roles定义索引签名，声明所有字符串键对应的值都是string类型：

export const roles: { [key: string]: string } = {
  "key1": "value1",
  "key2": "value2",
  "key3": "value3"
};

let x = "key1"; 
let y = roles[x]; // 正常运行

注意：这种方式会丢失具体键的类型校验，使用不存在的键时TS不会提示错误。

方法3：类型断言临时绕过（不推荐） #

如果只是临时处理，可以用类型断言告诉TS变量x是roles的有效键，但这种方式不安全，容易出现拼写错误：

let x = "key1"; 
let y = roles[x as keyof typeof roles];

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