Node with Ts - simple express

jhj46456·2020년 4월 25일
0

Ts-Node

목록 보기
1/2

❗❗ Typescript 관련 내용만 다룹니다. (Node에 대한 상세한 설명은 없음)

진행에 앞서, 우선 설치할 것이 하나 있습니다.

npm i typescript -g

Setup

우선 package.json을 만들어줍니다.

npm init

그런 다음, tsconfig.json을 만들어줍니다.

tsc --init
✅ 생성된 tsconfig.json에 모든 옵션의 설명이 적혀 있습니다.

다음은 본인이 node로 작업할 때 사용하는 설정입니다.

{
    "compilerOptions": {
        "target": "es5", 👈 es5로 컴파일 하겠다는 내용
        "module": "commonjs",
        "sourceMap": true, 👈 sourceMap 생성
        "outDir": "./build", 👈 컴파일된 directory의 위치 지정
        "strict": true, 👈 모든 strict type-checking 활성화
        "moduleResolution": "node", 👈 모듈을 읽는 방식을 node로 변경
        "esModuleInterop": true, 👈 'import * as express from "express'의 의미를 알아야함.
    },
    "include": ["src/**/*"]
}

Simple express server

기본 설정은 다 끝났으니 JS 방법대로 서버를 구축하면서 Typescript로 바꿔 보겠습니다.

다음의 설치가 필요합니다.

npm i nodemon ts-node -D
npm i typescript express morgan

@types/~

❗❗ @types/~ 패키지에 대한 설명은 하지 않습니다.

이제 src/index.ts에 늘 하던 것처럼 코드를 작성 해봅니다.

import 과정에서 express는 에러가 없는데, morgan은 에러가 납니다.

빨간 밑줄에 커서를 올려보면 다음과 같은 문구를 보여줍니다.

Could not find a declaration file for module 'morgan'. 'c:/Users/jhj46/Documents/larry-node-ts/node_modules/morgan/index.js' implicitly has an 'any' type.
Try `npm install @types/morgan` if it exists or add a new declaration (.d.ts) file containing `declare module 'morgan';`ts(7016)

컴퓨터가 지시한 대로 패키지를 설치 해줍니다.

npm i @types/morgan

이제 에러가 사라집니다.

@types/...를 설치하면서 변경된 부분이 있습니다.

무려 자동완성이 됩니다.

Typing

패키지를 설치해서 사용하는데, 아래와 같이 Error를 뿜뿜하지 않는다면 typing은 안해줘도 무방합니다.

이 부분은 취향이긴 하지만 type을 넣는 쪽으로 만들어 보겠습니다.

req, res에 express의 interface를 꺼내서 넣어줍니다.

커스텀 미들웨어를 사용하는 경우 다음과 같이 만듭니다.

app.use((req: Request, res: Response, next: NextFunction) => {
    next();
});

Script

이제 실행을 하기위해 script를 작성합니다.

"scripts": {
    "start": "nodemon -e ts --exec ts-node src"
},

이제 npm start를 입력하면 서버가 실행이 됩니다.

profile
리액뚜

0개의 댓글