Prima di iniziare a scrivere codice TypeScript, è necessario preparare l'ambiente di sviluppo. TypeScript viene infatti utilizzato insieme a diversi strumenti che permettono di scrivere, controllare e trasformare il codice.
In particolare, andiamo a vedere a cosa servono Node.js, npm e il compilatore TypeScript.
TypeScript può essere installato e gestito tramite npm, il gestore dei pacchetti incluso nell'installazione di Node.js.
Per eseguire TypeScript, è richiesto Node.js. Per verificare che Node.js sia già installato, apri il terminale ed esegui:
node -vSe l'installazione è disponibile, verrà mostrata la versione di Node.js presente nel computer.
Nota: se non hai installato Node.js sul tuo dispositivo, segui la guida su Come installare Node.js.
Possiamo verificare la presenza di npm con:
npm -vSe uno dei due comandi non viene riconosciuto, è necessario installare Node.js prima di procedere con TypeScript.
Il compilatore TypeScript si chiama tsc, abbreviazione di TypeScript Compiler. Possiamo installarlo utilizzando npm.
Esistono due modalità principali: installazione globale e installazione locale nel progetto.
Per installare TypeScript globalmente, esegui il seguente comando da terminale:
npm install -g typescriptL'opzione -g (global) indica che il pacchetto viene installato a livello del sistema e può essere utilizzato da diversi progetti.
Dopo l'installazione possiamo verificare che tsc sia disponibile con:
tsc -vIn questo modo possiamo utilizzare il compilatore direttamente dal terminale.
Nei progetti reali è spesso preferibile installare TypeScript localmente, all'interno del progetto.
Per prima cosa possiamo creare una nuova cartella e inizializzare un progetto npm:
mkdir progetto-typescript
cd progetto-typescript
npm init -ySuccessivamente installiamo TypeScript come dipendenza del progetto:
npm install -D typescriptIn questo caso TypeScript viene installato all'interno della cartella node_modules e viene registrato nel file package.json come dipendenza di sviluppo.
In breve, l'installazione globale è comoda per avere tsc disponibile direttamente dal terminale, mentre quella locale permette al progetto di utilizzare una versione specifica di TypeScript.
Per esempio, due progetti potrebbero richiedere versioni differenti: con un'installazione locale, ogni progetto può mantenere la propria versione senza dipendere necessariamente da quella installata globalmente.
Per questo motivo, nei progetti è generalmente consigliabile installare TypeScript localmente come dipendenza di sviluppo.
Quando TypeScript è installato localmente, possiamo comunque eseguire il compilatore attraverso:
npx tscnpx permette di utilizzare il programma installato all'interno del progetto.
Dopo aver installato TypeScript, possiamo configurare il progetto attraverso il file tsconfig.json. Questo file contiene le opzioni del compilatore TypeScript e permette di stabilire, tra le altre cose, quali file compilare e quale JavaScript generare.
Possiamo creare automaticamente una configurazione iniziale eseguendo:
npx tsc --initSe abbiamo installato tsc globalmente, possiamo utilizzare anche il comando:
tsc --initIl comando genera un file tsconfig.json all'interno della cartella del progetto.
Il file tsconfig.json generato contiene diverse impostazioni di TypeScript. Tra le opzioni più importanti troviamo quelle relative alla versione di JavaScript generata, alla posizione dei file e al controllo dei tipi.
Una configurazione di esempio potrebbe essere:
{
"compilerOptions": {
"target": "ES2022",
"module": "NodeNext",
"strict": true,
"outDir": "./dist"
},
"include": ["src"]
}Vedremo nel dettaglio queste opzioni nelle prossime lezioni. Per ora è sufficiente sapere che tsconfig.json permette di configurare il compilatore TypeScript del progetto.