Каждый день в базу данных npm добавляется все больше и больше пакетов, что приводит к путанице для новых разработчиков при установке простого приложения Express с поддержкой TypeScript. В этой статье представлено простое руководство по настройке хорошо структурированного приложения Node.js Express с поддержкой TypeScript.
Приложение Express.js набирает обороты в последние годы. Однако простой JavaScript остается проблемой, когда речь идет о типобезопасном программировании. Следовательно, существует необходимость интегрировать TypeScript в Express.js. Это руководство не только предоставляет пошаговое объяснение для настройки структурированного приложения Express с поддержкой TypeScript, но и объясняет, почему выбираются определенные пакеты, чтобы вы, как разработчик, понимали все пакеты, используемые в вашем проекте.
Предварительные требования
Это предварительное программное обеспечение для локальной установки.
- узел (я устанавливаю узел здесь, если еще не сделал)
- npm (поставляется с установкой узла)
- git (Установите здесь контроль версий git)
Установка
Для начала есть два способа начать работу, в основном команда npm install -g
и команда npx
. Команда npm install -g
загружает пакет, указанный локально, в глобальную папку node_modules, тогда как команда npx
выполняет только пакеты узлов и не сохраняет их локально. Ниже я предоставлю оба метода. Однако я предлагаю метод npx
, поскольку он гарантирует, что пакеты узлов всегда будут последней версией. В этом руководстве проект называется express-ts-app. Вы должны изменить это в соответствии с вашим собственным названием проекта.
1. Метод npm (НЕ РЕКОМЕНДУЕТСЯ - см. Метод npx)
$ npm install -g create-express-typescript-application $ create-express-typescript-application express-ts-app
2. метод npx
$ npx create-express-typescript-application express-ts-app
После того, как вы запустите указанную выше команду, с инициализацией git будет создана следующая файловая структура.
В папке src есть три подпапки. Это приложение, константы и папка утилит. Существуют также файлы index.ts
и server.ts
независимо друг от друга. index.ts
- это точка входа для всего приложения, в основном для прослушивания TCP-порта. server.ts
- это настройка экспресс-приложения. Обратите внимание, что все маршруты должны находиться в папке приложения.
Понимание используемых пакетов
Поскольку это легкое приложение Express-TypeScript, оно включает только 5 пакетов, а именно cors, express, fs, шлем и morgan.
cors
- это пакет, позволяющий вызывать запросы XML из разных источников. Это сделано для того, чтобы разрешить вызовы API из разных источников / URL.
express
- это минимальная и гибкая платформа веб-приложений Node.js, которая предоставляет надежный набор функций для веб-приложений и мобильных приложений.
fs
- это пакет файловой системы Node.js, обеспечивающий взаимодействие кода с реальным хранилищем.
helmet
- это пакет для защиты экспресс-приложений путем установки различных заголовков http.
morgan
- это инструмент для ведения журнала, с помощью которого консоль регистрирует весь трафик, который обменивался данными с экспресс-сервером.
Начиная
Для начала просто запустите запрос терминала / cmd в корне каталога проекта. Оказавшись там, вы можете запустить среду разработки, выполнив следующую команду.
$ npm run dev
Приложение использует nodemon для прослушивания изменений файлов и перезапуска приложения, если в папке src есть файлы, которые обновляются. После успешного запуска сервера вы можете перейти по адресу http: // localhost: 8080 / api / server-status / в своем браузере. Тебе следует увидеть
{ "status": "server is running" }
Другой маршрут по умолчанию - http: // localhost: 8080 / api / server-status / routes, где вы можете увидеть все зарегистрированные маршруты.
Учебник: создание API
В этом руководстве вы научитесь создавать API для простого арифметического сложения двух чисел.
Обратите внимание, что файл API должен находиться в папке src / app / с именем файла, включая маршрутизатор в качестве ключевого слова. Вы можете соответствующим образом изменить эти правила в файле server.ts
, как показано.
Когда вы будете готовы, создайте новую папку в добавлении вызова src / app / folder. Вы можете ввести следующую команду в отдельном терминале, оставив ваш сервер продолжать работать через команду npm run dev
.
$ mkdir src/app/addition
Затем создайте новый файл с именем add.router.ts. Вы можете ввести следующую команду в отдельном терминале, оставив ваш сервер продолжать работать через команду npm run dev
.
$ echo > src/app/addition/addition.router.ts
Как только новый файл будет создан, вы готовы начать. Начните с импорта маршрутизатора и определите метод GET.
Затем получите ввод через строку запроса URL-адреса a и b и проверьте, является ли это допустимым числом.
После того, как вы подтвердите, что входные данные являются числами, вы готовы вернуть этот API.
Когда API будет завершен, вы можете протестировать API в своем браузере.
Http: // localhost: 8080 / api / add? A = hello & b = world должно вернуть
{ "message": "a and b are not number" }
и http: // localhost: 8080 / api / add? a = 22 & b = 09 должно вернуть
{ "equation": "22+9=31", "input1": 22, "input2": 9, "output": 31 }
Таким образом, вы успешно завершили один GET API. Вы можете обратиться к папке src / app / sample, чтобы узнать о других методах http или даже в документации Express.js.
Вывод
В этом руководстве вы научились настраивать полное легкое приложение Express с поддержкой TypeScript. Вы также научились создавать API простого добавления в приложении Express-TypeScript, которое вы только что создали. Поздравляю! Надеюсь, это руководство было полезным. Пожалуйста, оставьте сообщение, если вы хотите написать больше руководств или концепций! Спасибо.