[node.js] Typescript를 이용하여 Express 환경 구성하기

1. 패키지 초기 설정

프로젝트 정보 및 의존성을 구성하는 packages.json 파일을 생성한다. npm init 명령어를 통해 설치할 수 있다.

필자는 ts-express라는 디렉토리에서 패키지를 생성했다. 패키지를 초기화 할 때는 다른 옵션을 건드리지 않고 엔터를 눌러 넘어갔다.

2. 필요 모듈 설치하기

익스프레스 모듈을 타입스크립트를 이용하여 사용하기 위해서는 몇가지 모듈이 필요하다.

express, typescript, ts-node, @types/node, @types/express 5개의 모듈을 설치하여 개발에 필요한 모듈을 설치한다.

그리고 추가적으로 nodemon 모듈도 설치하여 서버를 껐다 키지 않아도 알아서 서버를 다시 시작해주는 모듈을 추가로 설치한다.

 

• npm install express nodemon typescript ts-node @types/node @types/express

install 뒤에 -d 옵션을 붙여 개발자 모드로 설치하여도 무방하다.

 

{
  "name": "ts-express",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/express": "^4.17.13",
    "@types/node": "^17.0.18",
    "express": "^4.17.2",
    "nodemon": "^2.0.15",
    "ts-node": "^10.5.0",
    "typescript": "^4.5.5"
  }
}

설치가 완료된 후 packages.json 파일을 살펴보면 우리가 설치한 모듈들이 정상적으로 반영된 것을 확인할 수 있다.

3. 타입스크립트 환경 파일 생성하기

타입스크립트로 작성된 코드일지라도 컴파일을 할 때에는 자바스크립트로 변환하여 컴파일 하는 일이 필요하다. 타입스크립트 컴파일은 tsc 명령어를 이용하며 tsconfig.json 파일을 생성하기 위해서는 npx tsc --init명령어를 입력한다.

tsconfig.json 파일 살펴보기

{
  "compilerOptions": {
    
    "target": "es2016",                                  
    "module": "commonjs",                               
    "esModuleInterop": true,                             
    "forceConsistentCasingInFileNames": true,            
    "strict": true,                                      
    "skipLibCheck": true                                 
  }
}

기존 구성은 위와 같이 되어있으며 아래와 같이 구성을 수정한다.

{
  "compilerOptions": {
    
    "target": "es2016",                                  
    "module": "commonjs",                               
    "esModuleInterop": true,                             
    "forceConsistentCasingInFileNames": true,            
    "strict": true,                                      
    "skipLibCheck": true,
    "outDir": "./build", // 컴파일 이후 JS파일이 생성될 디렉토리
    "rootDir": ".",
    "moduleResolution": "node",
  }
}

이번 포스팅 글에서는 타입스크립트 환경 파일의 구성 요소 설명에 대해서는 따로 다루지 않을 예정이다. 옵션의 의미가 궁금한 분들은 여기를 참고하여 읽어보면 좋을 것 같다. 설명을 간결하게 잘 해주셨다.

4. 서버 실행을 위한 파일 작성하기

src 디렉토리를 생성하고 그 안에 index.ts 라는 파일을 생성한다. 생성된 인덱스 파일 안에 다음과 같이 코드를 작성한다.

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

const app = express();

app.get('/', (req: Request, res: Response, next: NextFunction) => {
    res.send('Hello Express with Typescript!');
});

app.listen(3000, () => {
    console.log('Starting Server with 3000 port');
});

5. 서버 실행을 위한 packages.json 파일 수정하기

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

기존에 이렇게 작성되어 있던 부분을 다음과 같이 수정한다.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon --watch \"src/**/*.ts\" --exec \"ts-node\" src/index.ts"
  },

위와 같이 수정하면 npm start 명령어를 통해서 서버를 실행할 수 있다.

6. 결과 확인하기

우리가 지정한 3000번 포트로 서버가 잘 실행된 것을 확인할 수 있다.

그리고 localhost:3000 주소로 들어가면 위와 같이 GET 메서드에서 지정해 준 응답 결과가 잘 나오는 것을 확인할 수 있다.