TypeScript로 개발하는 Express

얼마전 장고에서 typescript를 사용하기 시작했는데 상당히 맘에드는 친구라서 본격적으로 typescript를 활용하고 싶어졌다. 일단 가장 만만한 express의 개발 환경을 ts로 구축해보면 다른 것도 대강은 구축이 수월할 것이라 생각된다.

패키지 설치

npm install -g typescript
npm init -y
npm install --save express
npm install --save-dev @types/node @types/express

@types가 붙은 패키지는 /뒤에 나열된 패키지의 type을 제공하므로 유용하다. 가령 express의 응답는 다음과 같은 type을 가지고 있다고 알려준다.

interface Response<ResBody = any> import Response

타입스크립트 설정

tsc --init

위 명령을 시도하면 tsconfig.json 파일이 생성되는데 열어보면 엄청난 옵션들이 주석처리 되어있다. 자세한 설정은 잘 모르겠고 지금 당장 필요한 부분은

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*"
  ]
}

이정도다. 이제 tsc라는 명령어를 입력하면 src에 있는 ts 파일들은 컴파일 후 es5 문법으로 dist에 생성된다. 이와같은 환경을 만든 뒤 package.json의 script에 다음 내용을 추가한다.

"start": "tsc && node dist"

tsc 명령으로 모두 컴파일하고 node dist의 index.js를 실행하게 된다. 간단하게 src 디렉터리에 다음 index.ts 파일을 생성해보자.

import express, { Request, Response } from 'express';

let server = express();

server.get('/', (req: Request, res: Response) => {
    res.send('Hello World!');
    console.log(req);
});

server.listen(3000, () => {
    console.log('http server listen on :3000');
});

이제 아래 명령어를 입력하여 express 서버를 실행할 수 있다.

npm start

패키지 추가

코드를 변경할때 마다 수시로 컴파일 후 실행하는 건 상당히 귀찮은 일이다. React와 같은 프레임워크는 소스를 수정하면 자동으로 반영되고 브라우저가 리프레시 되는데 nodemon이라는 패키지를 활용하면 우리의 프로젝트에서도 비슷한 느낌을 받을 수 있다.

npm install --save-dev nodemon ts-node

위 두가지 패키지를 추가적으로 받아준 뒤 아까 만들었던 package.json의 script의 내용을 수정해주자.

"start": "nodemon --watch src --delay 1 --exec ts-node src/index.ts"

아까와 똑같이 프로젝트를 실행한 뒤 소스를 수정하면 서버가 스스로 재시작되는 것을 확인할 수 있다.