Как да получите поддръжка за автоматично рестартиране и прекъсване с Typescript и Node

Създаване на страхотно изживяване на машинопис с възел

Когато за първи път се опитах да използвам typecript за проект на NodeJs, се опитах да намеря добро ръководство, което да обяснява как да се настрои. Затова реших сам да напиша такъв. Изключително опианиран е, но открих, че това работи чудесно за мен. Надеждата ми е, че ще бъде и за някой друг.

През последните 12 месеца създадох безброй проекти Flow и Typescript. Експериментирам с множество редактори, тествам рамки и създавам инструменти. Първоначално започнах с котлони, но напоследък ми беше по-лесно просто да създадете настройката от нулата, с няколко изключения. Ползата от това е, че разбирам всяка част от проекта. И може да добави към него при нужда.

В това ръководство ще ви покажа как да настроите основна настройка с машинопис и възел. И тогава как да получите много ефективна настройка с поддръжка на точка на прекъсване (във VSCode), тестове на единици и автоматично рестартиране. Ако сте запознати с основните стъпки, можете да преминете надясно към стъпки 3 и 4, където се въвеждат автоматично презареждане и точки на прекъсване

1: Основна настройка

Да започнем в празна директория. В моя случай започвам в примерна папка с проект, наречена typecript-node. В тази стъпка ще създадем проста настройка за писане на експресен сървър в typecript. Ще започнем със създаването на следните файлове

$ npm init
$ mkdir src && touch src / server.ts
$ tsc --init

Което трябва да ви даде следната структура

- src
   server.ts
package.json
tsconfig.json

След това ще добавим необходимите зависимости към проекта. Можете да използвате прежда или npm за тази стъпка (ще се придържам към преждата в моите примери).

прежда добавете експрес
прежда добавете --dev typecript @ types / express

След това ще добавим супер прост сървър

И добавете следното към секцията за скриптове на npm в package.json:

И заменете съдържанието на вашия tsconfig.json със следното:

Това е. Вече трябва да можете да стартирате npm startin терминала си и да видите вашия сървър работи:

2: Добавяне на единични тестове с Jest

Открих, че пускането на тестова настройка, която е лесна за използване и стартиране, е изключително важна. Ако не съм аз и другите разработчици са склонни да се откажат от тестовете на единица в разгара на битката. И след като започне да се случва, е изключително трудно да се върне тестовото покритие на път.

Откакто се запознах с Jest, аз се влюбих както в бързината, лекотата на използване, изхода, така и по-важното в случая: колко е лесно да се интегрира с typecript. За да започнете, нека добавим следните зависимости:

прежда добавете --dev ts-jest jest @ видове / jest

И добавете следното към вашия package.json (добавих два допълнителни скрипта в секцията за скриптове)

След това ще добавим dummy.test.ts към директорията src, за да проверим дали тестовият бегач работи както се очаква.

Всички сме готови. Сега можете да стартирате npm тест, за да стартирате тестовия пакет веднъж или npm run test: гледайте да го стартирате непрекъснато:

3: Добавяне на автоматично рестартиране на сървъра при промяна на кода

Друго идеално допълнение, когато се развива в възел, е да се рестартира сървърът всеки път, когато променяте кода си. Обаче да направите правилната работа с typecript може да е малко сложно, ако никога не сте я изпробвали преди. Но всъщност е много просто с nodemon и ts-възел. Затова нека добавим тези:

прежда добавете --dev nodemon ts-възел

И аз обичам да съхранявам nodemon config в seperat nodemon.json, за да направя npm скриптовете по-лесни за четене. Затова създайте nodemon.json в корена на проекта със следното съдържание:

Ще променим стартовия си скрипт, за да използваме ts-възел (това гарантира, че nodemon няма да се срине, когато typecript не се компилира) и ще добавим dev скрипт, който изпълнява nodemon:

Вече можете да стартирате npm run dev и да накарате сървъра да се рестартира всеки път, когато направите промяна:

4: Добавяне на поддръжка за точки на прекъсване в Visual Studio Code

Горното ще бъде достатъчно, за да ви направи продуктивни, когато пишете възел в typecript. Все пак наличието на точки за прекъсване наистина може да ускори опита ви за отстраняване на грешки. Това е нещо, с което повечето разработчици в Java или други статично типизирани езици са доста свикнали, но открих, че повечето разработчици на възли рядко използват. Но след като свикнете с него, е изключително болезнено да се върнете към отстраняването на грешки в "console.log".

Първата стъпка е да стартирате възел с флаг за проверка. (трябва да се поддържа от възел 6.3 и по-нагоре. Но аз съм го тествал само с възел 7.9.0). Затова нека променим стартовия ни скрипт на следното:

След това ще добавим следното към файла vscode launch.json в нашия проект. Можете или да го генерирате vscode, или ръчно да го добавите в директорията .vscode в основата на вашия проект. Можете да прочетете повече за отстраняването на грешки в кода тук.

След това ще добавим крайна точка по подразбиране към нашия сървър, за да проверим дали точките на прекъсване работят както се очаква.

И ние сме добре да отидем. Стартирайте сървъра с npm run dev и започнете отстраняване на грешки чрез натискане на F5 или навигиране до раздела за отстраняване на грешки в vscode. Опитайте да добавите точка за прекъсване на линия 8 в моята проба по-горе и натиснете localhost: 8000. Сега трябва да видите vscode stop на вашата точка на прекъсване. Това ви позволява да инспектирате всички променливи, които са в момента в обхвата, и да ги променяте с раздела за отстраняване на грешки vscode.

Разделът за отстраняване на грешки в долната част ви позволява да манипулирате променливи в обхвата. Макар да задържите курсора на променливи в обхвата, ви позволява да ги инспектирате с падащото меню по-горе.

Това е. Вече можете да кодирате, като в vscode е активиран сървър за автоматично рестартиране и отдалечено отстраняване на грешки. Не е нужно дори да рестартирате процеса във vscode - той автоматично се свързва отново. Едно предимство обаче е, че изчиства вашите точки на прекъсване при всеки рестарт на сървъра. Ако разберете как да решите това, моля, уведомете ме в коментарите по-долу! Можете да намерите кода за това ръководство в това репо: https://github.com/Aleksion/typescript-node-walkthrough

Намерили ли сте по-добър начин да работите с машинопис и възел? Или съм пропуснал нещо критично в моята стъпка? Уведомете ме тук или в Twitter.
Хареса ли ви това? Моля, не се колебайте да го споделяте и споделяте с приятелите си!