Nuxt.js+TypeScript遍历数据报TS7053数字索引错误求解

问题根源是myObject的类型声明错误：你在data中写myObject: Object，相当于告诉TypeScript这个属性的值是JavaScript原生的Object构造函数（对应TS类型为ObjectConstructor），而非你实际存储业务数据的数组。
TypeScript做静态类型检查时，会发现ObjectConstructor类型没有定义数字类型的索引签名，不支持[i]这种数组下标访问方式，因此抛出TS7053错误。
开发阶段逻辑能正常运行，是因为JavaScript运行时不做类型校验，实际运行时myObject是接口返回的数组，代码逻辑可以正常执行；但pm2启动时会走完整的TS编译校验，类型不匹配就会直接阻断编译抛出错误。

方案1：补全正确的类型声明（推荐，符合TS规范） #

1. 先定义数组元素的类型结构，明确每个字段的类型
2. 修正data中myObject的声明，明确标注为对应类型的数组，初始值设为空数组即可
   参考代码：

// 在script标签内先定义数组元素的接口
interface ReservationItem {
  _id: number;
  status: string;
  date: string;
  // 可根据实际业务补全其他用到的字段类型
}

export default Vue.extend({
  data() {
    return {
      // 明确声明为ReservationItem类型的数组，替换原来的Object声明
      myObject: [] as ReservationItem[]
    }
  },
  methods: {
    async tripdone() {
      try {
        const length = this.myObject.length;
        for (let i = 0; i < length; i++) {
          const status = this.myObject[i].status;
          const tripDate = this.myObject[i].date;
          const today = new Date();

          const year = today.getFullYear();
          const month = ("0" + (today.getMonth() + 1)).slice(-2);
          const day = ("0" + today.getDate()).slice(-2);
          const todayString = `${year}-${month}-${day}`;

          if (tripDate < todayString && status === "confirmed") {
            const id = this.myObject[i]._id;
            const payload = {
              status: "tripOver",
            };
            // 记得加await捕获请求异常，否则请求报错不会进入catch
            await this.$axios.put(`/api/myObject/${id}`, payload);
            const message = id;
            const type = "success";
            this.$message({ message, type });
          }
        }
      } catch (e) {
        const message = "error";
        const type = "error";
        this.$message({ message, type });
      }
    }
  }
})

方案2：临时类型断言（快速消错，不推荐长期使用） #

如果赶进度暂时不想补全类型，可以在访问时通过类型断言告诉TS把myObject当作数组处理，绕开类型检查：

async tripdone() {
  try {
    // 临时断言为any类型数组
    const list = this.myObject as any[];
    const length = list.length;
    for (let i = 0; i < length; i++) {
      const status = list[i].status;
      const tripDate = list[i].date;
      // 后续逻辑保持不变，把原来的this.myObject[i]替换为list[i]即可
    }
  } catch (e) {
    // 错误处理逻辑
  }
}

这种方式会丢失TS的类型校验能力，后续字段写错不会有提示，仅适合临时调试使用。

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