타입스크립트를 실행시키는 방법

개요

node.js 만 설치된 환경, 혹은 브라우저만 설치된 환경에서는 타입스크립트를 그냥 실행할 수 없다. 타입스크립트를 밑바닥부터 실행하는 방법을 알아보자.

tsc 설치하여 컴파일 후 실행하기

tsc 는 타입스크립트 컴파일러로 타입스크립트로 작성된 파일을 자바스크립트로 변환시켜주는 기능을 가지고 있다.

typescript 패키지 설치하기

npm install -D typescript

위 명령어를 통해 타입스크립트 해석기를 설치할 수 있다.

tsconfig 설정하기

{
  "include": [
    "src/**/*"
  ],
  "compilerOptions": {
    "outDir": "build",
    "esModuleInterop": true,
    "target": "ES3",
    "strict": true,
    "allowJs": true
  }
}

여기서 중요한 것은 include 와 compilerOptions.outDir 이다. 이에 대한 설명은 여기 링크에서 확인할 수 있다.

tsc 명령어를 이용해 타입스크립트 컴파일하기

이제 tsc 라는 명령어를 이용해 타입스크립트를 컴파일할 수 있다.

npx tsc

위 명령어를 입력하면, 타입스크립트 컴파일러(tsc) 가 실행되어 tsconfig 에서 outDir 에 미리 설정한 build 경로 아래에 컴파일된 자바스크립트 파일을 확인할 수 있다.

컴파일된 자바스크립트 파일은 node 명령어를 통해 실행하거나 브라우저를 통해 실행 가능하다.

tsc 명령어를 package.json 에 등록하기

"scripts": {
  "build": "tsc",
  "start": "tsc && node build/index.js"
}

위와 같이 명령어를 세팅해놓으면, npm run build 명령어와 npm run start 명령어를 통해 타입스크립트에서 컴파일된 자바스크립트 코드를 곧바로 실행할 수 있다.

ts-node 를 통해 실행시키기

ts-node 는 타입스크립트 실행기로 node.js 에 대한 REPL(Read-Eval-Print Loop) 역할을 한다.

그러나, 단순히 REPL 역할 뿐만 아니라 개발 시 ts-node 를 통해 typescript 코드를 실행시켜 빌드 없이 typescript 코드를 실행할 수도 있다. 개발 환경에서 일일이 .ts 를 .js 로 변환하고 실행시키기는 귀찮으니, 타입스크립트 코드를 빠르게 실행시켜보기 위해 사용한다.

TypeScript execution and REPL for node.js, with source map and native ESM support.

ts-node 는 개발 환경에서만 이용하자

배포 환경에서는 당연히 ts-node 를 쓰지 않는 것이 좋다. 결국 ts-node 도 타입스크립트 코드를 직접 실행하는 것이 아니라 자바스크립트로 변환 후에 실행하는 것인데 우리 눈에만 보이지 않을 뿐이다. 개발 환경에서만 이용하자.

실행 방법

  "scripts": {
    "dev": "ts-node src/index"
  }

package.json 에서 scripts 부분을 위와 같이 수정한 뒤, npm run dev 를 통해 실행할 수 있다.

nodemon 을 통해 파일 내용이 변경되어 저장될 때마다 실행하기

  "scripts": {
    "dev": "nodemon --exec ts-node src/index.ts",
  }

nodemon --exec 위와 같이 스크립트를 작성하면, 매번 파일의 내용이 변경될 때마다 코드가 실행된다. 개발할 때 매우 용이하다.