Type System
프로그래밍 언어에서 Type System은 유저들이 실수하는 것을 막아주고, 잘못된 메모리 접근을 막아주는 역할을 한다. 예를 들어, 4Bytes을 써야 하는데 8Bytes을 쓰는 경우 이는 Buffer-overflow가 되는데 Typescript는 이를 막아줄 수 있다.
이처럼 현대의 "안전한" 프로그래밍을 위해 Type System은 필수적이다. 하지만 JS가 좋지 않은 언어로 불리는 수 많은 이유 중 하나가 바로 Type System의 부재이다. 이를 극복하기 위해 JS에서는 third-party library로 타입을 구현하는데 이것이 바로 Typescript이다.
이로 인해 JS 생태계는 조금 더 복잡해졌다고 할 수 있다. Typescript 코드를 Javascript으로 변환한 다음 Javascript을 node/deno/bun 등의 runtime으로 실행해야 한다.
이번 글에서는 Typescript을 JS으로 transpile하는 과정을 알아볼 것이다.
tsc
tsc는 Typescript Compiler이다. TS 코드를 JS 코드로 변환하는 툴이다. 다음과 같이 사용할 수 있다.
tsconfig.js을 설정하면, 변환된 js을 저장하는 디렉토리와 같은 다양한 옵션들을 설정할 수 있다.
$ tsc src/index.ts // src/index.ts을 js으로 변환한다.tsc-watch
개발을 하면서 매번 tsc 명령어를 입력하는 것은 꽤나 귀찮은 작업이다. TS 파일이 변하면 자동으로 transpile되고 이것이 성공하면 지정된 명령어를 실행하는 tsc-watch 툴을 사용하면 된다.
package.json에 다음과 같은 script 명령어를 추가하면 된다.
이렇게 되면 npm dev 또는 yarn dev 또는 pnpm dev 명령어를 실행하면, TS 파일들의 변화를 감지하고 transpile이 성공하면 dist/app.js을 실행한다.
"scripts": {
"dev": "tsc-watch --onSuccess \"node dist/app.js\"",
...
},tsc만 사용하면 안된다
tsc는 TS을 JS으로 변환하는 툴이며, 번들링을 따로 제공하지 않는다. webpack, rollup, swc 등에서 bundling과 함께 TS transpiling도 담당한다.
위의 예시는 Typescript가 결국 JS으로 변환된다는 것을 보여주기 위한 것이였다.
