Babel은 JavaScript 코드를 변환하는 도구이며, 타입스크립트의 정적 타입 시스템과의 통합을 위해 @babel/preset-typescript 플러그인을 추가할 수 있습니다.

1. Babel 및 관련 패키지 설치

먼저, @babel/preset-typescript 플러그인과 관련된 패키지를 설치합니다.

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

2. Babel 구성 파일 설정

그런 다음, Babel 구성 파일(babel.config.js 또는 .babelrc)에 @babel/preset-typescript 플러그인을 추가합니다.

babel.config.js

module.exports = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
};

.babelrc

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

3. Babel 실행

이제 Babel을 실행하면 타입스크립트 코드를 JavaScript 코드로 변환하는 동시에 타입 검사도 수행됩니다.

타입스크립트의 정적 타입 검사를 통합하여 JavaScript 프로젝트에 더 많은 유연성을 추가할 수 있습니다.

물론, 이 외에도 더 많은 Babel 설정 옵션이 있으며, 프로젝트의 요구 사항에 따라 유연하게 적용할 수 있습니다.

참고 자료

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