[ Typescript + express ] 프로젝트 생성

shelly·2021년 1월 12일
0

Typescript+express

목록 보기
1/3

환경 설정


package.json 생성

yarn init --yes

express 설치

yarn add express@4.17.1
yarn add -D @types/express

typescript 글로벌 설치

yarn global add typescript
  • typescript를 global로 설치해야 tsc 를 사용할 수 있다.
  • 글로벌로 하지 않고 하는 방법도 있긴한데, 그냥 난 글로벌로할래..

typescript 및 서버를 위한 설치

yarn add -D ts-node nodemon @types/node
  • -D (—dev) : devDependencies에 기술
  • npm —save vs —save-dev

tsconfig.json 생성

tsc --init
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "rootDir": "./",
    "outDir": "./dist",
    "esModuleInterop": true,
    "strict": true
  }
}
  • targe
    ES 문법

  • module
    컴파일된 javascript code 코드에서 modue manager를 사용하기 위한 설정. Node는 기본으로 commonjs을 사용한다.

  • rootDir
    프로젝트 내에 TS 파일이 어디에 있는지 지정

  • outDir
    컴파일된 코드의 결과물을 어디에 저장할지 지정

  • esModuleInterop
    ES6 모듈을 commonjs로 컴파일가능하게 함

  • stric
    type-chicking 옵션

시작하기


🗂 src/App.ts 생성

import express from 'express';

class App {
  public application: express.Application;

  constructor() {
    this.application = express();
    this.router();
  }

  private router(): void {
    this.application.get('/', (req: express.Request, res: express.Response) => {
      res.send('hello!');
    })
  }
}

export default App;

🗂️ src/server.ts 생성

import App from './App';

const app = new App().application;

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

package.json 에서 서버를 실행하는 스크립트 추가

"scripts": {
	"start": "nodemon --exec ts-node src/index.ts"
}

실행하기

yarn start

0개의 댓글