TIL no.91 - TypeScript로 Express 시작하기

Gongzza's Blog를 따라해보며 기본적인 감을 익히려 합니다.

1. Setting

작업할 directory를 만들고 package.json파일을 생성합니다.

package.json이란?

package.json파일을 통해 node.js 프로젝트의 정보를 관리할 수 있습니다.
Express의 경우, 프로젝트 자동 생성시 package.json을 만들어 주지만 이런 방식으로 프로젝트를 생성하지 않는 경우에는 직접 package.json을 만들어 줘야 합니다.

# create project directory
$ mkdir ts_practice && cd ts_practice

# make package.json
$ npm init -y

필요한 모듈을 설치합니다.

# install save dependencies
$ npm i -S express

# install save devDependencies
$ npm i -D typescript

설치한 모듈의 type definition을 포함하는 package들을 설치합니다.

# install @types
$ npm i -D @types/node @types/express

이제 TypeScript 컴파일 옵션을 설정할 차례입니다.
다음 명령으로 tsconfig.json 파일을 생성할 수 있습니다.

npx tsc --init

가장 최소한의 옵션들만 지정하기 위해 tsconfig.json을 다음과 같이 수정합니다.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "moduleResolution": "node",
    "outDir": "dist"
  },
  "include": [
    "src/**/*"
  ]
}

이제 TyeScript 컴파일 옵션을 설정했으니
package.json에서 TypeScript 빌드 후 Node.js로 실행하는 스크립트를 추가합니다.

"scripts": {
    "start": "tsc && node dist"
  }

여기까지 아주 기본적인 세팅을 끝마쳤습니다.

이제, Hello World를 브라우저에 띄워보도록 하겠습니다.

2. Hello World!

src라는 directory를 만들고 index.ts을 생성한 뒤, 다음과 같이 작성합니다.

//src/index.ts
import * as express from 'express'
const app = express();

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

app.listen(3000, () => {
  console.log('Example app listening on port 3000!');
});

서버를 실행 시키면 dist라는 폴더에 js파일이 생성되고 localhost:3000에 접근하면 다음과 같은 화면을 볼 수 있습니다.

$ npm start