Debugot TypeScript lietojumprogrammu, izmantojot Chrome attīstītāja rīkus

Šajā norādē es tev parādīšu, kā varat atrisināt vienkāršu TypeScript lietojumprogrammu, kas simulē kalkulatoru. Mērķis ir identificēt kļūdu, kāpēc divu skaitļu saskaitīšana nesniedz gaidīto rezultātu. Šajā praktiskajā nodarbībā tiks izmantoti Chrome Developer Tools, lai analizētu kodu un ātri atrastu kļūdu. Šīs norādes rezultātā tu sapratīsi, cik svarīgs ir atzīmēšana un kādas rīkus var izmantot, lai palīdzētu.

Galvenie secinājumi

• Izmantojot Chrome Developer Tools, tu vienkārši vari analizēt savas lietojumprogrammas stāvokli.
• Tipu pārbaude TypeScript palīdz agrīni atklāt kļūdas, pirms tiek izpildīts kods.
• Tipu nozīme un pareiza vērtību apstrādes apstrāde ir būtiska, lai izvairītos no kļūdām.

Pēc soļa norādījums

Sāc ar Chrome pārlūku un ielādē tīmekļa lietojumprogrammu ar TypeScript implementāciju kalkulatoram. Projekts jau vajadzētu darboties uz servera, tāpēc vari atvērt HTML failu Chrome pārlūkā.

Tad pārliecinies, vai tavs projektā ir gan TypeScript, gan JavaScript fails (transpilētais fails). TypeScript fails satur komentārus un tipu informāciju, kamēr transpilētie JavaScript faili šo informāciju nesatur.

Atver Chrome Developer Tools, nospiežot lapu ar labo peles taustiņu un izvēloties "Pārbaudīt" vai nospiežot F12. Dodieties uz cilni "Elementi", lai redzētu lapas HTML kodu un pārliecinātos, ka ievades lauki un poga ir pareizi iestatīti.

Kalkulatoram ir divi ievades lauki skaitļiem un poga, lai sāktu saskaitīšanu. Vari ievadīt dažas testa vērtības un nospiežot pogu. Tu pamanīsi, ka summa netiek pareizi aprēķināta; iespējams, saņemsi 22 vietā 4, ko gaidīji. Lai izprastu šo atšķirību, nepieciešams atzīmēšana.

Tagad ieliec atzīmi savā kodā, nospiežot notikumu klausītāja funkciju. Tas notiks tajā sadaļā, kura atbild par saskaitīšanu. Ievadot vērtības ievades laukos un nospiežot pogu, tu būtu jānonāk atzīmētājā.

Atzīmētāja skatā vari pārbaudīt mainīgos. Īpaši svarīgi ir pārbaudīt ievades lauku tekstu un vērtības, lai redzētu, kādas vērtības tiek nodotas. Tu pamanīsi, ka ievades lauku vērtība ir tipa String, nevis Number, kā gaidīji.

Šis tipa konflikts izraisa saskaitīšanas nedarbību. Vērtības tiek konkatenētas, nevis saskaitītas. Piemērs: ievadot "1" un "6", rezultātā saņemsi "16", kas nav gaidītais rezultāts. Šo loģisko kļūdu viegli saprast, bet svarīgi to identificēt.

Tagad izlabo kļūdu. Atgriezies atpakaļ pie savas TypeScript faila Visual Studio Code un maini veidu, kā tiek apstrādātas vērtības. Tavā koda vietā n1.value + n2.value izmanto n1.valueAsNumber + n2.valueAsNumber, lai nodrošinātu, ka tie ir skaitļi, nevis virknes.

Pēc veiktajām izmaiņām saglabā failu un atsvaidzini lapu Chrome. Tad vēlreiz pārbaudi vērtības ievades laukos pirms tām saskaiti. Šoreiz tiks pareizi parādīts divu skaitļu summa.

Jaaizliegts visi pareizi, nospiežot pogu, tagad rezultātā parādīsies summa "10", ja, piemēram, ievadi "2" un "8". Tādējādi veiksmīgi novērsi kļūdu un esi sapratis, cik svarīga ir tipizēšana TypeScript.

Papildus vari izmantot TypeScript priekšrocības, skaidri definējot mainīgo tipus. Tas ievērojami samazina izpildlaika kļūdu risku. Viņu vienmēr atceries norādīt tipus, lai atvieglotu atzīmēšanu.

Beidzot tu redzi cik svarīgas ir Chrome Developer Tools, lai reāllaikā analizētu aplikācijas kodu un uzvedību. Atkļūdošana ar šiem rīkiem būtiski uzlabo tavus attīstības procesus.

Kopsavilkums

Šajā rokasgrāmatā tu esi iemācījies, kā atkļūdot vienkāršu TypeScript aplikāciju. Īpaša uzmanība tika pievērsta Chrome Developer Tools izmantošanai, ņemot vērā TypeScript tipus. Gala rezultātā tu saprati, cik svarīgi ir agrāk atpazīt kļūdas un cik būtiska var būt tipu pārbaudīšana TypeScript.