Selles juhendis näitan sulle, kuidas saad siluda lihtsat TypeScript rakendust, mis simuleerib kalkulaatorit. Eesmärk on tuvastada viga, miks kahe arvu liitmine ei anna oodatud tulemust. Selles praktilises harjutuses kasutatakse Chrome'i arendajate tööriistu koodi analüüsimiseks ja vea kiireks leidmiseks. Selle juhendi abil saad aru, kui oluline on silumine ja milliseid tööriistu saavad sulle abiks olla.
Olulisemad järeldused
- Kasutades Chrome'i arendajate tööriistu, saad hõlpsasti analüüsida oma rakenduse olekut.
- TypeScript'i tüübikontroll aitab avastada vigu varakult enne koodi käivitamist.
- Tüüpide olulisus ja väärtuste õige käsitlemine on oluline vigade vältimiseks.
Samm-sammult juhend
Kõigepealt käivita oma Chrome'i veebibrauser ja laadi kalkulaatori TypeScripti rakendusega veebirakendus. Projekt peaks juba serveris käima, et saaksid HTML-faili Chrome'is avada.
Kontrolli, kas su projektis on olemas nii TypeScripti kui ka JavaScripti fail (transpileeritud fail). TypeScripti fail sisaldab kommentaare ja tüüpiinfo, samas kui transpileeritud JavaScripti failid seda infot ei sisalda.
Ava Chrome'i arendajate tööriistad, paremklõpsates lehel ja valides "Uurimine" või vajutades F12. Mine "Elemendid" vahekaardile, et näha lehe HTML-koodi ja veendu, et sisendväljad ja nupp oleksid õigesti seadistatud.
Kalkulaatoril on kaks sisendvälja arvude ja ühe nupu liitmise käivitamiseks. Sisesta mõned testväärtused ja klõpsa nupul. Märkad, et summat ei arvutata õigesti; võimalik, et saad tulemuse asemel 22 asemel oodatud 4. Selle erinevuse selgitamiseks on vajalik silumine.
Sea nüüd oma koodis silumismärge, valides sündmuse kuulaja funktsiooni. See toimub osas, mis vastutab liitmise eest. Kui sisestad väärtused sisendväljadesse ja vajutad nuppu, peaksid siseneva siluri režiimi.
Silurivaates saad uurida muutujaid. Oluline on kontrollida sisendväljade sisut ja väärtusi, et näha, milliseid väärtusi edastatakse. Märkad, et sisendväljade väärtused on tüüpi String, mitte Number, nagu sa ootasid.
See tüübikonflikt põhjustab liitmise mittetoimimise. Arvude asemel konkateniseeruvad need. Näiteks sisestades "1" ja "6" saad tulemuseks "16", mitte soovitud 4. See loogiline viga on kergesti jälgitav, kuid oluline tuvastada.
Nüüd pead vea parandama. Mine tagasi oma TypeScripti faili Visual Studio koodis ja muuda, kuidas väärtusi töödeldakse. Kasuta asemel n1.valueAsNumber + n2.valueAsNumber asemel n1.value + n2.value, et tagada, et need oleksid numbrid, mitte stringid.
Pärast muudatuse tegemist salvesta fail ja laadi leht Chromis uuesti. Vaata uuesti sisendväljade väärtusi enne nende liitmist. Sel korral kuvatakse kahe arvu õige summa.
Kui kõik on õigesti tehtud, kuvatakse nüüd nupu vajutamisel summana "10", kui sisestad näiteks väärtused "2" ja "8". Oled edukalt vea parandanud ja õppinud, kui oluline on TypeScriptis tüüpimine.
Lisaks saad kasu TypeScripti tüüpide selge määratlemise eelistest. See vähendab võimalust runtime'i vigadeks märkimisväärselt. Jälgige alati tüüpe, et lihtsustada silumist.
Lõpuks olete näinud, kui olulised on Chrome'i arendajate tööriistad koodi ja rakenduse käitumise reaalajas analüüsimiseks. Nende tööriistade abil silumine võib oluliselt aidata kaasa teie arendusprotsesside parendamisele.
Kokkuvõte
Selles juhendis õppisite, kuidas siluda lihtsat TypeScripti rakendust. Erilist tähelepanu pöörati Chrome'i arendajate tööriistade kasutamisele, võttes arvesse tüüpe TypeScriptis. Lõpuks saite aru, kui oluline on vigu varakult avastada ja kui tähtis võib TypeScripti tüübikontroll olla.
Sagedased küsimused
Mis oli peamine viga, mida TypeScripti rakenduses leiti?Peamine viga oli see, et kasutati string-väärtusi arvude asemel, mis viis vale arvutuseni.
Mis rolli mängivad Chrome'i arendajate tööriistad silumisel?Chrome'i arendajate tööriistad aitavad analüüsida koodi reaalajas ja tuvastada programmi käigus tekkinud vigu.
Kuidas saab vältida vigu TypeScriptis?Definitsioonide abil TypeScriptis saab vähendada tööajal tekkivaid vigu ja tagada, et kasutatakse ainult õigeid andmetüüpe.
