Cannot redeclare block-scoped variable (typescript)

타입스크립트를 사용할 때는 다른 파일이라고 하더라도 블록 레벨 스코프 변수(let, const로 선언한 변수)를 재선언할 경우 아래와 같은 에러가 발생한다.

왜일까 찾아봤더니 아래와 같은 글을 발견했다.

타입스크립트는 파일에 import문이나 export문이 없을 경우 이를 모듈로 보지 않고, 스크립트로 본다.

따라서 컴파일시 하나의 스크립트 태그 안에 합쳐지는데 이러면 두 변수가 같은 블록 스코프에 존재하는 것이 되므로 이러한 에러가 발생하는 것이다.

해결 방법은 아래와 같은 방법이 있다.

1. 변수명 변경
   단순히 변수명이 겹치지 않게 바꾸는 방법이다.
2. 파일에 export문 추가해주기
   export문이 있을 경우 타입스크립트는 해당 파일을 모듈로 보기 때문에 컴파일시 하나의 스크립트로 합쳐지지 않고 서로 분리된 스코프를 이용하게 된다.
3. commonJS 방식 대신 ESmodule 방식 사용하기
   위와 동일한 이유로 require 대신 import를 사용해서 모듈을 불러오면 된다. 이 방식을 사용할 때는 tsconfig.json파일 아래와 같이 수정해주자.

   {compilerOptions:{"module": "NodeNext"}}

   이렇게 해주면 require과 import둘 다 사용할 수 있게 된다.
4. 다른 스코프에 선언해주기
   파일의 시작과 끝을 중괄호({})로 감싸준다.
   이로써 컴파일시 하나의 여러 파일이 하나의 스크립트로 합쳐지긴 하지만 해당 파일의 내용은 중괄호로 인해 새로운 코드 블록을 가지게 된다. 따라서 서로 다른 블록 레벨 스코프를 사용하므로 에러가 발생하지 않는다.
5. tsconfig.json 수정하기

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

   moduleDetection을 force로 수정하면 모든 파일을 모듈로 인식한다.

나는 3번 방식을 사용했다.

참고

https://www.totaltypescript.com/cannot-redeclare-block-scoped-variable

https://www.typescriptlang.org/tsconfig/#module