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 на ваш компьютер. Сделать это вам поможет наш Информаторий:
- Установка Node.js и настройка локальной среды разработки в macOS
- Установка Node.js в Debian 10
- Установка Node.js в Ubuntu 20.04
- Установка Node.js в CentOS 8
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.