TypeScript ( tsc vs babel 설정 )

tsc vs babel

---

how to convert from TypeScript to JavaScript

• Is your build output mostly the same as your source input files? Use tsc
• Do you need a build pipeline with multiple potential outputs? Use babel for transpiling and tsc for type checking

바벨을 사용해야 하는 이유

---

바벨7 이전

TS > TS compiler > JS > Babel > JS 순서

웹팩은 두개의 컴파일러를 함께 사용하기 위해 사용된다. ( babel, tsc ) 웹팹 설정을 비틀어 *.ts 를 타입스크립트로 입력한 다음 결과를 바벨에 제공한다. 웹팩의 탑이스크립트 로더에는 ts-loader, awesome-typscript-loader 가 있는데 awe~ 일부 작업의 부하로 컴파일 속도가 느리며, ts-loader는 많은 복잡한 캐시 로더를 함께 설정하여 사용해야 하는 불편함이 있다.

바벨7 이후

바벨은 타입스크립트를 우선 js로 변경한다.

• 바벨 + 타입스크립트코드는 느린 컴파일 시간 개선
• 준비가 되었을 때만 타입 오류를 확인하라 ( js로 우선 안정성 검사 하지 않고 컴파일한 다음 코드 실험이 끝나고 타입 검사를 진행한다. )
• TypeScript는 전체 프로젝트를 컴파일 하지만 Babel은 한번에 하나의 파일만 컴파일 한다.

 

방법

---

1. 바벨 관련 라이브러리 다운

npm install --save-dev typescript @babel/core @babel/cli @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-typescript