TypeScript遍历JSON数组遇类型报错：类型'any'无索引签名，如何解决？

首先明确一点：你遇到的报错完全是TypeScript的类型系统特性导致的——和JavaScript的动态类型不同，TypeScript在编译阶段就会严格校验变量的类型和可访问的属性，而你的totalMap没有被赋予明确的、包含索引签名和title属性的类型定义，所以编译器无法确认totalMap[i].title是合法的访问。

为什么会报错？ #

你通过(<any>map).allAreas初始化totalMap时，虽然用<any>绕过了map的类型检查，但TypeScript仍然无法推断出allAreas的具体结构，最终把totalMap的类型推断为JSON（或者模糊的any衍生类型）。而JSON类型本身没有定义索引签名（也就是编译器不知道你可以用[i]去访问它的元素），更不知道元素里有title属性，所以会抛出"Element implicitly has an 'any' type because type 'JSON' has no index signature"的错误。

解决方案：给totalMap定义明确的类型接口（推荐） #

这是最符合TypeScript设计理念的做法，既能消除报错，又能获得类型安全的好处。根据你给出的JSON结构，我们可以定义对应的接口：

1. 定义区域详情的接口 #

// 描述单个区域的属性结构
interface AreaDetails {
  title: string;
  description: string;
  hazard: string;
  start: boolean;
  north: string;
  south: string;
  east: string;
  west: string;
}

// 描述allAreas数组中每个元素的结构：键是区域名称，值是AreaDetails
interface AreaItem {
  [areaName: string]: AreaDetails;
}

2. 给totalMap指定类型 #

// 现在totalMap的类型是AreaItem数组，编译器能明确知道它的结构
let totalMap: AreaItem[] = (<any>map).allAreas;

3. 正确遍历获取title #

因为allAreas数组的每个元素是一个以区域名为键的对象，所以遍历的时候需要先拿到对象的键，再获取对应的title：

for (let i = 0; i < totalMap.length; i++) {
  const currentAreaObj = totalMap[i];
  // 遍历当前元素的所有区域键
  for (const areaKey in currentAreaObj) {
    const areaTitle = currentAreaObj[areaKey].title;
    console.log(areaTitle); // 比如这里会输出"River"
  }
}

临时绕过方案（不推荐长期使用） #

如果你只是想快速验证代码，不想定义接口，可以用类型断言强制告诉编译器totalMap[i]的类型：

// 直接断言为any，绕过类型检查
let name: string = (totalMap[i] as any)[Object.keys(totalMap[i])[0]].title;

不过这种方式会失去TypeScript的类型安全优势，不推荐在正式代码中大量使用。

补充：如果你的JSON结构表述有歧义 #

如果allAreas数组的每个元素直接是AreaDetails对象（而不是嵌套一层区域名的对象），那接口可以更简单：

interface AreaDetails {
  title: string;
  description: string;
  hazard: string;
  start: boolean;
  north: string;
  south: string;
  east: string;
  west: string;
}

let totalMap: AreaDetails[] = (<any>map).allAreas;

// 直接遍历即可
for (let i = 0; i < totalMap.length; i++) {
  const title: string = totalMap[i].title;
}

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