이번 포스트에서는 타입스크립트와 Babel을 함께 사용하여 프로젝트를 설정하는 방법에 대해 살펴보겠습니다.

1. 프로젝트 초기 설정

먼저, 프로젝트 디렉토리를 만들고 다음 명령어를 사용하여 타입스크립트와 Babel을 설치합니다:

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

2. Babel 구성

프로젝트 루트에 .babelrc 파일을 생성하고 다음과 같이 Babel 구성을 추가합니다:

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

3. 타입스크립트 설정

타입스크립트 설정 파일 tsconfig.json을 생성하고 필요한 옵션을 추가합니다:

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

4. 빌드 스크립트 추가

package.json 파일에 빌드 스크립트를 추가합니다:

{
  "scripts": {
    "build": "tsc && babel src --out-dir dist"
  }
}

이제 타입스크립트와 Babel을 함께 사용할 수 있는 프로젝트가 설정되었습니다. 위의 설정을 통해 타입스크립트 코드를 작성하고 Babel을 사용하여 트랜스 파일링 할 수 있습니다.

참고 자료

• Babel 공식 문서
• 타입스크립트 공식 문서