이 글에서, 나는 네가 자바스크립트 대신 TypeScript를 사용한다고 주장하지 않을 것이며, TypeScript가 자바스크립트보다 어떻게 우수한지 이야기하지도 않을 것이다.
이 문서에서는 TypeScript를 사용하여 노드 및 Express 서버를 구축하는 방법에 대해 설명합니다.그래서 어떤 언어가 더 좋은지, 어떤 언어가 나쁜지 상관없이 타자만 배우고 싶다면 따라 배워라.

우리 시작하자.🤓

프로젝트 초기화

선택한 폴더로 이동하여 해당 폴더의 터미널을 엽니다.현재 npm 를 사용하여 새 프로젝트를 초기화합니다.

cd code/
mkdir node-typescript-demo
npm init -y

-y 플래그는 모든 기본값을 사용하는 데 사용됩니다.값을 수동으로 입력하려면 이 옵션을 무시할 수 있습니다.

현재 프로젝트 디렉터리에 package.json 파일이 있어야 합니다.

{
  "name": "node-typescript-demo",
  "version": "1.0.0",
  "description": "",
  "main": "server.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Soumya Dey",
  "license": "MIT"
}

프로젝트 디렉터리의 루트 디렉터리에 주 파일을 만듭니다 server.ts.선택한 코드 편집기에서 항목을 엽니다.Visual Studio 코드를 사용하겠습니다.

touch server.ts
code . 

종속성 설치

이제 서버에 필요한 모든 의존 항목을 설치합니다.express 및 typescript를 설치합니다.

npm i express typescript

형식 스크립트 형식의express와node버전이 있어야 형식을 식별할 수 있습니다.또한 터미널에서 TypeScript로 직접 작성한 개발 서버를 실행하려면 ts-node라는 패키지가 필요합니다.

npm i -D @types/node @types/express ts-node

서버 시작 및 실행

이제 서버에 실행할 코드를 추가합니다.
편집기에서 server.ts 파일을 열고express 프로그램을 만듭니다.서버를 실행하기 위해 다음 코드를 추가합니다.

import express from "express";

const app = express();

const PORT = process.env.PORT || 4000;

app.get("/", (req, res) => res.send("Hello from server!"));

app.listen(PORT, () => console.log(`⚡Server is running here 👉 https://localhost:${PORT}`));

하지만 서버를 실행하기 전에 마지막으로 해야 할 일이 있습니다.
코드를 정확하게 컴파일하기 위해 typescript에 config 파일을 만들어야 합니다.
개발자 서버 프로젝트의 루트 디렉터리에 tsconfig.json 파일을 만들고 다음 코드 줄을 추가합니다.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "rootDir": "./",
    "outDir": "./build",
    "esModuleInterop": true,
    "strict": true
  }
}

compilerOptions는 필수 필드입니다.위 구성에 사용된 옵션은 다음과 같습니다.

target 컴파일러가 내보낼 대상 JavaScript 버전을 지정할 수 있습니다.

module 컴파일된 JavaScript 코드에서 모듈 관리자를 사용할 수 있습니다.지원commonjs - 노드의 표준 구성입니다.js.

rootDir는 TypeScript 파일의 노드 내 위치를 지정하는 옵션입니다.js 프로젝트.

outDir 컴파일된 출력의 위치를 지정합니다.

esModuleInterop ES6 모듈을 commonjs 모듈로 컴파일할 수 있습니다.

strict는 엄격한 유형 검사 옵션을 사용하는 옵션입니다.

TypeScript 컴파일러에 추가 구성 옵션을 추가할 수 있지만 이 옵션은 지정된 기본 구성 옵션으로 시작하도록 도와줍니다.
이제 터미널을 열고 다음 명령을 입력하여 서버를 시작합니다.nodemon를 사용하여 파일 변경 사항을 모니터링합니다.명령nodemon을 사용하여 컴퓨터에 전역적으로 설치할 수 있습니다npm i -g nodemon.
그것을 사용하려면 server 파일에 package.json 스크립트를 추가할 수 있습니다.

"scripts": {
    "server": "nodemon server.ts"
  },

이제 server 스크립트로 서버를 시작합니다.

npm run server

오류가 없으면 터미널에서 이 출력을 보아야 합니다.

[nodemon] 2.0.6
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node server.ts`
⚡Server is running here 👉 https://localhost:4000

이제 브라우저에서 https://localhost:4000를 열면 다음 화면이 표시됩니다.
nodemon를 사용하면 파일이 변경되면 자동으로 서버를 다시 시작합니다.

이것이 바로 당신의 node js 서버입니다. 이것은 TypeScript로 실행되며 매우 훌륭합니다.

TypeScript 항목 컴파일

TypeScript 항목을 유효한 JavaScript 항목으로 컴파일하려면 먼저 build 파일에 package.json라는 새 스크립트를 선언합니다.

"scripts": {
    "server": "nodemon server.ts",
    "build": "tsc --project ./"
  },

TypeScript는 tsc라는 코드를 컴파일하는 명령을 제공합니다.이 명령은 컴파일할 내용을 지정하기 위해 로고가 필요합니다.

--project(줄임말: -p)는 프로젝트 디렉터리를 지정하는 데 사용되며, 컴파일러는 코드 파일을 선택하여 유효한 자바스크립트로 컴파일할 수 있습니다.

루트 항목을 지정합니다.

터미널 창에서 실행 ./ 명령 컴파일 코드

npm run build

현재 프로젝트 디렉터리의 루트 디렉터리에 build 라는 폴더가 있습니다.
폴더를 열면 JavaScript로 컴파일된 TypeScript 코드가 포함된 파일을 볼 수 있습니다.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const express_1 = __importDefault(require("express"));
const app = express_1.default();
const PORT = process.env.PORT || 4000;
app.get("/", (req, res) => res.send("Hello from server!"));
app.listen(PORT, () => console.log(`⚡Server is running here 👉 https://localhost:${PORT}`));

build 파일에 속성 값outDir이라는 다른 디렉토리를 지정하면 해당 디렉토리의 이름이 tsconfig.json 대신 여기에 반영됩니다.

소스 코드

너는 이곳에서 최종 원본 코드를 얻을 수 있다👉 @Soumya-Dey/node-typescript-server-demo
읽어주셔서 감사합니다.만약 네가 이 문장을 좋아한다면, 사랑을 표현해야 한다.
Follow me on github .
이 글에 대한 당신의 견해를 평론에서 공유하는 것을 잊지 마세요.