Impostazione di TypeScript con Visual Studio Code

Visual Studio Code (VSCode) è un editor di codice potente e popolare che fornisce un supporto eccellente per lo sviluppo TypeScript. Questa guida ti guiderà attraverso i passaggi per configurare TypeScript in VSCode, assicurandoti di avere tutto ciò di cui hai bisogno per iniziare a programmare in modo efficace.

Installazione di Visual Studio Code

Se non hai ancora installato Visual Studio Code, segui questi passaggi:

1. Vai al sito web ufficiale di VSCode.
2. Scarica il programma di installazione per il tuo sistema operativo.
3. Eseguire il programma di installazione e seguire le istruzioni visualizzate sullo schermo per completare l'installazione.

Installazione di Node.js e npm

TypeScript è gestito tramite npm (Node Package Manager), che richiede Node.js. Per installare Node.js e npm:

1. Visita il sito web ufficiale di Node.js.
2. Scarica e installa la versione LTS di Node.js, che include npm.
3. Verificare l'installazione aprendo un terminale ed eseguendo node -v e npm -v per controllare le versioni di Node.js e npm.

Installazione di TypeScript

Con Node.js e npm installati, ora puoi installare TypeScript globalmente. Apri un terminale ed esegui il seguente comando:

npm install -g typescript

Questo comando installa TypeScript a livello globale, consentendo di utilizzare il comando tsc per compilare file TypeScript da qualsiasi punto del sistema.

Impostazione di un progetto TypeScript

Per avviare un nuovo progetto TypeScript, segui questi passaggi:

1. Crea una nuova directory per il tuo progetto e accedi ad essa:

mkdir my-typescript-project
cd my-typescript-project

1. Inizializza un nuovo progetto npm:

npm init -y

1. Installa TypeScript come dipendenza di sviluppo:

npm install --save-dev typescript

1. Genera un file di configurazione TypeScript:

npx tsc --init

Questo comando crea un file tsconfig.json nella directory del progetto, che contiene le impostazioni di configurazione per il compilatore TypeScript.

Configurazione di VSCode per TypeScript

VSCode è dotato di supporto TypeScript integrato, ma puoi migliorare ulteriormente la tua esperienza di sviluppo configurando l'editor:

Apertura del progetto

Apri il tuo progetto TypeScript in VSCode:

1. Avvia VSCode.
2. Seleziona File > Apri cartella... e scegli la directory del progetto.

Installazione delle estensioni TypeScript

Sebbene VSCode fornisca un eccellente supporto TypeScript immediato, è possibile installare estensioni aggiuntive per funzionalità avanzate:

• Estensione TypeScript: Fornisce supporto al linguaggio TypeScript e funzionalità come IntelliSense, navigazione del codice e altro ancora.
• Prettier: Un'estensione per la formattazione del codice, che garantisce uno stile di codice coerente.

Configurazione del compilatore TypeScript

Apri il file tsconfig.json per configurare le impostazioni del compilatore TypeScript. Ecco un esempio di configurazione:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

Questa configurazione imposta la versione ECMAScript di destinazione su ES6, specifica il formato del modulo CommonJS, abilita il controllo rigoroso del tipo e imposta la directory di output su ./dist. Include anche mappe sorgente per un debug più semplice.

Scrittura ed esecuzione del codice TypeScript

Crea un nuovo file TypeScript nella directory src:

mkdir src
touch src/index.ts

Aggiungere del codice TypeScript a index.ts:

const message: string = "Hello, TypeScript!";
console.log(message);

Per compilare il codice TypeScript, eseguire:

npx tsc

Questo comando compila i file TypeScript e invia i file JavaScript nella directory dist.

Per eseguire il codice JavaScript compilato, utilizzare:

node dist/index.js

Conclusione

Impostare TypeScript con Visual Studio Code è un processo semplice che prevede l'installazione degli strumenti necessari, la configurazione del progetto e l'utilizzo delle potenti funzionalità di VSCode. Seguendo questa guida, avrai un ambiente di sviluppo TypeScript completamente funzionale e sarai pronto a creare applicazioni robuste con TypeScript.