Настройка проекта Node.js при помощи Typescript

23 января, 2021 11:35 дп 1 350 views | Комментариев нет

, | | Комментировать запись

Node.js – среда выполнения, которая позволяет писать JavaScript для серверной стороны. Она широко используется с момента выпуска в 2011 году. Написание серверного кода JavaScript может оказаться задачей не из простых, поскольку из-за динамичной и слабо типизированной природы языка JavaScript кодовая база быстро растет.

Разработчики, переходящие на JavaScript с других языков, часто жалуются на отсутствие сильной статической типизации – и восполнить этот пробел нам поможет TypeScript.

TypeScript – это типизированный (опциональный) расширенный набор JavaScript, который предназначен для управления крупномасштабными проектами JavaScript. Его можно рассматривать как JavaScript с дополнительными функциями, среди которых строгая статическая типизация, компиляция и объектно-ориентированное программирование.

Примечание: Технически TypeScript является расширенным набором JavaScript, а это означает, что весь код JavaScript является допустимым для TypeScript.

Вот некоторые преимущества использования TypeScript:

  • Статическая типизация (опционально).
  • Вывод типа.
  • Возможность использовать интерфейсы.

В этом мануале мы настроим проект Node.js при помощи TypeScript. Для этого нам нужно создать тестовое приложение Express с помощью TypeScript, а затем преобразовать его в удобный и надежный код JavaScript.

Требования

Прежде чем приступить к работе с этим мануалом, вам нужно установить Node.js на ваш компьютер. Сделать это вам поможет наш Информаторий:

1: Инициализация проекта npm

Для начала создайте папку по имени node_project и перейдите в нее:

mkdir node_project

cd node_project

Инициализируйте проект npm с помощью команды:

npm init

После запуска npm init нужно предоставить npm информацию о проекте. Если вы хотите, чтобы npm принял значения по умолчанию, вы можете добавить в команду флаг y, чтобы пропустить запросы дополнительной информации:

npm init -y

Теперь, когда мы настроили рабочее пространство проекта, можно перейти к установке зависимостей.

2: Установка зависимостей

После инициализации тестового проекта npm мы установим ряд зависимостей, необходимых для запуска TypeScript.

запустите следующие команды из каталога вашего проекта, чтобы установить нужные пакеты:

npm install -D typescript@3.3.3

npm install -D tslint@5.12.1

Флаг -D – это сокращение для –save-dev. Узнать больше об этом флаге можно в документации npmjs.

Теперь можно установить платформу Express:

npm install -S express@4.16.4

npm install -D @types/express@4.16.1

Вторая команда устанавливает типы Express, необходимые для поддержки TypeScript. Типы в контексте TypeScript – это файлы (обычно с расширением .d.ts), которые используются для предоставления информации об API, в данном случае о платформе Express.

Этот пакет необходим, потому что TypeScript и Express – независимые пакеты. Без пакета @types/express TypeScript не сможет распознать типы классов Express.

3: Настройка TypeScript

В этом разделе мы настроим TypeScript и проверку соблюдения стандартов кодирования для него. Для настройки параметров компилятора проекта TypeScript использует файл tsconfig.json. Создайте tsconfig.json в корневом каталоге проекта и вставьте следующий фрагмент:

{

  "compilerOptions": {

    "module": "commonjs",

    "esModuleInterop": true,

    "target": "es6",

    "moduleResolution": "node",

    "sourceMap": true,

    "outDir": "dist"

  },

  "lib": ["es2015"]

}

Давайте рассмотрим некоторые ключи, которые мы использовали в приведенном выше фрагменте JSON:

  • module: указывает метод создания кода модуля. Node использует commonjs.
  • target: указывает уровень языка для вывода.
  • moduleResolution: помогает компилятору понять, к чему относится импорт. Значение node имитирует механизм разрешения модуля Node.
  • outDir: это место для вывода файлов .js после транспиляции. Здесь мы используем значение dist.

Вместо того чтобы создавать и заполнять файл tsconfig.json вручную, вы можете запустить следующую команду:

tsc --init

Эта команда сгенерирует хорошо прокомментированный файл tsconfig.json.

Чтобы узнать больше о доступных параметрах файла, обратитесь к официальной документации TypeScript.

Теперь можно настроить проверку соблюдения стандартов кодирования для нашего проекта TypeScript. В терминале, запущенном в корневом каталоге вашего проекта (в нашем случае это node_project), выполните следующую команду, которая создаст файл tslint.json:

./node_modules/.bin/tslint --init

Откройте только что созданный файл tslint.json и добавьте правило no-console:

{

  "defaultSeverity": "error",

  "extends": ["tslint:recommended"],

  "jsRules": {},

  "rules": {

    "no-console": false

  },

  "rulesDirectory": []

}

По умолчанию средство контроля качества кода TypeScript предотвращает использование отладки с помощью консольных операторов, поэтому нам необходимо явно отменить правило no-console.

4: Обновление файла package.json

На этом этапе вы можете либо по отдельности запускать функции в терминале, либо создать npm сценарий для их запуска.

Мы создадим скрипт start, который скомпилирует и транспилирует код TypeScript, а затем запустит полученное приложение .js.

Откройте файл package.json и обновите его следующим образом:

{

  "name": "node-with-ts",

  "version": "1.0.0",

  "description": "",

  "main": "dist/app.js",

  "scripts": {

    "start": "tsc && node dist/app.js",

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "@types/express": "^4.16.1",

    "tslint": "^5.12.1",

    "typescript": "^3.3.3"

  },

  "dependencies": {

    "express": "^4.16.4"

  }

}

В приведенном выше фрагменте мы обновили основной путь и добавили команду start в раздел scripts. Обратите внимание на команду start: сначала выполняется команда tsc, а затем команда node. Это скомпилирует, а затем запустит сгенерированный вывод с помощью node.

Команда tsc позволяет TypeScript скомпилировать приложение и поместить сгенерированный вывод .js в указанный каталог outDir (согласно файлу tsconfig.json).

 5: Создание и запуск сервера Express

Теперь, когда TypeScript и его средство контроля качества кода настроены, пришло время создать Node Express Server.

Сначала создайте папку src в корневом каталоге проекта:

mkdir src

Затем создайте файл по имени app.ts:

touch src/app.ts

В данный момент структура папки должна выглядеть так:

├── node_modules/

├── src/

  ├── app.ts

├── package-lock.json

├── package.json

├── tsconfig.json

├── tslint.json

Откройте файл app.ts в текстовом редакторе и вставьте следующий фрагмент кода:

import express from 'express';

const app = express();

const port = 3000;

app.get('/', (req, res) => {

  res.send('The sedulous hyena ate the antelope!');

});

app.listen(port, err => {

  if (err) {

    return console.error(err);

  }

  return console.log(`server is listening on ${port}`);

});

Приведенный выше код создает сервер Node, который прослушивает запросы через порт 3000. Запустите приложение, используя следующую команду:

npm start

Если приложение работает успешно, в терминале появится сообщение:

server is listening on 3000

Теперь вы можете посетить http://localhost:3000 в своем браузере, где вы должны увидеть такое сообщение:

The sedulous hyena ate the antelope!

Откройте файл 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 = express_1.default();

const port = 3000;

app.get('/', (req, res) => {

    res.send('The sedulous hyena ate the antelope!');

});

app.listen(port, err => {

    if (err) {

        return console.error(err);

    }

    return console.log(`server is listening on ${port}`);

});

//# sourceMappingURL=app.js.map

Готово! Вы успешно настроили свой проект Node в TypeScript.

Заключение

В этом мануале вы узнали, почему TypeScript полезен для написания кода JavaScript и какие у него есть преимущества.

Также вы успешно настроили проект Node с помощью платформы Express, а затем скомпилировали и запустили проект при помощи TypeScript.

Tags: , ,

Добавить комментарий