Capitolo 4: Ambientazione pratica – Installare e configurare TypeScript

In questo capito vedremo come installare e configurare TypeScript nel nostro ambiente di sviluppo.

Per farlo avremo bisogno di node.js installato sulla nostra macchina. Puoi scaricarlo dal sito ufficiale.

🔗 Ti piace Techelopment? Dai un’occhiata al sito per tutti i dettagli!

1. Installazione di TypeScript

TypeScript si installa tramite npm, il package manager di Node.js.
Assicurati di avere Node.js installato (node -v e npm -v da terminale).

▶️ Installa TypeScript globalmente:

npm install -g typescript

Questo comando ti permette di usare tsc (TypeScript Compiler) da qualsiasi cartella.

Verifica l’installazione:

tsc -v
# Output: Versione di TypeScript, es. 5.3.x

2. Primo file `.ts` e compilazione

Crea un file chiamato hello.ts con questo contenuto:

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

console.log(greeting("Alena"));

Compila il file con:

tsc hello.ts

Otterrai un file hello.js con lo stesso codice senza tipi (pronto per essere eseguito con Node.js o nel browser).

Esegui il codice:

node hello.js

3. Inizializzare un progetto TypeScript

Per lavorare in modo strutturato, conviene creare un progetto e configurarlo con un file tsconfig.json.

▶️ Crea una cartella e inizializza il progetto:

mkdir my-project-ts
cd my-project-ts
npm init -y

▶️ Installa TypeScript come dipendenza locale:

npm install --save-dev typescript

▶️ Crea il file tsconfig.json:

npx tsc --init

Questo genera un file di configurazione con centinaia di opzioni (ma puoi ignorare la maggior parte per ora).

4. Il file `tsconfig.json`: a cosa serve

È il cuore della configurazione di un progetto TypeScript.
Ecco un esempio base:

{
  "compilerOptions": {
    "target": "es6",              // Output JS version
    "module": "commonjs",         // Module system
    "strict": true,               // Enable all strict controls
    "outDir": "./dist",           // Where to put compiled JS files
    "rootDir": "./src",           // Where to look for TS files
    "esModuleInterop": true       // For compatibility with JS libraries
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

Questa configurazione dice a TypeScript di:

Leggere i file TS dalla cartella src
Compilarli in dist/
Usare ES6 come target di output
Applicare controlli rigorosi sui tipi

5. Struttura consigliata del progetto

mio-progetto-ts/
├── src/
│   └── index.ts
├── dist/
├── tsconfig.json
├── package.json

Crea src/index.ts con del codice di prova:

const sum = (a: number, b: number): number => a + b;
console.log(sum(2, 3));

Compila tutto:

npx tsc

Controlla il contenuto di dist/index.js e lancia:

node dist/index.js

6. Compilazione automatica con `tsc --watch`

Per evitare di dover ricompilare manualmente ogni volta:

npx tsc --watch

TypeScript osserverà i file .ts e li ricompilerà ogni volta che li salvi.
Super comodo durante lo sviluppo.

7. Integrazione con strumenti di build (facoltativo)

In progetti più complessi, TypeScript può essere integrato con:

Webpack (con ts-loader)
Vite (supporta TypeScript nativamente)
Babel (con preset per TS)
ts-node per eseguire direttamente TS senza compilare a parte

Esempio di esecuzione diretta con ts-node:

npx ts-node src/index.ts

8. TypeScript e librerie JavaScript

Quando usi librerie JS in TypeScript, servono le definizioni dei tipi.
Per esempio, se vuoi usare Lodash:

npm install lodash
npm install --save-dev @types/lodash

Questo ti permette di usare Lodash con autocompletamento e controllo dei tipi.

In sintesi

TypeScript si installa con npm e si usa tramite tsc
I file .ts vanno compilati in .js
tsconfig.json ti aiuta a organizzare e personalizzare il progetto
Puoi iniziare gradualmente anche in progetti JavaScript esistenti

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog