Каждый день в базу данных npm добавляется все больше и больше пакетов, что приводит к путанице для новых разработчиков при установке простого приложения Express с поддержкой TypeScript. В этой статье представлено простое руководство по настройке хорошо структурированного приложения Node.js Express с поддержкой TypeScript.

Приложение Express.js набирает обороты в последние годы. Однако простой JavaScript остается проблемой, когда речь идет о типобезопасном программировании. Следовательно, существует необходимость интегрировать TypeScript в Express.js. Это руководство не только предоставляет пошаговое объяснение для настройки структурированного приложения Express с поддержкой TypeScript, но и объясняет, почему выбираются определенные пакеты, чтобы вы, как разработчик, понимали все пакеты, используемые в вашем проекте.

Предварительные требования

Это предварительное программное обеспечение для локальной установки.

  1. узел (я устанавливаю узел здесь, если еще не сделал)
  2. npm (поставляется с установкой узла)
  3. 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, которое вы только что создали. Поздравляю! Надеюсь, это руководство было полезным. Пожалуйста, оставьте сообщение, если вы хотите написать больше руководств или концепций! Спасибо.