[Node.js] TypeScript 와 Express

2022. 10. 18. 12:33·Node.js/실험실
반응형

이번에는 타입스크립트와 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

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'Node.js > 실험실' 카테고리의 다른 글

Node.js Docker로 배포하기  (0) 2024.12.11
[Node] Google Analytics 데이터 불러오기  (0) 2023.08.10
[Node.js] Express ORM 세팅해보기  (0) 2022.10.09
[Node.js] Express에 Webpack 구현하기  (1) 2022.09.28
[Node.js] Express set "views"  (2) 2022.09.26
'Node.js/실험실' 카테고리의 다른 글
  • Node.js Docker로 배포하기
  • [Node] Google Analytics 데이터 불러오기
  • [Node.js] Express ORM 세팅해보기
  • [Node.js] Express에 Webpack 구현하기
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    리얼학습일기
    next.js
    typescript
    ChatGPT
    바질 키우기
    다이소
    CCNA
    네이버 부스트캠프
    덤프
    redux
    네트워크
    Babel
    javascript
    ReactNative
    프로그래머스
    영어회화
    타일러영어
    타입스크립트
    영어독학
    리얼클래스
    알고리즘
    CSS
    Node.js
    리액트
    식물
    바질
    Docker
    react
    자바스크립트
    webpack
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
[Node.js] TypeScript 와 Express
상단으로

티스토리툴바