[Node.js] TypeScript 와 Express

2022. 10. 18. 12:33·Node.js/실험실
목차
  1. Express 프로젝트 생성
  2. 패키지 설치 
  3. package.json 설정 
  4. tsconfig.json 설정
  5. 결과 
반응형

이번에는 타입스크립트와 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
  1. Express 프로젝트 생성
  2. 패키지 설치 
  3. package.json 설정 
  4. tsconfig.json 설정
  5. 결과 
'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)
  • 태그

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

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.