본문 바로가기

Node.js/실험실

[Node.js] TypeScript 와 Express

이번에는 타입스크립트와 Express를 함께 세팅하는 방법을 정리하고자 한다. 

 

Express 프로젝트 생성

npm install -g express-generator

직접 Express를 구성해도 상관없지만, express-generator를 사용하면 간단하게 

환경 구성이 가능하기 때문에 사용한다! 

 

패키지 설치 

npm install --save-dev nodemon

코드를 작성하면 바로바로 변경사항을 적용하기 위해서 nodemon을 사용한다. 

 

npm install --save-dev @types/node @types/express @types/morgan @types/debug @types/cookie-parser @types/http-errors ts-node typescript

@types/node : 타입스크립트에서 사용할 Node.js의 타입을 추가한다. 

@types/express : 타입스크립트에서 사용할 Express의 타입을 추가한다. 

@types/http-errors : express-generate를 사용했을 때 사용하는 http-errors용 타입을 추가

@types/morgan : express-generate를 사용했을 때 사용하는 morgan용 타입을 추가

@types/debug: express-generate를 사용했을 때 사용하는 debug용 타입을 추가

@types/cookie-parser : express-generate를 사용했을 때 사용하는 cookie-parser용 타입을 추가

ts-node : Node.js에서 컴파일 없이 TypeScript를 실행할 수 있다.

typescript : TypeScript를 사용하기 때문에 당연히 필요하다.

 

package.json 설정 

// ...

  "scripts": {
    "start": "node ./bin/www",
    "dev": "nodemon --exec ts-node  ./bin/www.ts"
  },
  
// ...

dev에서 nodemon을 사용해서 변경이 발생하면 새로고침을 실행한다. 

그리고 ts-node를 통해서 타입스크립트를 실행한다. 

 

tsconfig.json 설정

{
  "compilerOptions": {
    "target": "ESNext",
    "jsx": "react-jsx",
    "module": "commonjs",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true
  }
}

해당 부분에 대한 정리글은 다음에 한번 더 쓸 계획이다. 

 

결과 

https://github.com/SeoJaeWan/Express-TypeScript

 

GitHub - SeoJaeWan/Express-TypeScript

Contribute to SeoJaeWan/Express-TypeScript development by creating an account on GitHub.

github.com

 

반응형