TypeScript + Node.js + Express 에서 프로젝트 시작하기

0. 프로젝트 폴더 생성

나의 프로젝트 폴더 구조는 다음과 같다.

1. 패키치 설치

 

나는 package manager로 yarn을 사용했다.

내 프로젝트 폴더 구조 기준으로 back 폴더에서 다음 명령어를 실행했다.

 

1) yarn 초기화

 

$ yarn init

 

 

2) 필요한 패키치 설치

 

•  typescript 전역으로 설치

yarn add typescript -g

 

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

 

 < 참고 >

• typescript는 node에서 바로 실행되지 않기 때문에 tsc를 사용해서 javascript로 변환한 다음 실행된다.
• 프로덕션 환경에 올리기 위해서는 모든 파일을 트랜스파일(ts를 js로 변환)하게 된다.
• ts-node는 개발용으로 사용되며 변환과 실행 두 단계를 거치지 않고, 소스를 단계별로 읽어서 변환하면서 실행합니다.

 

 

3) tsconfig.json

 

$ yarn tsc --init

 

init을 하면 tsconfig.json 파일이 생긴다.

생긴 파일에서 필요한 설정을 작성해주면 된다.

 

{
  "compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
    "strict": true,
    "skipLibCheck": true
  }
}

 

 

• rootDir, outDir : 타입스크립트 코드와 노트로 실행될 출력되는 자바스크립트 코드 분리

 

 

 

4) dist 폴더 생성

 

• dist은 출력코드가 있는 폴더이다. (컴파일된 js 파일이 들어간다.)

 

 

 

5) package.json 의 scripts

 

"scripts": {
    "start": "nodemon --exec ts-node bin/index.js",
    "build": "tsc", 
  }

 

• 개발환경에서는 ts-node를 사용해서 ts 파일을 읽을 수 있지만 배포 단계에서는 js 파일로 컴파일해서 읽어야한다.
• 개발 단계에서도 컴파일을 해서 실행할 지, 배포 시 도커파일에 스크립트에서만 컴파일해서 실행할 지 이건 조금 더 고민해보아야겠다.

 

 

2. express 코드 작성

 

• app.ts

import express from 'express';

const app: express.Application = express();

app.get('/', (req: express.Request, res: express.Response, next: express.NextFunction) => {
  res.send('hello typescript express!');
});

export default app;

 

• index.ts

import app from './src/app';
import { createServer } from 'http';

const port: number = Number(process.env.PORT) || 5001;

const server = createServer(app);

server.listen(port, async () => {
  console.log(`정상적으로 서버를 시작하였습니다.  http://localhost:${port}`);
});

export default server;

 

 

 

---

📌 Reference

• Node.js + TypeScript 프로젝트 만들기
• TypeScript + Express + node.js 설정하기

 

https://hckcksrl.medium.com/typescript-%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4-express-node-js-%EC%84%B8%ED%8C%85-12bbdd62513f