[TypeScript]-cannot redeclare block-scoped variable 에러

🌀 나타난 에러메시지

🌀 발생 원인

에러메시지에 나와있는 그대로 어떠한 'name'이 재선언 되었기 때문이다.

TypeScript는 import나 export가 파일 내에서 사용되지 않으면, 해당 파일을 module(모듈)이 아닌 script(스크립트)로 간주한다. script는 <script /> 태그를 통해 window와 document 전역범위에 로드된다. 때문에 동일한 이름의 변수를 선언하려고 하면 오류가 발생한다.

🌀 해결방법

1. 변수 이름 재설정하기

let num = 123;
Cannot redeclare block-scoped variable 'num'.
 
let num = 456;
Cannot redeclare block-scoped variable 'num'.

2. 스코프(범위) 변경하기

2-1. export를 사용하여 전역 환경과 분리

파일에는 가져오기 또는 내보내기가 없기 때문에 빈 export를 추가하면 오류가 사라진다.

const name = "Matt";
 
export {};

2-2. 변수 중 하나의 범위 변경

let id = 123;
 
{
  let id = 456;
 
  console.log(id); // 456
}
 
console.log(id); // 123

3. 컴파일러 옵션을 변경하기

3-1. DOM typing 제거

{
  "compilerOptions": {
    "lib": ["es6"]
  }
}

3-2. 모든 파일을 모듈로 처리

{
  "compilerOptions": {
    "moduleDetection": "force"
  }
}

필자는 2-1번 방법으로 export{}를 에러가 뜨는 코드 위에 사용하여 전역 환경과 스코프를 분리해줬다.

---

참고사이트