Odpravljanje napak aplikacije TypeScript s pripomočki za razvijalce v Chrome-u

V tej navodilih ti bom pokazal, kako lahko odpravljaš napake v preprosti aplikaciji TypeScript, ki simulira kalkulator. Cilj je identificirati napako, zakaj se seštevanje dveh števil ne vrne pričakovanih rezultatov. Pri tej praktični vaji bomo uporabili orodja za razvijalce Chrome, da analiziramo kodo in hitro najdemo napako. S temi navodili boš razumel/a, kako pomembno je odpravljanje napak (debugging) in katera orodja ti lahko pri tem pomagajo.

Najpomembnejši spoznanja

• Z uporabo orodij za razvijalce Chrome lahko enostavno analiziraš stanje svoje aplikacije.
• Preverjanje tipov v TypeScript pomaga pri zgodnjem odkrivanju napak, preden se koda izvede.
• Pomembnost tipov in pravilnega ravnanja z vrednostmi je bistvena za preprečevanje napak.

Korak-za-korakom navodila

Najprej zaženi svoj brskalnik Chrome in naloži spletno aplikacijo s TypeScript implementacijo kalkulatorja. Projekt naj že teče na strežniku, zato lahko HTML datoteko odpreš v Chrome-u.

Zdaj se prepričaj, da imata tako TypeScript kot JavaScript datoteka (transpilirana datoteka) prisotni v tvojem projektu. TypeScript datoteka vsebuje komentarje in informacije o tipih, medtem ko transpilirane JavaScript datoteke teh informacij ne vsebujejo.

Odpri orodja za razvijalce Chrome s klikom desne miškine tipke na stran in izberi "Preglej" ali pritisni F12. Pojdi na zavihek "Elementi", da vidiš HTML kodo strani in se prepričaš, da so polja za vnos in gumb pravilno nastavljeni.

Kalkulator ima dve polji za vnašanje števil in gumb za sprožitev seštevanja. Vnesi nekaj testnih vrednosti in klikni na gumb. Ugotovil/a boš, da vsota ni pravilno izračunana; morda dobiš 22 namesto pričakovane vrednosti 4. Za pojasnitev te odstopanja je potrebno odpravljanje napak (debugging).

Zdaj postavi prelomno točko v svoji kodi, tako da klikneš na funkcijo poslušalca dogodkov. To narediš v odseku, ki je odgovoren za seštevanje. Ko vneseš vrednosti v polja za vnos in klikneš na gumb, se boš znašel/a v odpravitelju napak (debugger).

V pogledu odpravitelja napak lahko preveriš spremenljivke. Posebej je pomembno, da preveriš notranje besedilo in vrednosti polj za vnos, da vidiš, katere vrednosti se prenašajo. Ugotovil/a boš, da je vrednost polj za vnos tipa String, ne pa tipa Number, kot si pričakoval/a.

Ta konflikt tipov povzroča, da se seštevanje ne izvaja pravilno. Namesto, da se števili seštejeta, se združita. Primer bi bil: vnos "1" in "6" bi vrnil rezultat "16", kar ni želeni izid. Ta logična napaka je enostavna za sledenje, a pomembno jo je identificirati.

Zdaj popravi napako. Vrni se v svojo TypeScript datoteko v Visual Studio Code in spremeni način obdelave vrednosti. Namesto n1.value + n2.value uporabi n1.valueAsNumber + n2.valueAsNumber, da se prepričaš, da gre za številke, ne pa za nize.

Po opravljeni spremembi datoteke jo shrani in ponovno naloži stran v Chrome-u. Ponovno preveri vrednosti v poljih za vnos, preden jih seštevaš. Tokrat se bo pravilna vsota dveh številk prikazala.

Če si pravilno opravil/a, se bo ob pritisku na gumb izpisala vsota "10", če na primer vneseš vrednosti "2" in "8". Tako si uspešno odpravil/a napako in se naučil/a, kako pomembna je tipičnost v TypeScript-u.

Poleg tega lahko izkoristiš prednosti TypeScript-a, tako da jasno določiš tipe spremenljivk. S tem se možnost napak med izvajanjem znatno zmanjša. Vedno pazite, da navedete tipe, da olajšate odpravljanje napak.

Nazadnje si videl tudi, kako pomembna so orodja za razvijalce v brskalniku Chrome za analizo kode in vedenja aplikacije v realnem času. Odpravljanje napak s temi orodji lahko pomembno prispeva k izboljšanju tvojih razvojnih procesov.

Povzetek

V tej vadnici si se naučil, kako odpraviti napake v preprosti TypeScript aplikaciji. Poseben poudarek je bil na uporabi orodij za razvijalce v brskalniku Chrome ob upoštevanju tipov v TypeScriptu. Nazadnje si spoznal, kako pomembno je zgodnje odkrivanje napak in kako pomembno je preverjanje tipov v TypeScriptu.