В этой статье я объясню простой пошаговый процесс создания нового сервера с Express в TypeScript.
Этот пример требует базовых знаний Node.js, npm и Visual Studio Code.
Настроить проект
Прежде чем мы начнем, нам нужно создать каталог для нашего проекта. Для этого мы вводим mkdir typescript-express и подтверждаем нажатием Enter.
Переходим в каталог с помощью cd typescript-express и настраиваем проект.
Сначала мы создаем пакет Node.js с помощью команды npm init -y.
После этого мы можем установить модули для нашего проекта. Поэтому мы устанавливаем Express с npm i express.
Поскольку мы работаем с TypeScript, нам также нужны TypeScript и Typings для Express. Мы делаем это с помощью команды npm i -D typescript @types/express.
И последнее, но не менее важное: давайте создадим конфигурацию для TypeScript. Для этого используем команду npx tsc --init. Компилятор TypeScript создаст предопределенный файл со всеми возможными настройками.
Здесь все команды одна за другой…
mkdir typescript-express cd typescript-express npm init -y npm i -D typescript @types/express npm i express npx tsc --init
Для получения дополнительной информации о настройке проекта для TypeScript я могу обратиться только к одной из моих предыдущих статей Простая настройка для вашего следующего проекта TypeScript.
После этого у вас должно получиться примерно следующее:
Напишите приложение Hello World
Для облегчения старта воспользуемся примером прямо со экспресс-страницы и скорректируем его минимально.
Обратите внимание, как мы назначаем порт. Я могу только рекомендовать всегда настраивать порт таким образом. Это также подходит для других проектов, которые не используют Express. Если вы позже реализуете службы и развернете их, например, в Google App Engine (Google Cloud), Google установит эту переменную среды (PORT).
Настроить проект
Мы настраиваем компилятор для TypeScript для создания SourceMaps для отладки и вывода файлов JavaScript в папку dist.
Для этого мы вносим следующие изменения в tsconfig.json
Чтобы наш проект можно было перенести на JavaScript, мы добавляем скрипт для сборки. Для этого мы добавляем новую запись build в раздел scripts файла package.json. Этот сценарий просто запускает компилятор TypeScript tsc (взяв наши настройки из tsconfig.json).
И последнее, но не менее важное: мы настраиваем наш код Visual Studio так, чтобы мы могли запускать проект с отладчиком из кода Visual Studio.
Для этого нажимаем комбинацию клавиш Ctrl+D (в Windows) и выбираем «создать файл launch.json». В открывшемся меню выбираем Node.js (legacy).
В созданном впоследствии launch.json мы настраиваем следующие значения:
- программа: мы переходим в выходной каталог нашего файла JavaScript.
- sourceMaps: имеет значение true, чтобы мы могли отлаживать исходный код в TypeScript позже (например, с помощью точек останова).
- preLaunchTask: всегда выполняется перед тем, как мы хотим запустить нашу программу (только при отладке или фактически при запуске непосредственно из кода Visual Studio).
Запустите сервер
Пока все настроено, можно нажать F5. На этом мы запускаем отладчик Visual Studio Code и нашего сервера.
В качестве альтернативы node dist/main.js также можно ввести в терминал, но только после того, как проект будет перенесен в JavaScript (например, с помощью npm run build ).
Теперь мы можем открыть наш браузер и ввести адрес localhost:3000. Мы должны увидеть что-то похожее на следующее изображение.
Небольшая отладка
И последнее, но не менее важное: мы вносим изменения в исходный код.
Мы добавляем еще один маршрут Hello, который должен выводить только World!. Дополнительно мы устанавливаем точку останова для обоих маршрутов. Это позиция в коде, где отладчик должен остановиться при достижении этой позиции в коде.
Мы снова запускаем сервер с F5, переключаемся в браузер и переходим прямо к localhost:3000. Код Visual Studio должен немедленно выйти на передний план и выделить позицию в исходном коде.
С F5 мы позволяем серверу продолжить работу и снова переключаемся на браузер. Теперь мы должны увидеть Hello World!. Мы в последний раз меняем адрес на localhost:3000/Hello.
Мы должны снова войти в Visual Studio Code и на этот раз увидеть выделенный маршрут для Hello.
Мы можем снова нажать F5 в Visual Studio Code, чтобы продолжить работу с сервером. Теперь мы должны увидеть World! в браузере.
Чего я хотел добиться с помощью дополнительного маршрута и точек останова?
Во многих руководствах мне не хватает подхода к настройке отладчика, чтобы программа могла отлаживаться непосредственно из среды разработки. В частности, с TypeScript, чтобы это работало, необходимо заранее сделать несколько настроек. Здесь я увидел хорошую возможность вкратце коснуться этого в конце.
Заключение
Это простая установка Express в TypeScript (+ настройки для отладчика).
Я решил показать пример с Express, потому что, несмотря на свой возраст, Express все еще широко используется сегодня. Существует достаточно альтернатив (например, Nest.js), которые также используют Express в своей базовой структуре или построены аналогичным образом. Преимущество Express состоит в том, что он очень подходит для обучения и предлагает легкое введение в разработку серверов. Это не значит, что Express не подходит для готовых к производству проектов, как раз наоборот.
В зависимости от отзывов, это будет первая часть серии «Экспресс». Пока что запланировано:
- Промежуточное ПО / обработчики
- упрощенный пример REST API
- упрощенный GraphQL API (на основе тех же Mock-Data) и сравнение с REST API
- развертывание в Google Cloud.
Надеюсь, вам понравилась статья, если у вас есть какие-либо вопросы или предложения, просто свяжитесь со мной.
Полный пример доступен на GitHub: https://github.com/bromix/typescript-express-tutorial
