[Typescript] node.js + express + Typescript 세팅

들어가며

이번 글에서는 node.js + express에서 Typescript를 사용하기 위한 세팅의 전반적인 과정에 대해서 다뤄보겠습니다.

package.json 생성

• 작업하려는 directory 생성 후 아래의 명령어를 실행해 우리 서비스의 의존성을 관리해주는 package.json파일을 생성한다.

$ yarn init

package.json에서 우리가 사용하는 package들을 관리해주기 때문에, 나중에 yarn install 명령어로 필요한 package들을 설치할 수 있습니다.

yarn init을 치면 뭘 많이 물어보는데 entry point만 주로 사용하는 index.ts나 app.ts로 설정해주고 나머지는 그냥 enter로 넘겨도 무방합니다.

필요한 package 설치

• 이제 기본적으로 필요한 package들을 아래의 명령어로 설치해줍니다.

$ yarn add -D express typescript ts-node nodemon @types/node @types/express

ts-node의 기능
기본적으로. ts파일을 실행하려면 js로 컴파일 후 node [js파일] 명령어로 실행을 해야 한다. 그러나 ts-node 라이브러리는 이러한 과정을 생략하고 바로 ts-node [ts파일] 명령어로 실행 가능하게 해 준다.

-D 옵션
개발자 모드로 설치한다는 뜻인데 위와 같은 옵션으로 설치를 하게 되면 package.json에 devDependencies의 항목에 package들이 추가가 됩니다.
추후 yarn install에 --production의 옵션을 줄 경우 devDependencies의 항목들은 설치가 안된다. 배포에 사용되는 패키지가 아니라 개발에만 사용하는 패키지의 경우 -D옵션을 붙여 yarn add를 하면 됩니다.

tsconfig.json 생성

• ts-node의 기능에서 말한 것처럼. ts파일을 실행하기 위해선. js파일로 컴파일이 필요한데, 이때 컴파일 옵션을 설정하는 파일이 tsconfig.json입니다.
• 아래의 명령어로 생성할 수 있습니다.

$ npx tsc --init

• 저는 생성된 tsconfig.json파일을 아래와 같이 수정했습니다.
• 옵션이 정말 다양하게 있는데 링크에 정리를 잘해주신 분이 계십니다.
• 본인 프로젝트에 맞는 옵션 설정을 해주시면 됩니다.

{
   "compilerOptions": {
      "lib": [
         "es5",
         "es6"
      ],
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "outDir": "./build",
      "rootDir": "./",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "sourceMap": true,
      "noImplicitAny": false,
      "esModuleInterop": true,
   }
}

package.json의 script수정

• package.json의 scipt항목을 아래와 같이 작성합니다.

"scripts": {
    "start": "node dist/index.js", 
    "build": "tsc -p .", 
    "dev": "nodemon --watch \"src/**/*.ts\" --exec \"ts-node\" src/index.ts"
  }

실행

• 아래 명령어를 통해 nodemon으로 프로젝트를 실행할 수 있습니다.

$ yarn dev

• localhost:{port}로 접속하면 정상적으로 동작하는 것을 볼 수 있습니다.✌️