Angular服务中getAll方法访问data对象时报TypeScript索引错误

• TypeScript 会自动为你声明的data对象推导固定结构类型，该对象仅支持drivers、vehicles、fueling三个合法属性键
• 你的getAll方法中dataType参数被标注为宽泛的string类型，TS 无法确认传入的字符串一定属于data的合法键，在开启严格类型校验的项目中就会抛出该索引类型不匹配的错误
• 教程中相同代码不报错，通常是两个原因：要么讲师的 TS 配置关闭了noImplicitAny等严格校验规则，要么使用的 TS 版本较低，对对象索引的类型校验更宽松。

方案1：收窄参数类型（推荐，类型安全） #

将dataType的参数类型从通用string收窄为data支持的合法键联合类型，既解决报错，还能获得代码提示、传参校验能力，修改后完整代码如下：

@Injectable({
  providedIn: 'root'
})
export class BaseService {
  data = {
    drivers: [ 
      {
        id: 1,
        name: 'John Doe',
        email: 'john.doe@gmail.com',
        phone: '+3233 3213 321',
        city: 'Berlin',
        address: 'ALuft stasse gasdddress'
      }
    ],
    vehicles: [
      {
        id : 1,
        lp: "GOD-258",
        year:2015,
        manifacturer: "VW",
        cosumption: 7,
        engine: "diesel"
      }
    ],
    fueling: [
      {
        id : 1,
        vehicle:1,
        driver:1,
        amount:40,
        date:"2019-04-02"
      }
    ],
  }

  constructor() { }
  getAll(dataType: 'drivers' | 'vehicles' | 'fueling'): any[]{
    return this.data[dataType];
  }
}

方案2：添加索引签名（快速修复，无类型校验） #

如果不需要严格的传参校验，可以直接给data添加字符串索引签名，告诉TS任意字符串键都对应数组类型，修改仅需调整data的类型标注：

// 为data添加索引签名，其余原有代码保持不变
data: Record<string, any[]> = {
  // 原有drivers、vehicles、fueling数据不变
}

该方案改造成本最低，但传入错误的dataType值时TS不会给出编译提示，容易引发运行时错误。

注意：你代码中表示厂商的字段manifacturer存在拼写错误，正确拼写为manufacturer，当前不影响运行，但后续业务逻辑复杂后容易引发字段匹配错误。

内容的提问来源于stack exchange，提问作者András Czeitner