Table of Contents
URL: https://www.progressiverobot.com/setting-up-a-node-project-with-typescript-ru/
Введение
Node — это среда исполнения, позволяющая писать серверный код JavaScript. Она получила очень широкое распространение после своего выпуска в 2011 году. С ростом базы кода написание серверного кода JavaScript может представлять сложности в связи с характером языка JavaScript: динамичным и слабо типизированным.
Разработчики, переходящие на JavaScript с других языков, часто жалуются на отсутствие мощного статического типирования, но TypeScript позволяет устранить этот недостаток.
TypeScript — это типовой (опциональный) супернабор JavaScript, который может помочь со сборкой и управлением крупномасштабными проектами JavaScript. Его можно представить как JavaScript с дополнительными возможностями, включая мощное статическое типирование, компиляцию и объектно-ориентированное программирование.
Примечание. С технической точки зрения TypeScript является супернабором JavaScript, и это означает, что весь код JavaScript является корректным кодом TypeScript.
Перечислим некоторые преимущества использования TypeScript:
- Опциональная статическая типизация.
- Логическая обработка типов.
- Возможность использования интерфейсов.
В этом учебном модуле вы настроите проект Node с помощью TypeScript. Вы создадите приложение Express с помощью TypeScript и преобразуете его в компактный и надежный код JavaScript.
Предварительные требования
Перед началом прохождения этого модуля вам нужно будет установить Node.js на вашем компьютере. Для этого можно выполнить указания руководства Установка 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. TypeScript использует файл tsconfig.json для настройки опций компилятора для проекта. Создайте файл tsconfig.json в корне каталога проекта и вставьте следующий фрагмент кода:
[label 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:
[label 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 и обновите его соответствующим образом:
[label 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 в корневом каталоге вашего проекта:
mkdir src
Затем создайте файл с именем app.ts:
touch src/app.ts
На этом этапе структура каталогов должна выглядеть следующим образом:
├── node_modules/
├── src/
├── app.ts
├── package-lock.json
├── package.json
├── tsconfig.json
├── tslint.json
Откройте файл app.ts в предпочитаемом текстовом редакторе и вставьте следующий фрагмент кода:
[label 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 на предмет запросов. Запустите приложение с помощью следующей команды:
npm start
При успешном выполнении сообщение будет зарегистрировано на терминале:
[secondary_label Output]
server is listening on 3000
Теперь вы можете открыть в браузере адрес http://localhost:3000 и увидите следующее сообщение:
[secondary_label Output]
The sedulous hyena ate the antelope!
Откройте файл dist/app.js, и вы найдете в нем транспилированную версию кода TypeScript:
[label 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.
