Typescript로 노드 프로젝트를 설정하는 방법

소개

약한 유형.

다른 언어에서 JavaScript를 사용하는 개발자는 종종 강력한 정적 타이핑이 부족하다고 불평하지만 TypeScript가 이 격차를 해소하기 위해 그림에 등장하는 곳입니다.

TypeScript는 대규모 JavaScript 프로젝트를 구축하고 관리하는 데 도움이 되는 유형이 지정된(선택 사항) JavaScript 상위 집합입니다. 강력한 정적 타이핑, 컴파일 및 객체 지향 프로그래밍과 같은 추가 기능이 있는 JavaScript로 생각할 수 있습니다.

참고: TypeScript는 기술적으로 JavaScript의 상위 집합입니다. 즉, 모든 JavaScript 코드는 유효한 TypeScript 코드입니다.

다음은 TypeScript 사용의 몇 가지 이점입니다.

선택적 정적 유형.
유형 추론.
인터페이스 사용 능력.

이 튜토리얼에서는 TypeScript를 사용하여 노드 프로젝트를 설정합니다. TypeScript를 사용하여 Express 애플리케이션을 빌드하고 JavaScript 코드로 트랜스파일합니다.

전제 조건

이 가이드를 시작하기 전에 시스템에 Node.js가 설치되어 있어야 합니다. 운영 체제에 대한 Node.js 설치 방법 및 로컬 개발 환경 생성 방법 가이드에 따라 이를 수행할 수 있습니다.

1단계 - 프로젝트 초기화

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

mkdir node_project
cd node_project

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

npm init -y

-y 플래그는 npm init에 자동으로 "yes\를 기본값으로 말하도록 지시합니다. 이 정보는 나중에 package.json 에서 언제든지 업데이트할 수 있습니다. 파일.

2단계 - TypeScript 컴파일러 구성

이제 npm 프로젝트가 초기화되었으므로 TypeScript를 설치하고 설정할 준비가 되었습니다.

프로젝트 디렉터리 내에서 다음 명령을 실행하여 TypeScript를 설치합니다.

npm install --save-dev typescript

Outputadded 1 package, and audited 2 packages in 1s

found 0 vulnerabilities

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

nano tsconfig.json

그런 다음 다음 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 문서에서 모든 옵션에 대한 설명을 제공합니다.

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

이제 Express 프레임워크를 설치하고 최소 서버를 만들 차례입니다.

npm install --save express@4.17.1
npm install -save-dev @types/express@4.17.1

두 번째 명령은 TypeScript 지원을 위해 Express types를 설치합니다. TypeScript의 유형은 일반적으로 확장자가 .d.ts인 파일입니다. 파일은 API(이 경우에는 Express 프레임워크)에 대한 유형 정보를 제공하는 데 사용됩니다.

TypeScript와 Express는 독립적인 패키지이기 때문에 이 패키지가 필요합니다. @types/express 패키지가 없으면 TypeScript가 Express 클래스 유형에 대해 알 수 있는 방법이 없습니다.

다음으로 프로젝트 디렉터리의 루트에 src 폴더를 만듭니다.

mkdir src

그런 다음 그 안에 app.ts라는 TypeScript 파일을 만듭니다.

nano src/app.ts

선택한 텍스트 편집기로 app.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

성공적으로 실행되면 메시지가 터미널에 기록됩니다.

OutputExpress is listening at http://localhost:3000

이제 브라우저에서 http://localhost:3000을 방문하면 다음 메시지가 표시됩니다.

OutputHello 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를 사용하도록 노드 프로젝트를 성공적으로 설정했습니다. 다음으로 eslint linter를 설정하여 TypeScript 코드의 오류를 확인합니다.

4단계 - eslint로 Typescript Linting 구성

이제 프로젝트에 대한 TypeScript Linting을 구성할 수 있습니다. 먼저 npm을 사용하여 eslint를 설치합니다.

npm install --save-dev eslint

그런 다음 eslint의 초기화 명령을 실행하여 프로젝트를 대화식으로 설정합니다.

npx eslint --init

이것은 당신에게 일련의 질문을 할 것입니다. 이 프로젝트에 대해 다음과 같이 대답합니다.

ESLint를 어떻게 사용하시겠습니까?: 구문을 확인하고 문제를 찾으려면
프로젝트에서 사용하는 모듈 유형은 무엇입니까?: 자바스크립트 모듈(가져오기/내보내기)
프로젝트에서 어떤 프레임워크를 사용합니까?: 해당 없음
프로젝트에서 TypeScript를 사용합니까?: 예
코드는 어디에서 실행됩니까?: 노드
어떤 형식의 구성 파일을 원하십니까?: JavaScript

마지막으로 일부 추가 eslint 라이브러리를 설치하라는 메시지가 표시됩니다. 예를 선택합니다. 프로세스가 완료되고 다음 구성 파일이 남게 됩니다.

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 TypeScript 확장자를 가진 모든 파일을 확인합니다.

npx eslint . --ext .ts

이제 TypeScript 구문을 확인하기 위해 eslint linter를 설정했습니다. 다음으로 npm 구성을 업데이트하여 프로젝트 린팅 및 실행을 위한 몇 가지 편리한 스크립트를 추가합니다.

5단계 - package.json 파일 업데이트

일반적으로 실행되는 명령줄 작업을 npm 스크립트에 넣는 것이 유용할 수 있습니다. npm 스크립트는 package.json 파일에 정의되어 있으며 npm run your_script_name 명령으로 실행할 수 있습니다.

이 단계에서는 TypeScript 코드를 트랜스파일한 다음 결과 .js 애플리케이션을 실행할 start 스크립트를 추가합니다.

TypeScript 파일에서 eslint linter를 실행하는 lint 스크립트도 추가합니다.

package.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 명령을 추가했습니다.

start 명령을 보면 먼저 tsc 명령이 실행된 다음 node 명령이 실행되는 것을 볼 수 있습니다. 이렇게 하면 node로 생성된 출력이 컴파일되고 실행됩니다.

lint 명령은 이 컨텍스트에서 필요하지 않은 npx 접두사 사용을 제외하고 이전 단계에서 실행한 것과 동일합니다.

결론

이 자습서에서는 TypeScript가 신뢰할 수 있는 JavaScript 코드를 작성하는 데 유용한 이유에 대해 배웠습니다. 또한 TypeScript로 작업할 때 얻을 수 있는 몇 가지 이점에 대해서도 배웠습니다.

마지막으로 Express 프레임워크를 사용하여 Node 프로젝트를 설정했지만 TypeScript를 사용하여 프로젝트를 컴파일하고 실행했습니다.