Il primo file TypeScript

Ora che abbiamo preparato l'ambiente di lavoro, possiamo creare il nostro primo file TypeScript e vedere cosa succede quando lo compiliamo.

A differenza di JavaScript, il codice TypeScript non viene normalmente eseguito direttamente dal browser o da Node.js. Il codice scritto in un file .ts viene prima trasformato in JavaScript dal compilatore TypeScript.

Il flusso può essere rappresentato così:

Creare il primo file TypeScript

All'interno del progetto possiamo creare una cartella src e un file chiamato index.ts. Ora, apriamo il file e scriviamo il seguente codice:

const nome: string = "Andrea";

console.log(`Ciao, ${nome}!`);

La parte : string indica a TypeScript che la variabile nome contiene una stringa.

Il file .ts rappresenta quindi il codice sorgente TypeScript che scriviamo durante lo sviluppo.

Compilare un file TypeScript

Per trasformare il file TypeScript in JavaScript possiamo utilizzare il compilatore tsc.

Se ci troviamo nella cartella che contiene il file, possiamo eseguire:

npx tsc src/index.ts

Il compilatore analizzerà il codice e, se non ci sono errori che impediscono la compilazione, genererà un file JavaScript.

Potremmo quindi ritrovarci con due file nella stessa cartella: index.ts e index.js. Il file index.js contiene il codice JavaScript generato a partire dal file TypeScript.

Se prendiamo l'esempio TypeScript scritto prima, il file JavaScript conterrà il seguente codice:

const nome = "Andrea";
console.log(`Ciao, ${nome}!`);

Possiamo notare che : string è stato rimosso. Questo perché l'informazione sul tipo serve a TypeScript durante il controllo del codice, ma non è necessaria per eseguire il programma JavaScript.

Il browser o Node.js eseguirà quindi il file .js generato.

Cosa avviene durante la compilazione

È utile chiarire un concetto: durante la compilazione, TypeScript non si limita a sostituire meccanicamente alcune parti del codice.

Il compilatore analizza il programma e può:

Per esempio, scriviamo:

const numero: number = 10;

Nell'esempio, il tipo number viene eliminato dal codice compilato in JavaScript.

Se invece utilizziamo funzionalità JavaScript più moderne, il compilatore può trasformarle in una sintassi compatibile con una versione precedente di JavaScript, in base all'opzione configurata nel progetto.

Compilare con tsconfig.json

Quando utilizziamo npx tsc src/index.ts stiamo indicando direttamente al compilatore quale file compilare. In un progetto reale, però, è generalmente più comodo utilizzare il file tsconfig.json creato nella lezione precedente.

Possiamo non specificare il file da compilare:

npx tsc

Se non specifichiamo il file, TypeScript cerca il tsconfig.json nel progetto e utilizza le impostazioni definite al suo interno. Ad esempio, possiamo scrivere nel file:

{
    "compilerOptions": {
        "target": "ES2022",
        "outDir": "./dist"
    },
    "include": ["src"]
}

In questo modo, possiamo semplicemente eseguire npx tsc e TypeScript compilerà i file inclusi nella configurazione, generando i file JavaScript nella cartella dist. I file da compilare devono essere specificati tramite il campo include.

La modalità watch

Durante lo sviluppo è scomodo dover eseguire manualmente tsc ogni volta che modifichiamo un file.

TypeScript mette a disposizione la modalità watch, che permette al compilatore di rimanere in esecuzione e controllare continuamente le modifiche ai file.

Possiamo attivarla con:

npx tsc --watch

Il compilatore rimarrà attivo nel terminale. Quando modifichiamo e salviamo un file .ts, TypeScript rileverà automaticamente la modifica e ricompilerà il codice.

Per interrompere la modalità watch possiamo utilizzare Ctrl + C (da Windows) o Control + C (da Mac) nel terminale.

Eseguire TypeScript direttamente durante lo sviluppo

La compilazione in JavaScript è il normale processo utilizzato per ottenere il codice da eseguire, ma durante lo sviluppo esistono strumenti che permettono di eseguire il codice TypeScript in modo più rapido.

Tra questi troviamo ts-node e tsx.

Usare ts-node

ts-node permette di eseguire direttamente file .ts da riga di comando senza richiedere la compilazione manuale tramite tsc.

Possiamo installare ts-node nel progetto con:

npm install -D ts-node

Dopodiché possiamo eseguire un file TypeScript utilizzando:

npx ts-node src/index.ts

Usare tsx

Un'alternativa molto utilizzata a ts-node è tsx. Possiamo installarlo nel progetto con:

npm install -D tsx

Una volta installato, possiamo eseguire:

npx tsx src/index.ts

Anche in questo caso possiamo eseguire il codice TypeScript direttamente durante lo sviluppo.

Possiamo inoltre utilizzare la modalità watch:

npx tsx watch src/index.ts

In questo modo il programma viene rieseguito automaticamente quando vengono rilevate modifiche ai file.