Angular自定义Iterable使用for...of报错问题咨询

你的理解有一点偏差——虽然TypeScript确实是ES6的超集，但当编译目标设定为ES5时，自定义Iterable的for...of遍历支持并不是默认开启的，这就是你遇到错误的核心原因。

为什么会出现这个错误？ #

ES5本身并没有原生的迭代器（Iterator）机制，也不支持for...of语法。TypeScript在编译到ES5时，默认只会对数组、字符串这类内置可迭代类型的for...of进行转译（转成普通的for循环）。但对于你自定义的Connection类（实现了[Symbol.iterator]），ES5环境既没有Symbol.iterator的原生支持，TypeScript默认也不会生成兼容ES5的迭代器适配代码，所以类型检查器会抛出“Type 'Connection' is not an array type or a string type.”的错误。

解决方法 #

这里有几个可行的方案，你可以根据项目需求选择：

1. 开启downlevelIteration编译选项
   这是最直接的解决方案。在你的tsconfig.json的compilerOptions中添加"downlevelIteration": true：

   {
     "compilerOptions": {
       "target": "ES5",
       "downlevelIteration": true,
       // 其他配置...
     }
   }
   

   这个选项会让TypeScript在编译到ES5时，生成兼容自定义Iterable的迭代器代码，从而支持for...of遍历。不过要注意，这会增加编译后代码的体积，因为需要引入额外的迭代器polyfill逻辑。

2. 将编译目标升级到ES6+
   如果你的项目不需要兼容过于老旧的浏览器，可以把tsconfig.json中的target改成ES2015（或更高版本）：

   {
     "compilerOptions": {
       "target": "ES2015",
       // 其他配置...
     }
   }
   

   ES2015及以上环境原生支持Iterable和for...of，此时TypeScript不需要额外转译，自定义Iterable的遍历就能正常工作。

3. 手动实现迭代逻辑（不推荐）
   如果你不想修改编译配置，可以手动调用自定义迭代器的next()方法来实现循环，比如：

   const connection = new Connection();
   const iterator = connection[Symbol.iterator]();
   let result;
   while (!(result = iterator.next()).done) {
     const item = result.value;
     // 处理item
   }
   

   这种方式比较繁琐，不如前两种方案优雅，除非有特殊限制否则不建议使用。

验证你的自定义Iterable实现 #

确保你的Connection类正确实现了Iterable接口，比如：

class Connection implements Iterable<any> {
  private items: any[] = [];

  // 实现Symbol.iterator方法
  [Symbol.iterator](): Iterator<any> {
    let index = 0;
    const items = this.items;
    return {
      next(): IteratorResult<any> {
        if (index < items.length) {
          return { value: items[index++], done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
}

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