Come Installare TypeScript e Creare la tua Prima Applicazione

Introduzione

In questo articolo vedremo come installare TypeScript e creare una prima applicazione semplice. Partiremo dall’installazione, passando per la configurazione del progetto e arriveremo alla compilazione ed esecuzione del codice. Questa guida è pensata per chi vuole iniziare con TypeScript in modo chiaro e veloce.

Per comodità, utilizziamo Visual Studio Code come ambiente di sviluppo, ma puoi usare qualsiasi editor di testo o IDE che preferisci.

Al momento della scrittura di questo articolo, le versioni utilizzate sono:

• Node.js: v20.18.0
• TypeScript: 10.8.2

1. Installazione di TypeScript

TypeScript richiede Node.js per funzionare. Se non hai Node.js installato, scaricalo da nodejs.org.

Per maggiori dettagli, consulta la documentazione ufficiale di TypeScript: TypeScript Docs

Installazione globale

Apri un terminale e digita:

npm install -g typescript

Verifica l’installazione con:

npm ts --version

2. Creazione di un Progetto TypeScript

Inizializza il progetto

Crea una cartella per il progetto e spostati al suo interno:

mkdir my-typescript-app

Spostati all’interno della cartella:

cd my-typescript-app

Inizializza il progetto con:

npm init -y

Aggiungi TypeScript al progetto:

npm install typescript --save-dev

Apri il progetto con Visual Studio Code:

code .

Creare il file di configurazione tsconfig.json

Il file tsconfig.json permette di configurare il comportamento del compilatore TypeScript. Per generarlo automaticamente con le impostazioni di default, esegui:

tsc --init

Dopo averlo creato, puoi modificarlo per adattarlo alle tue esigenze. Un esempio di configurazione base:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "strict": true,
    "outDir": "dist",
    "rootDir": "src"
  }
}

Per approfondire tutte le opzioni disponibili, consulta la documentazione ufficiale: tsconfig.json Reference

• target: Specifica la versione ECMAScript con cui compilare il codice.
• module: Definisce il sistema di moduli usato.
• strict: Abilita controlli più rigidi per scrivere codice più sicuro.
• outDir: Cartella in cui verranno salvati i file compilati.
• rootDir: Cartella contenente i file TypeScript sorgenti.

3. Scrivere il primo codice TypeScript

Crea una cartella src/ e un file src/index.ts, quindi aggiungi il seguente codice:

function greet(name: string): string {
    return `Hello, ${name}!`;
}

console.log(greet("World"));

4. Compilare ed Eseguire il codice

Il comando tsc (TypeScript Compiler) viene utilizzato per compilare i file TypeScript (.ts) in JavaScript (.js). Compila il file TypeScript con:

tsc

Se hai configurato tsconfig.json, il compilatore genererà automaticamente i file JavaScript nella cartella dist/. Esegui il codice con Node.js:

node dist/index.js

Se vuoi compilare un singolo file senza tsconfig.json, puoi eseguire:

tsc src/index.ts --outDir dist

Per ulteriori dettagli sui comandi di compilazione, visita la documentazione ufficiale: TypeScript CLI

5. Configurare TypeScript per il Watch Mode

Per ricompilare automaticamente quando modifichi i file, usa:

tsc --watch

Questo comando manterrà il compilatore in esecuzione, ricompilando il codice ogni volta che viene modificato un file TypeScript.

Ora sei pronto per sviluppare con TypeScript! 🚀