타입스크립트 트랜스파일링에 대해 알아보고 짧게 정리해보려고 한다.

타입스크립트란?

TS는 JS의 슈퍼셋이다?

이 2개의 차이점을 찾다가 보면 꼭 나오는 말이 있다. TS는 JS의 슈퍼셋(Superset) 이라는 표현이다. 그렇다면 슈퍼셋은 뭘까? 검색해도 그 뜻이 곧잘 튀어나오는 단어는 아니었다. 가장 납득 가능한 의미는 "확대집합" 또는 "상위집합"이었다.

어떤 기능을 더 갖고 있을까?

1. 타입 정의
2. 인터페이스
3. null/undefined-safe
4. 범용적인 클래스나 메서드 타입을 실현하는 제네릭

타입스크립트 트랜스파일링은 왜 필요할까?

node.js와 브라우저는 JS만 읽을 수 있기 때문에 TS로 작성된 파일을 JS로 바꾸는 과정이 필요하다. TS 컴파일러(tsc)가 TS 파일을 JS 파일로 트랜스파일링한다.

트랜스파일링에 필요한 tsconfig.json

tsconfig.json은 TS를 JS로 변환시키는 컴파일 설정을 정의한 파일이다. tsc나 ts-node 명령어를 실행하면 tsconfig.json을 기준으로 컴파일을 진행한다.

> tsc --init

트랜스파일링 순서

1. 스캐너(Scanner)
   TS 소스 코드를 읽고 각각의 문법 요소를 위치 정보를 가진 토큰으로 변환한다.
2. 파서(Parser)
   스캐너가 작성한 토큰을 받아 추상 구문 트리(AST: Abstract Syntax Tree)로 변환한다.
3. 바인더(Binder)
   AST를 기반으로 타입 체크의 기본이 되는 Symbols를 작성한다.
   **Symbols: AST 내부의 declaration nodes 간 연결 지원
4. 체커(Checker)
   타입 체크를 실행한다. 컴파일러에서 가장 큰 부분이다.
5. 이미터(Emitter)
   AST와 체커의 결과를 바탕으로 TS를 JS로 변환해 출력한다.
   emitter.ts TS에서 JS로 트랜스파일을 수행하는 이미터
   declarationEmitter.ts declaration file(.d.ts)을 생성하는 이미터

후기

찾으면 찾을수록 알아야 할 것이 점점 늘어난다..🥲 공부하면서 들은 피드백을 간략하게 정리했다.

1. 코드의 안정성인가 컴파일 시간 단축인가?
코드의 안정성을 위해서 타입을 엄격하게 적용할수록 코드의 컴파일 시간이 늘어나는 trade-off 문제가 있는데, 이 부분에 대한 의견은 개인적으로는 코드의 안정성을 조금 더 고려하는 것이 맞다고 생각한다.
2. 타입 가드는 만능이 아니다! 코드의 안정성을 어떻게 보장할 것인가?
컴파일 과정에서 타입 가드를 사용하고, 코드를 줄이기 위해 validation을 줄이게 된다. 이 때 타입 가드에 모든 역할을 맡기기보다는 코드를 검증할 다른 도구나 방법도 꼭 필요하다.

참고 자료

• https://basarat.gitbook.io/typescript/overview
• https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-tsconfigjson-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-%EC%B4%9D%EC%A0%95%EB%A6%AC