Typescript를 사용하여 노드 항목 설정하는 방법

소개

Node은 run-time 환경으로 서버 측의 JavaScript을 작성할 수 있다.2011년 발표된 이래로 그것은 이미 광범위하게 채택되었다.자바스크립트 언어 dynamic과 weak typed의 성격 때문에 코드 라이브러리가 증가함에 따라 서버 측의 자바스크립트 작성은 도전적일 수 있다.
다른 언어에서 온 자바스크립트 개발자들은 자바스크립트가 강력한 정적 유형이 부족하다고 불평하지만, 이것이 바로 TypeScript의 용무지이다.
TypeScript은 형식화된 자바스크립트 초집합으로 대형 자바스크립트 프로젝트를 구축하고 관리하는 데 도움을 줄 수 있다.이것은 자바스크립트로 여겨질 수 있으며, 강력한 정적 유형, 컴파일, 대상 프로그래밍 등 추가 기능을 가지고 있다.
참고: 기술적으로 TypeScript는 JavaScript의 초집합입니다. 이것은 모든 JavaScript 코드가 유효한 TypeScript 코드라는 것을 의미합니다.
다음은 TypeScript 사용의 이점입니다.

정적 입력 옵션.

유형 추정.

의 인터페이스 사용 능력.

이 강좌에서는 TypeScript를 사용하여 노드 항목을 설정합니다.TypeScript를 사용하여 Express 응용 프로그램을 구축하고 이를 아래로 JavaScript 코드로 변환합니다.

선결 조건

이 안내서를 시작하기 전에 노드가 필요합니다.js가 시스템에 설치되어 있습니다.운영 체제의 How to Install Node.js and Create a Local Development Environment 지침을 따를 수 있습니다.

단계 1 - 항목 초기화

시작하려면 node_project이라는 새 폴더를 만들고 디렉토리로 이동합니다.

mkdir node_project
cd node_project

다음은 npm 프로젝트로 초기화합니다.

npm init -y

-y 플래그가 npm init에게 기본값에 대해 자동으로 "예"라고 알려줍니다.이 정보는 나중에 package.json 파일에서 언제든지 업데이트할 수 있습니다.

2단계 - TypeScript 컴파일러 구성

이제 npm 프로젝트가 초기화되어 TypeScript를 설치하고 설정할 수 있습니다.
프로젝트 디렉토리에서 다음 명령을 실행하여 TypeScript를 설치합니다.

npm install --save-dev typescript

Output
added 1 package, and audited 2 packages in 1s

found 0 vulnerabilities

TypeScript는 tsconfig.json이라는 파일을 사용하여 프로젝트의 컴파일러 옵션을 구성합니다.프로젝트 디렉토리의 루트 디렉토리에 tsconfig.json 파일을 만듭니다.

nano tsconfig.json

다음 JSON을 붙여넣습니다.
t 구성json

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist"
  },
  "lib": ["es2015"]
}

위의 JSON 세션에서 몇 가지 키를 살펴보겠습니다.

module: 모듈 코드 생성 방법을 지정합니다.노드는 commonjs을 사용합니다.

target: 출력 언어 수준을 지정합니다.

moduleResolution: 컴파일러가 가져온 인용 내용을 찾아내는 데 도움이 됩니다.값 node 아날로그 노드 모듈 분석 메커니즘.

outDir: 전송 후 .js 파일을 출력하는 위치입니다.이 강좌에서 dist으로 저장합니다.

사용 가능한 관건적인 가치 옵션을 한층 더 이해하기 위해 정부 TypeScript documentation은 모든 옵션에 대한 설명을 제공했다.

3단계 - 최소 TypeScript Express 서버 만들기

이제 Express 프레임워크를 설치하고 최소한의 서버를 만들 때가 되었습니다.

npm install --save [email protected]
npm install -save-dev @types/[email protected]

두 번째 명령은 TypeScript에서 지원하는 Express 유형을 설치합니다.TypeScript의 유형은 파일이며 일반적으로 확장자는 .d.ts입니다.이 파일들은 이 예에서 Express 프레임워크에 대한 API 유형 정보를 제공하는 데 사용됩니다.
이 패키지는 TypeScript 및 Express가 별도의 패키지이기 때문에 필요합니다.@types/express 패키지가 없으면 TypeScript에서 Express 클래스의 유형을 알 수 없습니다.
다음은 프로젝트 디렉터리의 루트 디렉터리에 src 폴더를 만듭니다.

mkdir src

그런 다음 app.ts이라는 TypeScript 파일을 생성합니다.

nano src/app.ts

선택한 텍스트 편집기를 사용하여 app.ts 파일을 열고 다음 코드 세그먼트에 붙여넣습니다.
src/응용 프로그램.ts

import express from 'express';
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  return console.log(`Express is listening at http://localhost:${port}`);
});

위의 코드는 노드 서버를 만듭니다. 이 서버는 포트 3000에서 요청을 정탐합니다.응용 프로그램을 실행하려면 다음 명령을 사용하여 JavaScript로 컴파일해야 합니다.

npx tsc

이것은 우리가 이전 단계에서 만든 프로필을 사용하여 코드를 컴파일하고 결과를 어디에 두는지 결정합니다.예를 들어, JavaScript는 dist 디렉토리로 내보내집니다.node을 사용하여 JavaScript 출력을 실행하려면:

node dist/app.js

실행에 성공하면 터미널에 메시지를 기록합니다.

Output
Express is listening at http://localhost:3000

현재 브라우저에서 http://localhost:3000 에 액세스할 수 있으며 다음과 같은 메시지가 표시됩니다.

Output
Hello World!

dist/app.js 파일을 열면 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 = (0, express_1.default)();
const port = 3000;
app.get('/', (req, res) => {
    res.send('Hello World!');
});
app.listen(port, () => {
    return console.log(`Express is listening at http://localhost:${port}`);
});
//# sourceMappingURL=app.js.map

이제 노드 항목이 TypeScript 사용으로 설정되었습니다.다음은 TypeScript 코드에 오류가 있는지 확인하기 위해 eslint linter를 설정합니다.

단계 4 - eslint를 사용하여 Typescript Linting 구성

이제 프로젝트에 대해 TypeScript linting을 구성할 수 있습니다.우선 eslint을 사용하여 npm을 설치합니다.

npm install --save-dev eslint

그런 다음 eslint의 초기화 명령을 실행하여 상호 작용으로 항목을 설정합니다.

npx eslint --init

이것은 너에게 일련의 문제를 물어볼 것이다.이 프로젝트의 경우 다음 질문에 답변합니다.

ESLint를 어떻게 사용하시겠습니까?:문법 검사 및 문제 찾기

프로젝트는 어떤 종류의 모듈을 사용합니까?:JavaScript 모듈(가져오기/내보내기)

프로젝트는 어떤 프레임워크를 사용합니까?:이게 다

이 아니에요.

프로젝트에서 TypeScript를 사용하십니까?:

입니다.

코드는 어디에서 실행됩니까?:노드

프로필의 형식은 무엇입니까?JavaScript

마지막으로, 추가 eslint 라이브러리를 설치하라는 메시지가 표시됩니다.Yes을 선택합니다.프로세스가 완료되면 다음 구성 파일이 제공됩니다.
eslintrc.회사 명

module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint'],
  rules: {},
}

linter를 실행하여 .ts의 확장자를 가진 모든 파일을 확인합니다.

npx eslint . --ext .ts

TypeScript 구문을 확인하기 위해 eslint linter를 설정했습니다.다음 npm 설정을 업데이트하여linting과 실행 프로젝트에 편리한 스크립트를 추가합니다.

단계 5 - 패키지를 업데이트합니다.json 파일

일반적으로 실행되는 명령행 작업을 npm scripts에 넣으면 유용할 수 있습니다.npm 스크립트는 package.json 파일에 정의되어 있으며 명령 npm run your_script_name을 사용하여 실행할 수 있습니다.
이 단계에서 TypeScript 코드를 전송하고 생성된 start 응용 프로그램을 실행하는 .js 스크립트를 추가합니다.
TypeScript 파일에 eslint linter를 실행하기 위해 lint 스크립트를 추가합니다.package.json 파일을 열고 업데이트합니다.
소포json

{
  "name": "node_project",
  "version": "1.0.0",
  "description": "",
  "main": "dist/app.js",
  "scripts": {
    "start": "tsc && node dist/app.js",
    "lint": "eslint . --ext .ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.17.1",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "eslint": "^8.3.0",
    "typescript": "^4.5.2"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

위의 코드 세그먼트에서 main 경로를 컴파일된 응용 프로그램 출력으로 업데이트하고 start과 lint 명령을 scripts 부분에 추가합니다.start 명령을 보면 tsc 명령을 먼저 실행하고 node 명령을 실행하는 것을 볼 수 있습니다.이것은 node을 컴파일하여 생성된 출력을 실행합니다.lint 명령은 우리가 이전 단계에서 실행한 명령과 같지만 npx 접두사를 사용하지 않았습니다. 이것은 상하문에서 필요하지 않습니다.

결론

이 강좌에서는 신뢰할 수 있는 JavaScript 코드를 작성하는 데 왜 TypeScript가 유용한지 이해했습니다.TypeScript 사용의 이점도 살펴보았습니다.
마지막으로 Express 프레임워크를 사용하여 노드 항목을 설정했지만 TypeScript를 사용하여 항목을 컴파일하고 실행했습니다.