[next.JS/TS 에러] Type 'Set ' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher. 에러 해결

참고

https://stackoverflow.com/questions/73099543/type-setunknown-can-only-be-iterated-through-when-using-the-downleveliter

 

에러

javascript로 내가 현재 클릭한 요소 자신만 클래스 on 처리를 하기 위해

불가피하게 forEach 문 안에 for of 를 한 번 더 사용해서 객체 순회를 하려고 하니까 아래같은 에러가 났다.  

 

원인

이터러블 객체를 중첩하여 사용하거나 여러 번 순회하려고 할 때 이런 에러가 발생한다고 한다..!😟

따라서 이 경우, 컴파일러는 이러한 객체가 이터러블이라는 사실을 인식하고 순회할 수 있도록 처리해야 하는데, ECMAScript 2015(ES6) 이전의 타겟 버전으로 컴파일할 경우에는 기본적으로 이터레이션(iteration)을 지원하지 않기에 문제가 되는 거였다.

📌 이터러블(iterable) 객체란?
영어 뜻 그대로 반복(iterate) 가능한 객체를 말한다!
- 배열(Array), 문자열(String), 맵(Map), 셋(Set) 등의 순회 가능한 객체들은 '이터러블 객체'라 할 수 있다.
  따라서 이러한 객체를 for 문 등을 사용하여 순회할 수 있다.

 

일반적으로 Set과 같은 이터러블 객체를 forEach 나 for...of 루프와 같은 메서드로 한 번만 사용할 때는 대부분 문제가 발생하지 않는다.

현재 나의 tsconfig.json을 보면 target이 es5로 되어있다.

 

해결

es6이상으로 target을 지정하면 해결된다!

tsconfig.json 파일에서 위와 같이 설정해주고나면 아래처럼 에러가 사라진다.