// Tutorial //

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

Published on October 22, 2020
Default avatar
By Jordan Irabor
Developer and author at DigitalOcean.
Русский
Настройка проекта Node с помощью Typescript

Введение

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

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

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

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

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

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

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

Предварительные требования

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

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

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

  1. mkdir node_project
  2. cd node_project

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

  1. npm init

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

  1. npm init -y

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

Шаг 2 — Установка зависимостей

Следующий шаг после инициализации базового проекта npm — установить зависимости, требующиеся для запуска TypeScript.

Запустите следующие команды из каталога вашего проекта для установки зависимостей:

  1. npm install -D typescript@3.3.3
  2. npm install -D tslint@5.12.1

Флаг -D — сокращенное обозначение опции: --save-dev. Более подробную информацию об этом флаге можно найти в документации npmjs.

Пришло время установить платформу Express:

  1. npm install -S express@4.16.4
  2. 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. TypeScript использует файл tsconfig.json для настройки опций компилятора для проекта. Создайте файл 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 вручную можно запустить следующую команду:

  1. tsc --init

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

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

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

  1. ./node_modules/.bin/tslint --init

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

tslint.json
{
  "defaultSeverity": "error",
  "extends": ["tslint:recommended"],
  "jsRules": {},
  "rules": {
    "no-console": false
  },
  "rulesDirectory": []
}

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

Шаг 4 — Обновление файла package.json

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

На этом шаге мы создадим скрипт start, который выполнит компиляцию и транспиляцию кода TypeScript, а затем запустит полученное приложение .js.

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

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.

Шаг 5 — Создание и запуск базового сервера Express

Теперь TypeScript и модуль проверки настроены, и мы можем приступить к сборке модуля Node Express Server.

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

  1. mkdir src

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

  1. touch src/app.ts

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

├── node_modules/
├── src/
  ├── app.ts
├── package-lock.json
├── package.json
├── tsconfig.json
├── tslint.json

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

src/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 на предмет запросов. Запустите приложение с помощью следующей команды:

  1. npm start

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

  1. Output
    server is listening on 3000

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

  1. Output
    The sedulous hyena ate the antelope!

Окно браузера с сообщением: Усердная гиена съела антилопу!

Откройте файл dist/app.js, и вы найдете в нем транспилированную версию кода TypeScript:

dist/app.js
"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.

If you’ve enjoyed this tutorial and our broader community, consider checking out our DigitalOcean products which can also help you achieve your development goals.

Learn more here


About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!