12.5(일) - 바벨과 타입스크립트 관계에 관하여

기운찬곰·2021년 12월 5일

TIL

목록 보기

10/10

이번 주제는 바벨과 타입스크립트와의 관계입니다. 문뜩 타입스크립트를 다시 공부하는 와중에 궁금한게 생겨서 찾아보게 되었죠. 그게 뭐였는지는 아래에서 천천히 설명하겠습니다.

참고) 본 글은 필자의 생각(경험)이 많이 들어간 글이므로 틀릴 수도 있습니다.

타입스크립트를 먼저 살펴보자

간단한 실습

일단 아래와 같이 index.ts라는 파일에 타입스크립트 코드를 간단하게 구현해봤습니다.

type Props = {
  url: string;
  count: number;
};
function App({ url, count }: Props) {
  console.log("url: " + url);
  console.log("count: " + count);
}

App({ url: "aaa", count: 2 });

이를 실행하기 위해서는 typescript를 설치해야 합니다. 그런 다음 tsc index.ts로 실행하면 index.js가 생성됩니다.

function App(_a) {
    var url = _a.url, count = _a.count;
    console.log("url: " + url);
    console.log("count: " + count);
}
App({ url: "aaa", count: 2 });

그리고 나서 이를 실행하면 정상적으로 작동합니다. 결국 타입스크립트란 그 자체로는 node나 브라우저에서 실행을 못합니다. 실행은 js 로만 할 수 있죠.

타입스크립트는 컴파일러라고 보는게 맞을거 같습니다. 중간에 한번 js로 바꿔주는 역할을 하기 때문이죠.

tsconfig.json

타입스크립트를 하다보면 거의 필수적으로 만나게 되는 파일이 바로 tsconfig.json일 겁니다. 없어도 위에처럼 간단한 실습이라면 실행은 되지만 구체적인 설정이 필요한 경우 필히 작성해줘야 하는 파일이기 때문입니다.

정확히 이 파일 역할을 정의해보면 프로젝트를 컴파일하는데 필요한 루트 파일과 컴파일 옵션을 지정 한다라고 합니다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./src"
  },
  "include": ["src"]
}

위와 같이 옵션이 좀 많은 편이죠. 저도 다 알지는 못합니다...ㅠㅠ

이 과정에서 생긴 궁금증

근데 생각해보면 target이란 옵션을 es5로 설정해주면 이에 맞춰서 타입스크립트 최신 문법으로 작성된 파일을 es5로 작성된 js로 컴파일해준다는 뜻이 될 거 같습니다.

근데 이건 바벨도 해주는데 굳이?? 라는 생각이 들었습니다. 이 때부터 둘 사이 관계가 궁금해지기 시작했던거 같습니다.

바벨과 타입스크립트에 관하여

둘 사이는 무슨 사이일까?

참고 : https://ui.toast.com/weekly-pick/ko_20181220

이 의문점을 해소하는데는 toast ui 블로그가 도움이 되었습니다. 그 내용을 정리해보면 다음과 같습니다.

타입스크립트 컴파일러는 target 속성을 ES5 또는 ES6와 같이 설정하여 비슷한 기능을 한다.
그러나 바벨 구성은 babel-preset-env 로 이것을 개선한다. 자바스크립트의 기능 집합(ES5, ES6, etc)을 명시하여 지원하는 방법 대신, 지원해야 하는 환경을 나열하는 개선된 방식을 사용한다.
그니까 좀 더 구체적인 폴리필 적용을 할 수 있다는 뜻인듯 하다.
또한 바벨은 특화된 설정 구성이 가능하다. 예를 들어 자바스크립트의 새로운 기능 optional chaining을 사용하고 싶은가? 그냥 바벨 플러그인을 설치하면 끝난다.