[Typescript] --downlevelIteration

오류

TypeScript 빌드 시 --downlevelIteration을 사용하라는 오류가 발생할 때가 있습니다.

Type 'Set<any>' is not an array type or a string type. Use compiler option '--downlevelIteration' to allow iterating of iterators.

이 오류는 ES6를 지원하지 않는 환경에서 ES6 열거형(Iterable) 객체를 열거하려고 할 때 발생합니다. 예를들어 Set<T> 혹은 Map<T> 객체는 ES6에서 추가된 객체인데 tsconfig.json에 target을 ES5로 설정한 상태에서 Set<T>을 열거하려고 하면 이러한 오류가 발생합니다.

해결방법

두가지 오류해결 방법이 존재합니다.

1. 첫번째 방법은 간단히 --downlevelIteration을 사용하여 TypeScript를 빌드하는 방법이 있습니다. 이 옵션을 사용하면 빌드된 파일의 크기가 다소 커지는 단점이 있지만 코드 변경 없이 문제를 해결할 수 있습니다.

   //tsconfig.json
   {
     "compilerOptions": {
       "target": "es5",
       "downlevelIteration": true
     }
   }
   

2. 두번째 방법은 오류가 발생한 ES6 객체를 삭제하고 ES5 코드로 바꾸는 것입니다. 예를들어 Set<T> 대신에 배열을 사용하고 직접 중복을 제거하는 코드를 추가하면 됩니다. Map의 경우 Key, Value 쌍을 가지는 Object로 바꾸고 열거하는 코드로 바꿀 수 있습니다. ES6의 for of 코드는 ES5의 for문으로 바꾸면 됩니다.

   //ES6 문법
   const list = new Set([1, 2, 3, 4]);
   list.add(2);
   for (const v of list)
       console.log(v);
   
   //ES5 문법
   function arrayDistinct(list: any[]):any[] {
       const result = [];
       for (var i = 0; i < list.length; i++) {
           var value = list[i];
           if (result.indexOf(value) == -1)
               result.push(value);
       }
       return result;
   }
   
   let list = [1, 2, 3, 4];
   list.push(2);
   list = arrayDistinct(list);
   for (var i = 0; i < list.length; i++)
       console.log(list[i]);