오류가 발생했다!!
TS2802: Type 'Set ' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.
TypeScript에서 Set은 이터러블(iterable)하지만, ECMAScript 2015(ES6) 이전의 타겟 버전으로 컴파일할 경우에는 기본적으로 이터레이션(iteration)을 지원하지 않습니다. 즉, for...of 루프나 Array.from과 같은 배열 변환 메서드를 사용하여 Set을 반복할 때 컴파일러가 경고를 발생시키는 것입니다....😟
ECMAScript 2015(ES6) 이전의 타겟 버전으로 컴파일할 경우가 뭐지?🤔
TypeScript는 ECMAScript를 기반으로 하는 정적 타입 언어로, JavaScript의 확장된 버전입니다. TypeScript 컴파일러는 TypeScript 코드를 ECMAScript로 변환하여 JavaScript로 실행 가능한 형태로 만듭니다. 이 때, 컴파일러에게 ECMAScript의 어떤 버전을 대상으로 변환할지를 명시해야 합니다.
--target 옵션은 TypeScript 컴파일러에게 대상 ECMAScript 버전을 지정하는 옵션입니다. 예를 들어, --target es5는 ECMAScript 5로 대상 버전을 설정하라는 의미이고, --target es2015는 ECMAScript 2015로 대상 버전을 설정하라는 의미입니다.
따라서, "ECMAScript 2015(ES6) 이전의 타겟 버전으로 컴파일할 경우"라는 문장은 TypeScript 코드를 ECMAScript 2015 이전의 버전으로 변환하려고 한다는 의미입니다. 이 경우, ECMAScript 2015에서 도입된 새로운 기능과 문법을 사용할 수 없고, 예전 버전의 JavaScript 호환성을 유지해야 합니다. 이러한 호환성 제약으로 인해, Set과 같은 ECMAScript 2015에서 추가된 타입이나 기능을 사용할 때 경고 메시지가 발생할 수 있습니다.
그러면 es6이상으로 target을 지정하면 된다!
현재 나의 tsconfig.json을 보면 target이 es5이다.
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"contentlayer/generated": ["./.contentlayer/generated"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx",".contentlayer/generated"],
"exclude": ["node_modules"]
}
📌 해결방법 1 : target 버전 올려주기
"target": "esnext"는 ECMAScript의 최신 버전을 대상으로 설정하는 것을 의미합니다. 즉, TypeScript 코드를 ECMAScript의 최신 기능과 문법을 활용한 형태로 변환하도록 지시합니다. ECMAScript의 최신 버전은 ES2021, ES2022, ES2023 등과 같이 연도별로 새로운 기능과 업데이트가 포함되는 버전입니다.
"target": "esnext"로 설정하면 TypeScript 컴파일러는 가능한 한 최신 버전의 JavaScript 코드를 생성하며, 컴파일된 결과는 이후의 JavaScript 엔진에서 실행될 때 최신 기능을 활용할 수 있게 됩니다. 하지만 이는 일부 환경에서는 호환성 문제를 일으킬 수도 있으므로 주의가 필요합니다.
📌 해결방법 2 : downlevelIteration 사용하기
tsc --downlevelIteration yourfile.ts는 TypeScript 컴파일러에게 --downlevelIteration 플래그를 사용하여 컴파일 옵션을 설정하라는 명령입니다.
--downlevelIteration 옵션은 ECMAScript 2015(ES6) 이전의 타겟 버전으로 컴파일할 때 Set과 같은 이터러블 타입을 지원하기 위한 옵션입니다. 이 옵션을 사용하면 ECMAScript 5로 대상 버전을 설정한 경우에도 Set을 이터레이션할 수 있도록 합니다.
즉, tsc --downlevelIteration yourfile.ts 명령을 실행하면 TypeScript 컴파일러가 yourfile.ts라는 TypeScript 파일을 컴파일하면서 --downlevelIteration 옵션을 적용하여, ECMAScript 5로 대상 버전을 설정한 경우에도 Set과 같은 이터러블 타입을 안전하게 반복할 수 있도록 합니다.
