tsconfig 컴파일러 환경 설정

📌 컴파일러 환경 설정

컴파일러의 옵션 설정은 얼마나 엄격하게 타입오류를 검사할지 혹은 js 코드의 버전은 어떻게 할지 등등을 설정할 수 있게 해준다.

tsc --init

위 명령어를 통해 타입스크립트의 컴파일러 설정 파일인 tsconfig.json이 생성된다. 처음 생성하면 이미 작성된 코드들이 주석처리 된 상태로 존재한다. 하지만 이 부분을 다 지우고 처음부터 입맛대로 진행해줘도 된다.

결론적으로 아래의 코드들로 설정해줬는데, 각각 주석을 확인하면 된다.

// tsconfig.json
{
  "compilerOptions": {
    // 가장 최신의 자바스크립트 버전으로 컴파일
    "target": "ESNext",
    "module": "ESNext",
    // 생성될 js 파일의 위치 지정
    "outDir": "dist",
    // 타입 검사를 엄격하게 할지
    "strict": true,
    // 모듈 독립성 -> 모듈 키워드 자동으로 추가됨
    "moduleDetection": "force"
  },
  // ts-node가 esmodule로 설정
  "ts-node": {
    "esm": true
  },
  // src 디렉토리 하위의 모든 파일을 다 컴파일
  "include": ["src"]
}

1. moduleDetection

무엇보다 moduleDetection 부분을 다시 한 번 정리하자면
다른 파일에서 변수 a를 각각 선언하고 저장하면 블록 범위 변수 'a'을(를) 다시 선언할 수 없습니다. 에러가 뜬다. 다른 파일인데!
그 이유는 ts 파일들은 전역 모듈로 인식되기 때문이다. (다른 파일에 있어도 하나의 공간에서 작성된 것처럼 작동)

첫번째 해결은 export,import 모듈 키워드를 사용하는 것이다. 그니까 똑같은 변수를 사용하려는 파일에서 수동으로 export 키워드를 넣어주는 것(귀찮)
이렇게 하면 독립된 모듈로 인지하게 되어 에러가 발생하지 않는다.

두번째 해결은 tsconfig.json파일에서 moduleDetection을 force 로 지정해주는 것이다. 이렇게 해주면 컴파일 후에 js 파일을 보면 알아서 export 키워드가 들어가 있고 독립된 모듈로 인지하게 된다. (편함)

2. ts-node의 esm 설정

tsconfig.json의 module이 ESnext인 상태로
ts/node src/index.ts 명령어를 실행하면

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

이런 에러가 뜬다. 따라서 package.json에 들어가서 type: module을 설정해줌 하지만 에러는 어게인... -> Unknown file extension ".ts"
ts 자체를 못 읽음

이 부분은 tsconfig.json의 module 설정이 ESnext라서 그렇다.
따라서 ts-node를 {"esm" : true}로 설정해주면 해결됨