TypeScript中如何通过变量索引获取JSON对象的值并解决类型报错

错误原因 #

该报错是TypeScript的类型校验触发的：默认情况下TS会把变量b推导为string通用类型，而你定义的对象a被TS推导为仅包含name、addr两个固定属性的类型，没有声明支持任意字符串索引，因此用通用字符串类型的变量去索引对象就会触发报错。

解决方案 #

针对你读取i18n可扩展JSON的场景，推荐以下几种适配方案：

• 方案1：给对象显式声明索引签名（最适配i18n场景）
  你可以提前定义允许任意字符串key的类型，直接给i18n对象标注即可：

// 定义可扩展的i18n JSON类型
type I18nType = {
  [key: string]: string
}

let a: I18nType = {
    name: "dd",
    addr: "ee",
}

let b = "name";
console.log(a[b]); // 无报错

如果是直接导入JSON文件，还可以配合tsconfig配置简化操作：
先在tsconfig.json中开启JSON模块解析：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

导入时直接标注类型即可：

const zhI18n: Record<string, string> = require('./locales/zh.json')

• 方案2：限定索引变量的类型为对象的合法key集合
  如果你的对象key范围是固定的，不想开任意索引，可以把变量的类型限定为对象的key联合类型：

let a = {
    name: "dd",
    addr: "ee",
}

// 把b的类型限定为a的所有key的集合："name" | "addr"
let b: keyof typeof a = "name";
console.log(a[b]); // 无报错

• 方案3：临时类型断言（适合临时兼容场景）
  如果只是单次使用确认索引合法，可以直接加断言绕过校验：

let a = {
    name: "dd",
    addr: "ee",
}

let b = "name";
// 两种断言写法都可生效
console.log(a[b as keyof typeof a]);
console.log((a as Record<string, string>)[b]);

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