Введение
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 [email protected]
- npm install -D [email protected]
Флаг -D
— сокращенное обозначение опции: --save-dev
. Более подробную информацию об этом флаге можно найти в документации npmjs.
Пришло время установить платформу Express:
- npm install -S [email protected]
- npm install -D @types/[email protected]
Вторая команда устанавливает типы 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
вручную можно запустить следующую команду:
- tsc --init
Эта команда сгенерирует файл tsconfig.json
с правильными комментариями.
Чтобы узнать больше о доступных опциях ключ-значение, можно использовать официальную документацию TypeScript, где приводятся разъяснения всех опций.
Теперь вы можете настроить проверку соответствия стандартам кода TypeScript для этого проекта. Откройте в терминале корневой каталог вашего проекта, который установлен в этом учебном модуле как node_project
, и запустите следующую команду для генерирования файла tslint.json
:
- ./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
в корневом каталоге вашего проекта:
- mkdir src
Затем создайте файл с именем app.ts
:
- 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
на предмет запросов. Запустите приложение с помощью следующей команды:
- npm start
При успешном выполнении сообщение будет зарегистрировано на терминале:
Output- server is listening on 3000
Теперь вы можете открыть в браузере адрес http://localhost:3000
и увидите следующее сообщение:
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.