[Typescript] Cannot redeclare block-scoped variable ‘OOO’

이전에 진행했던 프로젝트 리팩토링을 진행하며 javascript로 작성했던 파일의 확장자를 ts로 수정했다. 그러자 Cannot redeclare block-scoped variable ‘OOO’ 에러가 발생했다. 

 

구글링을 통해 얻은 결론은 “타입스크립트는 파일의 top-level에 import나 export가 존재하지 않는 경우 파일을 모듈이 아닌 스크립트 파일로 인식하고, 파일 내에 선언된 변수는 window, global과 같은 전역 스코프에 영향을 미친다.” 이다.

 

즉 우리의 현재 코드에는 require문만 있어서 변수가 전역 스코프에 영향을 미쳐 같은 이름으로 require를 하면 오류가 발생한다는 것이다. 이것을 해결하기 위해서는 파일의 가장 아래에 export {}; 를 추가해줘서 이 파일은 모듈임을 명시적으로 선언해 주면 된다.

추가적으로 우리는 원래 module.exports를 사용했는데 이를 export로 바꾸려면 다음과 같이 바꿀 수 있다.

//before, test.js
module.exports = () => {
	console.log('hihi');
};


//after,   test.js
const printHi = () => {
	console.log('hihi');
}
export { printHi }


//위와 같이 바꾸면 require문도 아래와 같이 바꿔줘야 한다.
const printHi = require('test.js');  //이전

const { printHi } = require('test.ts');  //이후
const { printHi : hihi } require('test.ts'); //다른 이름으로 가져오고 싶을 경우

이전에는 그냥 module.exports를 해주어서 어떤 이름으로 가져오나 상관이 없었지만 이제는 {}로 감싸서 export 해주었기 때문에 printHi라고 특정해서 require를 해야한다.