Настройка проекта 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 и перейдите в этот каталог.

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.