Настройка проекта Node с помощью Typescript

Node — это среда исполнения, позволяющая писать серверный код JavaScript. Она получила очень широкое распространение после своего выпуска в 2011 году. С ростом базы кода написание серверного кода JavaScript может представлять сложности в связи с характером языка JavaScript: динамичным и слабо типизированным.

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

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

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

1. Опциональная статическая типизация.
2. Логическая обработка типов.
3. Возможность использования интерфейсов.

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

Перед началом прохождения этого модуля вам нужно будет установить Node.js на вашем компьютере. Для этого можно выполнить указания руководства Установка Node.js и создание локальной среды разработки для вашей операционной системы.

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

mkdir node_project
cd node_project

Затем инициализируйте его как проект npm:

npm init

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

npm init -y

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

Следующий шаг после инициализации базового проекта 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.

В этом разделе мы настроим 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.

Сейчас вы можете запускать функции в терминале по отдельности или создать скрипт 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"
  }
}

В приведенном выше фрагменте кода мы обновили путь main и добавили команду start в раздел scripts. Если посмотреть на команду start, вы увидите, что вначале запускается команда tsc, а затем — команда node. При этом будет проведена компиляция, и сгенерированный вывод будет запущен с помощью node.

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

Теперь 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

При успешном выполнении сообщение будет зарегистрировано на терминале:

Output
server is listening on 3000

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

Output
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. Также вы узнали о некоторых преимуществах работы с TypeScript.

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