In questa guida ti mostrerò come fare il debug di un'applicazione TypeScript che simula una calcolatrice. L'obiettivo è identificare l'errore che causa un risultato errato nell'addizione di due numeri. In questa pratica esercitazione verranno utilizzati gli strumenti per sviluppatori di Chrome per analizzare il codice e individuare rapidamente l'errore. Attraverso questa guida comprenderai l'importanza del debugging e quali strumenti possono aiutarti.
Punti chiave
- Utilizzando gli strumenti per sviluppatori di Chrome, puoi analizzare facilmente lo stato della tua applicazione.
- Il controllo dei tipi in TypeScript aiuta a rilevare gli errori in anticipo, prima che venga eseguito il codice.
- L'importanza dei tipi e la corretta gestione dei valori sono fondamentali per evitare errori.
Guida passo passo
Innanzitutto, avvia il browser Chrome e carica l'applicazione Web con l'implementazione TypeScript della calcolatrice. Il progetto dovrebbe già essere in esecuzione su un server, in modo da poter aprire il file HTML in Chrome.
Assicurati che sia presente sia il file TypeScript che il file JavaScript (file trasposto) nel tuo progetto. Il file TypeScript contiene commenti e informazioni sui tipi, mentre i file JavaScript trasposti non contengono tali informazioni.
Apri gli strumenti per sviluppatori di Chrome facendo clic con il pulsante destro del mouse sulla pagina e selezionando "Ispeziona" oppure premendo F12. Vai alla scheda "Elementi" per visualizzare il codice HTML della pagina e assicurarti che i campi di input e il pulsante siano configurati correttamente.
La calcolatrice ha due campi di input per i numeri e un pulsante per avviare l'addizione. Puoi inserire alcuni valori di test e fare clic sul pulsante. Noterai che la somma non viene calcolata correttamente; potresti ottenere ad esempio 22 anziché il 4 previsto. Per chiarire questa discrepanza, è necessario fare il debug.
Imposta ora un punto di interruzione nel tuo codice facendo clic sulla funzione dell'ascoltatore degli eventi. Questo avviene nella sezione responsabile dell'addizione. Inserendo i valori nei campi di input e premendo il pulsante, dovresti entrare nel debugger.
Nella vista del debugger puoi ispezionare le variabili. È importante controllare il testo interno e i valori dei campi di input per vedere quali valori vengono passati. Noterai che il valore dei campi di input è di tipo stringa, e non di tipo numero come ti aspettavi.
Questo conflitto di tipo causa il malfunzionamento dell'addizione. Invece di sommare i numeri, vengono concatenati. Ad esempio, inserendo "1" e "6" otterrai "16" come risultato, che non è quello desiderato. Questo errore logico è facile da individuare, ma è importante identificarlo.
Ora puoi correggere l'errore. Torna al tuo file TypeScript in Visual Studio Code e modifica il modo in cui i valori vengono elaborati. Invece di n1.value + n2.value, dovresti utilizzare n1.valueAsNumber + n2.valueAsNumber per garantire che siano numeri e non stringhe.
Dopo aver apportato la modifica, salva il file e ricarica la pagina in Chrome. Dovresti controllare nuovamente i valori nei campi di input prima di sommarli. Questa volta il risultato corretto della somma di due numeri dovrebbe essere visualizzato.
Se tutto è stato eseguito correttamente, premendo il pulsante verrà visualizzata la somma come "10", ad esempio inserendo i valori "2" e "8". In questo modo hai corretto con successo l'errore e imparato l'importanza della tipizzazione in TypeScript.
Inoltre, puoi sfruttare i vantaggi di TypeScript specificando chiaramente i tipi delle variabili. Ciò riduce significativamente la possibilità di errori a tempo di esecuzione. Assicurati sempre di specificare i tipi per facilitare il debugging.
Infine, hai visto quanto siano importanti gli strumenti per sviluppatori di Chrome per analizzare il codice e il comportamento di un'applicazione in tempo reale. Il debugging con questi strumenti può contribuire notevolmente a migliorare i tuoi processi di sviluppo.
Riepilogo
In questa guida hai imparato come eseguire il debug di un'applicazione TypeScript semplice. Particolare attenzione è stata dedicata all'uso degli strumenti per sviluppatori di Chrome con considerazione dei tipi in TypeScript. Alla fine hai capito quanto sia importante individuare tempestivamente gli errori e quanto possa essere importante il controllo dei tipi in TypeScript.
Domande frequenti
Qual è stato il principale errore rilevato nell'applicazione TypeScript?Il principale errore era l'uso di valori stringa anziché numerici, che ha portato a un calcolo errato.
Qual è il ruolo degli strumenti per sviluppatori di Chrome nel debugging?Gli strumenti per sviluppatori di Chrome aiutano ad analizzare il codice in tempo reale e a identificare errori nel flusso del programma.
Come evitare gli errori in TypeScript?Definendo i tipi in TypeScript, è possibile ridurre gli errori a tempo di esecuzione e garantire l'uso solo dei tipi di dati corretti.
