tsc, babel 차이점

최근 express + typescript를 가지고 간단한 토이 프로젝트를 진행하려고 했는데

문득 프로젝트 완성후 컴파일은 어떻게 하지 라는 생각에 컴파일에 대해 찾아보았다

 

babel 은 ES6 이상의 새로운 기능들을 옛날 버전의 브라우저에서도 사용할 수 있게 ES5 버전으로 변환한다

물론  .ts파일도 변환 가능하다

 

tsc는 타입스크립트로 작상된 파일을 자바스크립트 파일로 컴파일 한다

물론 ES5버전으로 변환도 가능하다

 

그러면 타입스크립트를 사용할 땐 바벨과 tsc가 똑같은건가? 라는 궁금증이 생겼다

 

tsc vs babel

tsc는 TypeScript Compiler의 약자이다 typescript 설치시 자동으로 설치되며

tsconfig.json 파일을 통해 컴파일 설정을 할 수 있다 tsc는 컴파일시 .ts파일의 타입 검사도 수행한다

 

 

babel은 최신 문법의 코드를 이전 버전의 코드로 변환(트렌스파일)시 타입스크립트의 타입 시스템을

이해하지 못하기 때문에 타입 검사는 수행하지 못한다 그리고 플러그인 시스템으로 확장성이 용이하다

 

어떤걸 사용해야 하는가?

 

tsc는 컴파일은 하지 않고 타입 검사만을 사용하도록 하고

컴파일시 babel의 플러그인 시스템을 사용하여 사용자 정의에 맞게 다양한 변환을 하도록

사용하는게 맞다는 결론이다

tsconfig.json 설정

 npx tsc --init

 

해당 명령어를 통해 tsconfig.json 파일을 생성한다

 

// tsconfig.json

{
  "compilerOptions": {
    // ...
    "noEmit": true,
    "isolatedModules": true
  }
  // ...
}

 

 

"noEmit": true

tsc 컴파일시 코드를 트랜스파일하거나 타입 선언 파일을 생성하지 말라고 지시한다.

tsc는 타입 체크만을 수행하고, 실제 코드의 변환은 babel에게 맡기는 것이다.

 

"isolatedModules": true

tsc 컴파일시 각 파일을 모듈로 취급하라고 지시한다.

각 파일을 모듈로 취급하면 파일 간의 의존성을 추적할 수 있고, 이를 통해 더 빠른 타입 체킹을 수행할 수 있다.

 

tsc 타입 체크시 타입 오류가 있으면 나오는 에러

 

tsc 를 타입 체크용도로 사용하지 않아도 ts 자체적으로 타입 오류가 있으면 밑의 사진 처럼 빨간색으로 표시가 된다

 

그래도 안전빵으로 tsc 타입 체크를 사용하는것도 괜찮은거 같다