TypeScript中通过字符串索引访问对象值报错，如何转换对象类型解决？

在JavaScript中，我们可以通过obj.field或obj['field']两种方式访问对象属性，但在TypeScript里，当用字符串类型的变量作为索引访问对象时，会触发类型错误。

错误示例代码 #

function F() {
  const obj = { field: "firstname", title: "First Name", value: 10 };
  let field = "field"
  console.log(obj[field]); // TypeScript错误：元素隐式拥有'any'类型，因为类型为'string'的表达式不能用于索引类型'{ field: string; title: string; value: number; }'
}

解决方法 #

方法1：约束索引变量的类型为对象的键类型

给变量field指定类型为keyof typeof obj，让TypeScript明确这个变量只能是obj的合法键：

function F() {
  const obj = { field: "firstname", title: "First Name", value: 10 };
  let field: keyof typeof obj = "field"
  console.log(obj[field]); // 正常编译
}

方法2：给对象定义带索引签名的类型

如果需要更灵活的索引访问，可以显式定义对象类型，添加匹配属性值类型的字符串索引签名：

type ObjType = {
  [key: string]: string | number;
  field: string;
  title: string;
  value: number;
};

function F() {
  const obj: ObjType = { field: "firstname", title: "First Name", value: 10 };
  let field = "field"
  console.log(obj[field]); // 正常编译
}

这里的[key: string]: string | number表示对象的任意字符串键对应的属性值只能是string或number，和对象实际属性的类型保持一致。

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

如果只是临时需要快速解决错误，可通过类型断言告知TypeScript该索引合法，但这种方式会丢失TypeScript的类型检查优势，不建议常规使用：

function F() {
  const obj = { field: "firstname", title: "First Name", value: 10 };
  let field = "field"
  console.log((obj as {[key: string]: any})[field]); // 正常编译
}

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