ES6(또는 ES2015) 이상의 자바스크립트 문법을 사용하기 위해서는 Babel과 같은 도구를 사용하여 이전 버전의 브라우저에서도 호환되게끔 변환해야 합니다. 타입스크립트는 기본적으로 ES6+ 문법을 사용할 수 있지만, Babel을 통해 추가적인 변환 작업을 수행하여 기존의 브라우저에서도 동작하도록 할 수 있습니다. 이번 포스트에서는 타입스크립트와 Babel을 함께 사용하여 ES6+ 문법을 변환하는 방법에 대해 알아보겠습니다.

Babel 설치 및 설정

먼저 Babel을 설치하기 위해 다음 명령어를 실행합니다.

npm install @babel/core @babel/preset-env @babel/preset-typescript

그리고 프로젝트 루트에 .babelrc 파일을 생성하고, 다음과 같이 설정합니다.

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

타입스크립트 설정

타입스크립트의 설정 파일(tsconfig.json)에 다음과 같이 설정을 추가합니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true
  }
}

여기서 target 옵션을 ES5로 설정하여 ES6+ 문법을 ES5로 변환하도록 하고, module 옵션을 commonjs로 설정하여 CommonJS 모듈 시스템을 사용하도록 합니다.

변환 작업 수행

이제 Babel과 타입스크립트 설정이 모두 완료되었으므로, ES6+ 문법을 사용한 타입스크립트 코드를 작성하고, 다음 명령어를 사용하여 변환 작업을 수행할 수 있습니다.

npx babel src --out-dir dist

위 명령어는 src 폴더 내의 모든 파일을 ES6+ 문법을 ES5로 변환한 후, dist 폴더에 생성합니다.

이제 타입스크립트와 Babel을 함께 사용하여 ES6+ 문법을 변환하는 방법을 알아보았습니다. 이를 통해 기존의 브라우저에서도 호환되는 안정적인 코드를 작성할 수 있게 되었습니다.

참고 자료

• Babel 공식 문서
• 타입스크립트 공식 문서
• ES6 기능 소개