[Babel] TypeScript 코드를 JavaScript로 바꾸기 위해 떠난 여정기

 

 

 

 

시작은 말이지..

TypeScript로 작성한 코드를 JavaScript로 바꾸고 싶을 때는 어떻게 해야할까?

나의 경우 TypeScript로 작성한 코드를 Parse 해야하는 작업을 해야했다.

하지만 메타성 정보가 아닌 실제 동작하는 코드가 runtime에서는 JavaScript이여야 한다는 피드백을 들었다.

그렇게 TypeScript to JavaScript가 되는 여정이 시작되었다..!

 

혹시 Babel 구성 조차 하지 않았다면 맨 아래  "+ Babel 구성이 되어 있지 않다면"만 참고하길 바란다.

 

Babel을 사용하자

Jest에서 테스트코드를 돌리기 위해 Babel을 처음 써봤었다.

하지만 아직도 Babel은 나한테 낯선 존재로 코드 바꾸기를 들어갈 때 Babel을 고려하지 못했다.

감이 잡하지 않아 사수님께 여쭤보니 webpack아니면 babel을 써보라는 힌트를 얻었다!

 

// pachage.json
"scripts: {
	"babel": "babel getFind.ts --out-file getFind.js"
}

babel에 대한 정보를 찾아가면서 TS 파일을 JS로 파일로 바꿔주는 코드를 알게 되었다.

하지만 내가 원하는 것은 JS 파일이 아닌 순수한 문자열이었다.

JavaScript로 바뀐 코드를 추출한 문자열을 변수에 담고 싶었는데 이렇게 파일로 변경될 경우 귀찮은 작업이 늘어날 뿐이었다.

 

 

@babel/core 중에 transformSync 딱 기억해

const test = transformSync(
  'function <T>(Test: T): T { }',
  {
    filename: 'file.ts',
  },
);

console.log(test?.code);

어떻게 하면 파일 생성 대신 순수한 문자열만 가지고 싶어 고민하던 중 동기가 비슷한 작업을 한 적 있다면서 코드를 보여줬다.

여기에서 주목해야하는 것은 transformSync라고 @babel/cor안에 있는 함수 중 하나이다!

이 함수를 써주면 바로 내가 원하는대로 TypeScript가 JavaScript가 되는 것이다 👍

 

사실 이때 처음으로 패키지 안에 있는 함수를 사용할 수도 있겠구나라고 생각하게 되었다.

언제나 크게 동작하는 패키지만 사용할 생각을 했지 그 안에 수많은 함수들을 사용할 생각을 하지 못했기 때문이다!

 

출처: https://babeljs.io/docs/en/babel-core

transfromSync에 대한 정보를 공식문서에 확인해보자.

필수값은 code로 변경해줄 TypeScript을 문자열로 넣어주면 된다.

(fs.readFile을 하면 결과값이 문자열로 나옴)

 

하지만 막상 공식문서를 보면 내용은 별로 없고 transfrom, transformAsync 등 비슷한 함수들이 나와있다.

각자 자신에게 맞는 것을 찾아 쓰면 될 것 같다.

 

 

BABEL_PARSE_ERROR 발생!

인제 딱 ts-node로 파일을 실행시켜주면 아름답게 JavaScript 코드가 출력 되어야 하는데 이게 웬걸..

BABEL_PARSE_ERROR가 발생한 것이다! 

아무리 찾고 찾아도 해결 방법을 찾지 못해 하루를 꼬박 써버렸다.

 

하지만 결국은 해내는 나답게 원인을 알 수 있었다.

그것을 바로 변경할 TypeScript 코드 자체가 이상했기 때문이다 😅

 

// before
const test = transformSync(
  'function <T>(Test: T): T { }',
  {
    filename: 'file.ts',
  },
);

console.log(test?.code);

// after
const test = transformSync(
  'const test = function <T>(Test: T): T { }',
  {
    filename: 'file.ts',
  },
);

console.log(test?.code);

before after 코드를 비교하보면 transformSync에 코드 부분에 들어간 문자열이 미세하게 다른다는 것을 알 수 있다.

바로 함수 코드를 제대로 작성하지 않아 생긴 문제였다!

문법적으로 틀리니 어쩌면 당연하게 Babel이 이해하지 못했고 결국 에러가 나온것이다.

 

그러니 혹시 나처럼 BABEL_PARSE_ERROR가 나왔다면 우선 변경해줄 TypeScript부터 잘 살펴보자.

근데 어떤 사람은 이런 의문이 들것이다.

"아니, TypeScript로 코드를 짰는데 어떻게 문법이 틀려?"

 

data.substring(data.indexOf("function"));

맞다, 하지만 나의 경우 transformSync를 하기 전에 먼저 먼저 function의 위치를 찾아 substring으로 앞쪽(const test = )을 잘라버렸다.

왜 이렇게 했냐고 물어본다면 그건 회사와 관련된 일이라 말을 할 수 없다.

아무튼 나처럼 잘못 가져왔을 확률이 있으니 꼭 code안에 넣을 문자열을 확인해보자.

 

 

 

+ Babel 구성이 되어 있지 않아 안된다면!

const test = transformSync(
  'const test = function <T>(Test: T): T { }',
  {
      plugins: ["@babel/plugin-transform-typescript"],
   }
);

console.log(test?.code);

기존에 Babel로 구성을 해놓은 사람들이라면 위 방식으로 아무런 문제가 없었을 것이다.

하지만 나의 경우 새로운 Repo에서 시작하는거라 Babel 구성이 안되어 있었다.

 

즉, Babel과 관련해서 아무런 준비가 되어 있지 않아 위 방식으로 되진 않았다.

그렇다고 Babel 구성되어져 있는 Repo를 그대로 따라하기에는 쓸모 없는게 많은 것 같아 다른 방법을 찾아보았다.

 

바로 @babel/plugin-transform-typescript만 사용해주는 것이다.

babel.config.js에 작성해도 되지만 이 하나 때문에 작성하는게 그래서 나는 직접 플러그인을 넣어주었다.

 

npm i -D @babel/plugin-transform-typescript

이 플러그인을 쓰기 위해서는 npm 해서 사용해야하니 위 코드를 터미닐에 입력해주자.

 

 

 

마무리

에러까지 해결되었다면 다시 돌려보면 console이 예쁘게 찍힌 것을 확인할 수 있을 것이다.

지금은 해결되서 속 쉬원하지만 정말 그 전까지는 답답해서 한숨이 절로 나왔다.

그렇지만 해결한 그 순간! 속이 뻥 뚫리는 맛에 개발자 한다 😚