TypeScript로 Node Express API 설정(2021)

이 튜토리얼은 TypeScript로 Node express API를 빠르게 설정하는 데 도움이 됩니다.

여기서 수행한 모든 단계는 내 Github 저장소를 통해 복제할 수 있습니다https://github.com/roycechua23/node-express-typescript-starter.

프로덕션에 대한 중요 참고 사항: 이 블로그는 개발자의 삶을 보다 간단하게 만들기 위한 것입니다. 따라서 프로덕션 빌드가 아닌 초기 설정에 중점을 둡니다. 프로덕션 빌드의 경우 여전히 tsc를 사용하여 JS로 트랜스파일해야 합니다.

  "scripts": {
    "start:dev": "ts-node-dev ./index.ts",
    "start": "tsc && node ./lib/index.js",
  },

lib는 dist 또는 이 블로그의 뒷부분에서 다룰 TypeScript 구성 파일(tsconfig.json)에 있는 "outputDir"로 대체할 수 있습니다.

1. 전제조건

이 블로그의 경우 아무런 문제 없이 작동하려면 컴퓨터에 Node.js(v10+)가 설치되어 있어야 합니다.

초기 폴더 및 package.json 생성

터미널을 열고 다음을 사용하여 폴더와 package.json을 만듭니다.

mkdir node-express-typescript-starter && npm init 

요구되는 모든 정보를 작성하십시오. 진입점을 index.ts로 설정하고 다른 정보에 적절한 값을 자유롭게 제공하십시오.

2. 종속성 설치

npm을 사용하여 다음 종속 항목을 설치해야 합니다.

npm install typescript --save-dev
npm install ts-node-dev --save-dev
npm install express 
npm install @types/express --save-dev
npm install @types/node --save-dev

이것은 최소한의 설정에만 해당됩니다. ts-node-dev 종속성은 .ts 파일을 컴파일한 다음 .js 파일을 실행하는 대신 계속해서 .ts 파일을 직접 다시 컴파일하고 실행합니다. .js 파일 전용인 nodemon을 대체할 것입니다.

3. tsconfig.json 파일 생성

다음 명령을 사용하여 TypeScript 구성 파일을 만들 수 있습니다.

npx tsc --init

이렇게 하면 기본 설정으로 자동으로 tsconfig.json이 생성됩니다(언제든지 변경할 수 있음).

4. package.json에서 스크립트 수정

코드 편집기 또는 IDE를 사용하여 아래와 같이 키워드와 값을 포함하도록 package.json에서 스크립트를 수정합니다.

  "scripts": {
    "start": "ts-node-dev ./index.ts"
  },

지금은 테스트 키를 제거할 수 있습니다.

5. index.ts 파일 생성

코드 편집기를 사용하여 index.ts 파일을 만들고 샘플 코드를 복사하여 붙여넣습니다.

import express, { Application, Request, Response } from "express";

const app: Application = express();
const port = 3000;

// Body parsing Middleware
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.get(
    "/",
    async (req: Request, res: Response): Promise<Response> => {
        return res.status(200).send({
            message: "Hello World!",
        });
    }
);

try {
    app.listen(port, (): void => {
        console.log(`Connected successfully on port ${port}`);
    });
} catch (error) {
    console.error(`Error occured: ${error.message}`);
}

6. 코드 실행

Node express API를 실행하려면 다음 명령을 실행하십시오.

npm run start

이제 콘솔에 "Connected successful on port 3000"메시지가 표시되어야 합니다.

"Error: listen EADDRINUSE: address already in use:::3000"오류가 발생하면 현재 포트 3000에서 실행 중인 다른 서비스(예: React 앱, 기타 Node.js 앱 등)가 있음을 의미합니다.

localhost:3000에 대한 GET 요청으로 브라우저 또는 Postman을 열어 이를 테스트하십시오.

6. 코드 수정 시도

반환 메시지 "Hello World!"를 수정해 보십시오. 당신이 좋아하는 어떤 메시지에. 노드 서버가 자동으로 다시 시작되며 다시 시도하여 변경 사항을 확인할 수 있습니다.

축하합니다. 이제 추가적인 복잡한 작업 없이 TypeScript로 Node Express API를 성공적으로 설정했습니다.

이 게시물에 반응하여 지원해 주시면 대단히 감사하겠습니다. 나에게 커피를 사주는 것은 많은 것을 의미할 것이다
https://www.buymeacoffee.com/royce.chua