Что, если бы я сказал вам, что JavaScript может быть жизнеспособным в корпоративной среде? Можно было подумать, что я сошел с ума. Разве JavaScript не является игрушкой языка, используемого для анимации div слева направо на веб-странице?
Пару лет назад я был с вами согласен. Уже нет. С последними достижениями в стандарте ECMAScript и появлением TypeScript я не удивлюсь, если он превратит интернета в шторм. Мы даже не узнаем, что нас поразило.
Как JavaScript, но с типами ... и intellisense
TypeScript не зря называют «масштабируемым JavaScript». Это типизированный надмножество того, к чему мы уже так привыкли. Он использует тот же синтаксис и семантику, что и базовый JavaScript, с добавлением некоторых замечательных функций.
TypeScript компилируется в чистый, простой код JavaScript, который работает в любом браузере, в Node.js или в любом движке JavaScript, поддерживающем ECMAScript 3 (или новее).
Он поддерживает современный JavaScript и позволяет использовать все новейшие навороты, предоставленные с последними стандартами ECMAScript. И я просто влюблен в это. Легко и просто. И, самое главное, это открытый код!
Узел, серверный JavaScript… или TypeScript?
Прежде чем приступить к написанию простого приложения с помощью Node.js, нам следует уделить минуту, чтобы сначала объяснить, что это такое. Это асинхронная среда выполнения JavaScript, управляемая событиями, построенная на движке JavaScript V8 в Chrome. Он разработан для создания масштабируемых сетевых приложений.
Это грубое определение, позвольте мне уточнить. Node.js позволяет писать серверный JavaScript. Теперь вам может быть интересно, как? Как вы знаете, JavaScript - это язык, который работает в браузере. Движок браузера принимает код JavaScript и компилирует его в команды. Node.js использует движок Chrome и как среду выполнения для сервера. Что у нас есть сейчас? Способ написания JavaScript на задней панели.
Если я полностью потерял вас из-за приведенных выше условий, сделайте объезд и проверьте это, прежде чем вернуться и продолжить эту прогулку.
Установка TypeScript
Что, если бы я сказал вам, что установить TypeScript так же просто, как установить любой модуль из npm? Вы должны мне поверить, потому что это так. Выполнение одной команды в вашем терминале позволит вам запустить компилятор TypeScript на вашем компьютере. Давайте начнем.
Вы можете пойти дальше, открыть окно терминала и создать каталог, в котором вы хотите ввести код. Я назову свое myapp. Инициализируйте npm, чтобы получить файл package.json. Затем установить TypeScript так же просто, как запустить одну команду.
$ npm init -y $ npm install -g typescript
Это даст вашему терминалу глобальный доступ к компилятору TypeScript, просто используя команду tsc.
Вот простой пример. Откройте любой редактор кода и создайте простой файл. Но дайте ему расширение .ts. Я назову свой файл app.ts.
// app.ts let x: number = 10; let y: number = 20; console.log(x + y);
Это тривиальная программа, которая определяет только две переменные и записывает их сумму. Мы говорим компилятору TypeScript рассматривать эти переменные как числа. Теперь, когда вы вернетесь к терминалу, вы можете скомпилировать файл JavaScript из файла app.ts TypeScript.
$ tsc app.ts
Выполнение команды создаст файл app.js в том же каталоге. Открыв его, мы увидим базовый JavaScript для ES5.
// app.js var x = 10; var y = 20; console.log(x + y);
Ну разве не круто? Хорошо, ты все еще можешь быть немного скептиком. Но проверьте это. Что, если мы присвоим переменной : number строковое значение?
let x: number = 'Hello World!';
Измените значение x на 'Hello World!' и снова выполните команду tsc app.ts. Вы получите сообщение об ошибке.
app.ts(1,5): error TS2322: Type '"Hello World!"' is not assignable to type 'number'.
Это лишь верхушка айсберга, заключающая в себе достоинства TypeScript. Если вы привыкли запускать различные сборки в интерфейсе веб-приложения, переход на TypeScript будет гладким. Это то же самое, что запускать Babel или сборки минификации для любого интерфейсного приложения.
Однако мы хотим запускать в производственной среде только скомпилированные файлы JavaScript. В качестве среды разработки мы хотим использовать среду выполнения TypeScript для Node.js, называемую ts-node. Установить его так же просто, как установить TypeScript.
$ npm install -g ts-node
Достаточно просто. Это все, что нам нужно в отношении реальных компиляторов и сред. Мы готовы написать настоящий код.
Установка зависимостей
Поскольку это было бы правильное руководство без какого-либо реального кода, нам сначала нужно установить некоторые зависимости. Два из них, которые сегодня составляют значительную часть приложений Node, - это express и body-parser. Так что же Экспресс?
Быстрый, незамысловатый, минималистичный веб-фреймворк для Node.js - Официальный сайт
Давай займемся треском, ладно? Установить необходимые зависимости легко, достаточно запустить всего одну команду.
$ npm install --save express @types/express body-parser
Мы устанавливаем express, экспресс-типы данных для TypeScript и, конечно же, body-parser. Это может показаться странным. Некоторые @types появляются внезапно. Не беспокоиться. Именно эти типы делают TypeScript особенным. Они являются частью DefininiteTyped, хранилища высококачественных определений типов TypeScript. Если вам нужны какие-то особые типы, просто установите их. Это просто потрясающе. Это позволяет компилятору TypeScript знать, что означают специальные значения в Express, что дает ему возможность правильно выполнять предварительную проверку ошибок.
Это был довольно короткий процесс установки. Перейдем к коду.
Привет, Node.js ... подожди, Node.ts?
Само приложение будет довольно простым: мы создадим простой сервер, добавим два маршрута, настроим его должным образом и развернем на выбранном нами порту. Главное, что нам нужно понять, - это структура папок.
Папки зеленые, файлы синие. Это окончательный макет, который нам нужен. Однако мы вообще не будем создавать папку dist. Компилятор TypeScript сделает это за нас в процессе компиляции. Мы рассмотрим это более подробно чуть ниже. А теперь давайте создадим каталог lib и добавим два файла: app.ts и server.ts.
Примечание. Удалите файлы app.ts и app.js в каталоге myapp сверху, когда мы попробовали нашу команду tsc.
1. Как заставить его работать
Прежде всего создайте каталог lib и введите его в файл app.ts.
В строке 1 мы импортируем экспресс-модуль, который мы установили ранее. Затем мы создаем класс App, который будет создавать экземпляр нашего Node-приложения. Наконец, нам нужно экспортировать свойство приложения из созданного класса. После этого давайте добавим server.ts.
Мы импортируем приложение и говорим ему прослушивать порт 4040. Довольно просто.
Поскольку мне нравится следить за тем, чтобы все работало, я стараюсь постепенно проверять прогресс. Итак, в этом духе давайте запустим приложение. В терминале мы хотим запустить файл server.ts с модулем ts-node, который мы установили выше.
$ ts-node ./lib/server.ts
Терминал должен Express server listening on port 4040 вернуться к вам. если это произойдет, мы будем двигаться дальше.
2. Настройка парсинга тел
Первое, что вам нужно при создании нового приложения Node, - это настроить промежуточное программное обеспечение парсера тела для синтаксического анализа всех тел входящих запросов в JSON, а также исходящих ответов.
Для этого мы создаем частный метод с именем config() и просто говорим приложению использовать промежуточное программное обеспечение парсера тела. Не забудьте импортировать body-parser вверху! На этом этап настройки завершен. Добавим маршруты.
3. Где их маршруты?
Процесс добавления маршрутов будет аналогичен конфигу. Мы добавим еще один частный метод, установим маршруты и скажем приложению, чтобы они их использовали. Звучит просто, если вы выложите его до того, как наберете код.
В частном routes() методе мы создаем экспресс-маршрутизатор и добавляем методы .getи .post. Наконец, мы просто говорим приложению использовать маршрутизатор и привязать его к маршруту /. Нам также нужно добавить еще один импорт в верхней части файла, чтобы добавить типы Request и Response, которые используются в методах маршрутизатора.
Просто глядя на код, я не могу не получать от него удовольствия. Структура и четкий обзор всего очень аккуратны. Я мог бы к этому привыкнуть.
4. А что насчет того бессонничного почтальона?
Пришло время все это попробовать. Посмотрим, есть ли у нас ошибки. Еще раз запустите приложение с помощью ts-node.
$ ts-node ./lib/server.ts
Я обычно использую Insomnia или Postman для тестирования маршрутов, также называемых конечными точками REST. Не стесняйтесь устанавливать то, что вам нравится, если у вас его еще нет. Это простые инструменты для отправки HTTP-запросов. Здесь позвольте мне показать вам.
Запустив приложение, откройте Insomnia и отправьте HTTP-запрос GET на http://localhost:4040/.
Как и ожидалось, ответ, который мы указали в коде, будет отправлен обратно. Работает нормально. Давайте также попробуем запрос POST.
Замечательно, объект JSON, который мы отправили в конечную точку, был отправлен обратно. Это именно то, что мы написали. Похлопайте себя по спине. Код работает как положено!
Однако мы по-прежнему запускаем файлы TypeScript с ts-node. В производстве мы хотим скомпилировать все в JavaScript и запустить его с помощью команды node. Но это немного сложно, если нам нужно запускать команду tsc для одного файла за раз. К счастью, вы можете передавать значения в интерфейс командной строки и таким образом указывать параметры или просто создать файл tsconfig.json. Это специальный файл конфигурации, который определяет все, что касается фактического процесса компиляции.
Настройка конвейера компиляции
С помощью файла tsconfig.json мы сообщаем TypeScript, что и как мы хотим скомпилировать, а также где разместить скомпилированные файлы. Есть так много вещей, которые можно настроить, но мы сосредоточимся на самых важных вещах, таких как версия ECMAScript, с которой мы хотим скомпилировать, какую модульную систему ожидать и, конечно же, расположение файлов.
Для outDir установлено значение ./dist, что означает, что он создаст каталог dist и поместит туда согласованные файлы. Мы также указываем включение для добавления всех файлов .ts, находящихся в каталоге lib. Теперь, когда вы запустите команду tsc, она прочитает этот файл и скомпилирует все, как вы хотите. Давай попробуем.
$ tsc
Запустив это, вы увидите, что новый каталог dist создается вместе с файлами app.js и server.js. Проверить это. Файлы .js теперь являются базовыми файлами JavaScript, написанными на ES6. Чтобы упростить запуск, давайте добавим несколько скриптов в package.json.
Откройте package.json. У вас должен получиться "scripts" раздел. Добавьте код, чтобы он выглядел так:
"scripts": {
"build": "tsc",
"dev": "ts-node ./lib/server.ts",
"start": "node ./dist/server.js",
"prod": "npm run build && npm start"
},
Когда вы запускаете npm run dev в терминале, вы запускаете приложение с модулем ts-node, но если вы запустите команду npm run prod, вы сначала создадите файлы TypeScript, а затем запустите скомпилированный server.js файл из папки dist.
Наличие скриптов для компиляции файлов .ts важно не только для производства, но и для запуска тестов. Фреймворки для тестирования, такие как Mocha, запускают базовые файлы .js.
Если вы хотите узнать больше о тестировании, прочтите статью ниже.
Куда пойти отсюда?
Вперед и вверх. Использование TypeScript с такими инструментами, как VS Code, значительно упрощает вашу жизнь как разработчика. Замечательно следить за своей спиной. Интеграция с intellisense просто потрясающая. Его даже можно отладить изначально! Мне кажется, что TypeScript принадлежит серверной части. Просто подходит. Надеюсь, это приживется, потому что мне это нравится.
Если вы хотите взглянуть на весь код, который мы написали выше, вот репозиторий. Или, если вы хотите прочитать мои последние статьи, заходите сюда.
Надеюсь, вам, ребята, понравилось читать это так же, как мне понравилось его писать.
Как вы думаете, это руководство поможет кому-то? Не стесняйтесь делиться. Если вам понравилось, разбейте хлопок ниже, чтобы другие люди увидели это здесь, на Medium. Не стесняйтесь проявить к нам немного любви, подписавшись на блог Sourcerer!
