Tipi di dati primitivi in TypeScript e transcompilazione

Spiegazione del Codice TypeScript e della sua Transcompilazione

Cos'è TypeScript?

TypeScript è un linguaggio di programmazione sviluppato da Microsoft che estende JavaScript aggiungendo la tipizzazione statica. Questo significa che possiamo specificare il tipo di dato che ogni variabile deve contenere.

Analisi del Codice TypeScript

Vediamo il codice TypeScript fornito:

let nome:string = "Mario";
let cognome:string = "Perna";
let eta:number = 43;
let isMag:boolean = true;
let var1:null = null;
let var2:undefined = undefined;

console.log("Benvenuto "+ nome + " " + cognome);

Dichiarazione delle Variabili con Tipi

Il codice dichiara diverse variabili specificando esplicitamente il loro tipo:

nome:string - Una variabile di tipo stringa che contiene "Mario"
cognome:string - Una variabile di tipo stringa che contiene "Perna"
eta:number - Una variabile di tipo numerico che contiene il valore 43
isMag:boolean - Una variabile di tipo booleano (vero/falso) impostata su true
var1:null - Una variabile che può contenere solo il valore null
var2:undefined - Una variabile che può contenere solo il valore undefined

I Principali Tipi di Dato in TypeScript

string: per testi e caratteri
number: per numeri (interi e decimali)
boolean: per valori vero/falso (true/false)
null: rappresenta un valore nullo intenzionale
undefined: rappresenta una variabile non inizializzata

Output del Programma

L'ultima riga stampa nella console:

Benvenuto Mario Perna

Il Processo di Transcompilazione

Cos'è la Transcompilazione?

La transcompilazione è il processo di conversione del codice TypeScript in JavaScript normale. Questo è necessario perché i browser web comprendono solo JavaScript, non TypeScript.

Il Comando `npx tsc`

npx: è uno strumento che esegue pacchetti Node.js
tsc: è il TypeScript Compiler (compilatore TypeScript)
Insieme, npx tsc converte i file .ts in file .js

Risultato della Transcompilazione

Dopo la transcompilazione, il codice TypeScript diventa JavaScript normale:

let nome = "Mario";
let cognome = "Perna";
let eta = 43;
let isMag = true;
let var1 = null;
let var2 = undefined;

console.log("Benvenuto "+ nome + " " + cognome);

Nota importante: Le annotazioni di tipo (:string, :number, ecc.) vengono rimosse perché JavaScript non le supporta.

Il File HTML

Il file HTML fornito è una pagina web semplice che:

Definisce la struttura base di una pagina web
Include il file JavaScript generato tramite <script src="./index.js"></script>
Quando aperta nel browser, eseguirà il codice JavaScript e mostrerà "Benvenuto Mario Perna" nella console del browser

Vantaggi di TypeScript

Controllo degli errori: TypeScript rileva errori di tipo durante la scrittura del codice
Migliore documentazione: I tipi rendono il codice più leggibile e comprensibile
Supporto IDE: Gli editor di codice possono fornire migliori suggerimenti e completamento automatico
Compatibilità: Il codice compilato funziona in qualsiasi ambiente JavaScript

let nome:string = "Mario";
let cognome:string = "Perna";
let eta:number = 43;
let isMag:boolean = true;
let var1:null = null;
let var2:undefined = undefined;

console.log("Benvenuto "+ nome + " " + cognome);

VIENE PRODOTTO DALLA TRANSCOMPILAZIONE DEL TS. (npx tsc)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./index.js"></script>
</body>
</html>