TypeScript + Express 간단한 초기 환경설정

TypeScript + Express 간단한 초기 환경설정

환경설정은 정말 하기 귀찮다.

자꾸 잊어버려 기록을 해보자

우선 필요한 모듈을 설치하자. 먼저 다음의 명령어를 입력한다.

npm init

엔터를 계속 치고 package.json 파일이 생성된다.

개발에 필요한 의존 모듈을 설치해야 한다.

npm i --save -D @types/express nodemon ts-node typescript

-D는 개발용 의존 모듈 옵션이다.

아니면 package.json 스크립트를 복사하고 npm i 명령어를 입력해도 된다.

{ "name": "practice", "version": "1.0.0", "description": "", "main": "src/App.ts", "scripts": { "start": "node dist/App.js", "dev": "nodemon src/App.ts", "build": "tsc -p ." }, "author": "", "license": "ISC", "devDependencies": { "@types/express": "^4.17.13", "nodemon": "^2.0.13", "ts-node": "^10.2.1", "typescript": "^4.4.3" }, "dependencies": { "express": "^4.17.1" } }

script 키값을 보면 각 명령어에 따라 쉘스크립트를 작성하여 실행할 수 있다.

start : node dist/App.js -> dist 폴더에 App.js를 실행

dev : node src/App.ts -> typescript 파일을 컴파일하지않고 바로 실행

build : tsc -p -> typescript 파일을 javascript 파일로 컴파일

그럼 이제 dist 폴더와 src 폴더를 생성하자 이건 나 편하라고 임의로 폴더를 설정해 놓은것.

tsconfig.json 파일을 생성해주자

{ "compilerOptions": { "target": "es6", "module": "commonjs", "outDir": "./dist", // 컴파일된 경로 지정 "rootDir": "./src", // 컴파일할 대상 root 지정 "noImplicitAny": true, "strict": true, "moduleResolution": "node", "esModuleInterop": true }, "exclude": [ "node_modules" ], "include": [ "./**/*" ] }

여러 옵션은 많은 레퍼런스가 있으니 참고하고 우선 중요한 outdDir rootDir 옵션은 말그대로

outDir는 javascript로 컴파일된 파일이 들어갈 경로이고 rootDir는 typescript를 컴파일할 시작점이다.

exclude는 js 로 컴파일하지 않을 폴더를 설정한다. node_modules는 워낙 방대한 파일이 있으므로 제외 1순위

간단한 노드웹서버를 typescript로 작성해보자

import express, {Request, Response , NextFunction} from 'express'; const app: express.Application = express(); const port: string = process.env.PORT || '8765'; app.get('/', async(request:Request, response:Response, next:NextFunction) => { response.status(200).send('typescript + express'); }); app.listen(port, () => { console.log(`start server ${port}`); });

npm run dev

위 명령어로 js로 컴파일 하지 않고도 개발모드로 실행할 수 있다.

npm run build

build 명령어를 입력하면 tsconfig.json에 설정해놓았던 루트디렉토리에서 시작하여 ts 파일을 js로 컴파일한다.

그럼 dist 폴더에 js파일이 그대로 생성된다.

from http://wakanda-developer.tistory.com/18 by ccl(A) rewrite - 2021-09-26 18:26:31