Ladění aplikace TypeScript s Chrome Developer Tools

V této příručce ti ukážu, jak můžeš ladit jednoduchou aplikaci v TypeScriptu, která simuluje kalkulačku. Cílem je identifikovat chybu, proč se sčítání dvou čísel nechová podle očekávání. Při této praktické cvičení využijeme Chrome Developer Tools k analýze kódu a rychlému nalezení chyby. Díky této příručce pochopíš, jak je důležité ladění a jaké nástroje ti mohou pomoci.

Nejdůležitější zjištění

• Použití Chrome Developer Tools ti umožňuje snadno analyzovat stav své aplikace.
• Typová kontrola v TypeScriptu pomáhá identifikovat chyby již před spuštěním kódu.
• Význam typů a správné zacházení s hodnotami jsou klíčové pro zabránění chyb.

Kroky pro krokem průvodce

Nejprve spusť svůj prohlížeč Chrome a načti webovou aplikaci s implementací kalkulačky v TypeScriptu. Projekt by měl již běžet na serveru, takže budeš moci otevřít HTML soubor v Chrome.

Ujisti se, že jak TypeScript soubor, tak i JavaScriptový soubor (transpilovaný soubor) jsou ve tvém projektu. TypeScript soubor obsahuje komentáře a informace o typech, zatímco transpilované JavaScriptové soubory tyto informace neobsahují.

Otevři Chrome Developer Tools kliknutím pravým tlačítkem myši na stránku a vyber možnost „Inspect“ nebo stisknutím klávesy F12. Přejdi na kartu „Elements“ pro zobrazení HTML kódu stránky a ujisti se, že vstupní pole a tlačítko jsou správně nastavené.

Kalkulačka má dvě vstupní pole pro čísla a tlačítko pro spuštění sčítání. Můžeš zadat nějaké testovací hodnoty a kliknout na tlačítko. Zjistíš, že součet není správně spočten; pravděpodobně získáš hodnotu 22 namísto očekávaných 4. Pro vyjasnění této odchylky je ladění nutné.

Nyní nastav breakpoint ve svém kódu kliknutím na funkci Event Listeneru. To provedeš v sekci odpovědné za sčítání. Když zadáš hodnoty do vstupních polí a stiskneš tlačítko, měl by ses dostat do debuggeru.

V pohledu Debuggeru můžeš prozkoumat proměnné. Zejména je důležité zkontrolovat vnitřní text a hodnoty vstupních polí, abys viděl, které hodnoty jsou předávány. Zjistíš, že hodnota vstupních polí je typu Řetězec (String) a ne číslo (Number), jak sis představoval.

Tento typový konflikt způsobuje, že sčítání nefunguje správně. Namísto sčítání čísel jsou konkatenovány. Příkladem může být: zadání „1“ a „6“ vede k výsledku „16“, což není očekávaný výsledek. Tato logická chyba je snadno identifikovatelná, ale je důležité ji najít.

Nyní by ses měl chybu opravit. Vrať se do svého TypeScriptového souboru ve Visual Studio Code a změň způsob zpracování hodnot. Místo n1.value + n2.value bys měl použít n1.valueAsNumber + n2.valueAsNumber, aby sis byl jistý, že se jedná o čísla a ne o řetězce.

Po provedení změny ulož soubor a načti stránku v Chrome znovu. Ujisti se, že si znovu zkontroluješ hodnoty ve vstupních polích před jejich sečtením. Tentokrát by se měla správně zobrazit suma dvou čísel.

Pokud jsi vše provedl správně, po stisknutí tlačítka se jako výsledek zobrazí „10“, pokud například zadáš hodnoty „2“ a „8“. Tímto způsobem jsi úspěšně opravil chybu a zjistil, jak je důležitá typizace v TypeScriptu.

Navíc můžeš využít výhod TypeScriptu tím, že jasně definuješ typy proměnných. To výrazně snižuje možnost chyb za běhu programu. Vždy se ujisti, že specifikuješ typy, abys usnadnil ladění.

Nakonec jsi také viděl/a, jak důležité jsou Chrome Developer Tools k analýze kódu a chování aplikace v reálném čase. Ladění s těmito nástroji může výrazně přispět k zlepšení tvých vývojových procesů.

Shrnutí

V této příručce jsi se naučil/a, jak lze ladit jednoduchou aplikaci v TypeScriptu. Zvláštní pozornost byla věnována použití Chrome Developer Tools s ohledem na typy v TypeScriptu. Nakonec jsi si uvědomil/a, jak důležité je odhalovat chyby včas a jak důležitá může být typová kontrola v TypeScriptu.