В моей предыдущей статье мы начали с TypeScript и Koa. Мы инициализировали проект, установили несколько пакетов и написали очень простой API hello world. Я знаю, что структура проекта упрямая. Некоторым нравится разбивать приложение по структуре MVC, некоторым нравится разбивать приложение на основе доменов / сущностей. Для демонстрации я буду упрощен и пока сохраню все в файле index.ts. Но в реальной жизни вам следует разбить все на более мелкие модульные компоненты.
Наши коды пока выглядят так:
Посмотрим, над чем мы можем работать дальше.
Наблюдение за изменениями файлов
Каждый раз, когда мы вносим какие-либо изменения в наши коды, мы должны запускать tsc, чтобы скомпилировать код TS в JS. Это раздражает. К счастью, у компилятора TS есть опция отслеживания, которая может отслеживать изменения файлов и компилировать их на лету.
Откройте терминал, cd в проект и запустите:
tsc -w
Затем мы собираемся установить nodemon, поэтому нам не нужно останавливать узел и запускать index.js вручную каждый раз при изменении файлов. Установите nodemon глобально:
npm i -g nodemon
А затем послушайте изменения файла:
nodemon .
Если вы активно используете и tsc watcher, и nodemon, любые изменения, которые вы вносите в файл TS, будут автоматически компилироваться в файлы JS, вызывая изменение этого файла JS, заставляя nodemon перезапускать сервер node. Таким образом, изменение файла TS также перезапускает приложение узла. Больше никакого ручного труда над сдачей.
(Если вы работаете в Windows, это может работать не так, как ожидалось, использование nodemon -L . может сработать)
Добавление определений типов
Поскольку мы собираемся использовать TypeScript, давайте сейчас добавим некоторые определения типов. К счастью для нас, сообщество разработало определения типов для популярных проектов с открытым исходным кодом и опубликовало их в npm. Мы можем просто установить их как наши зависимости разработчика и использовать эти типы в нашем коде.
Давайте установим несколько определений типов:
npm i -D @types/koa @types/koa-router @types/koa-json @types/koa-logger @types/koa-bodyparser
Если вы используете Visual Studio Code, как я, или любой текстовый редактор / IDE, который имеет хорошую поддержку TS, теперь вы можете навести курсор мыши / проверить коды, вы увидите типы TS.
TypeScript может определять типы, даже если вы сами не добавляете подсказки типа. Теперь мы улучшим автозаполнение для наших кодов.
Тело запроса на синтаксический анализ
Если мы собираемся сделать несколько запросов POST / PUT / PATCH, нам нужно будет узнать, как обрабатывать тело запроса, а точнее, как мы можем получить доступ к данным, отправленным от клиента.
Для синтаксического анализа тела запроса мы воспользуемся пакетом koa-bodyparser, который может обрабатывать за нас несколько типов контента. Если мы используем промежуточное программное обеспечение парсера тела, оно будет анализировать входящую полезную нагрузку в соответствии с типом содержимого и сохранять содержимое в структуре данных JS на ctx.request.body. Давайте добавим промежуточное ПО и все протестируем.
Мы импортировали промежуточное ПО парсера тела, добавили его в приложение, а затем изменили обработчик, чтобы он принимал метод публикации. Внутри обработчика я обращаюсь к ctx.request.body. Если я отправлю запрос JSON на /, он должен проанализировать JSON и сохранить объект как тело запроса.
Давайте попробуем это с Postman:
Он работает именно так, как мы хотели.
Добавление типов для тела запроса
Мы знаем, что для этого запроса мы будем использовать только ключ name, поэтому давайте определим интерфейс для формирования контракта.
Теперь мы скажем TS, что мы точно знаем, что наш ctx.request.body относится к типу HelloRequest. Если мы попытаемся сделать что-то, что нарушает этот контракт, TS должен нас предупредить.
И если мы по ошибке захотим получить доступ к data.username или к чему-то другому, кроме name, TypeScript выдаст ошибку при компиляции кода. И если в вашей IDE есть поддержка TS, она вас тоже предупредит. Больше нет орфографических ошибок, и читатели вашего кода также легко поймут, что должно быть в этом запросе.
Нет, больше не могу.
Ага, я тебя прикрыл.
Итак, окончательный код должен выглядеть так:
Код на этом этапе можно найти здесь: https://github.com/masnun/koamed/tree/0bf10659c904dcaa6802bc73a5465df9a762285c
