Installazione

Edoardo Midali

L’installazione di TypeScript configura il compilatore e gli strumenti necessari per sviluppare applicazioni type-safe. TypeScript si installa tramite npm o yarn come dipendenza di sviluppo, fornendo il comando tsc per compilazione e strumenti di supporto per integrazione con editor e build systems.

Prerequisiti

TypeScript richiede Node.js e npm installati nel sistema.

# Verifica installazione Node.js
node --version

# Verifica installazione npm
npm --version

# Se necessario, scarica Node.js da nodejs.org

Installazione Globale

Installare TypeScript globalmente per uso da qualsiasi directory.

# Con npm
npm install -g typescript

# Con yarn
yarn global add typescript

# Verifica installazione
tsc --version

# Output esempio: Version 5.3.3

Installazione Locale

Installare TypeScript come dipendenza di progetto (consigliato).

# Inizializza progetto npm
npm init -y

# Installa TypeScript come dev dependency
npm install --save-dev typescript

# Con yarn
yarn add --dev typescript

# Verifica con npx
npx tsc --version

Inizializzazione Progetto

Creare file di configurazione TypeScript per il progetto.

# Genera tsconfig.json
npx tsc --init

# Crea struttura directory
mkdir src
mkdir dist

# File TypeScript di esempio
echo 'console.log("Hello TypeScript");' > src/index.ts

Configurazione Base

File tsconfig.json con configurazione minima funzionale.

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

Compilazione Base

Compilare file TypeScript in JavaScript.

# Compila tutti i file
npx tsc

# Compila file specifico
npx tsc src/index.ts

# Watch mode (ricompila automaticamente)
npx tsc --watch

# Compila senza generare file (solo type checking)
npx tsc --noEmit

Script NPM

Configurare script npm per comandi comuni.

{
  "scripts": {
    "build": "tsc",
    "watch": "tsc --watch",
    "start": "node dist/index.js",
    "dev": "tsc && node dist/index.js",
    "type-check": "tsc --noEmit"
  }
}

# Usa script npm
npm run build
npm run watch
npm run start

Installazione con ts-node

Eseguire TypeScript direttamente senza compilazione esplicita.

# Installa ts-node
npm install --save-dev ts-node

# Esegui file TypeScript
npx ts-node src/index.ts

# Script npm
{
  "scripts": {
    "dev": "ts-node src/index.ts"
  }
}

Integrazione Editor

Configurare editor per supporto TypeScript ottimale.

# VS Code (supporto built-in)
# Installa estensioni consigliate
# - ESLint
# - Prettier

# File .vscode/settings.json
{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

Definizioni Tipo per Librerie

Installare type definitions per librerie JavaScript.

# Definizioni Node.js
npm install --save-dev @types/node

# Definizioni librerie comuni
npm install --save-dev @types/express
npm install --save-dev @types/react
npm install --save-dev @types/jest

# Ricerca definitions disponibili
npm search @types/<nome-libreria>

Progetto Web Frontend

Setup TypeScript per progetto web frontend.

# Installa dipendenze
npm install --save-dev typescript

# tsconfig.json per browser
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true
  }
}

Progetto Node.js Backend

Setup TypeScript per applicazione Node.js.

# Installa dipendenze
npm install --save-dev typescript @types/node

# tsconfig.json per Node
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["ES2020"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "resolveJsonModule": true
  }
}

Setup con Bundler

Integrazione TypeScript con bundler popolari.

# Webpack con TypeScript
npm install --save-dev webpack webpack-cli ts-loader

# Vite con TypeScript (supporto built-in)
npm create vite@latest my-app -- --template vanilla-ts

# Parcel con TypeScript (supporto built-in)
npm install --save-dev parcel

# esbuild con TypeScript
npm install --save-dev esbuild

Linting e Formatting

Setup ESLint e Prettier per TypeScript.

# ESLint per TypeScript
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

# Prettier
npm install --save-dev prettier

# .eslintrc.json
{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ]
}

Testing Setup

Configurare framework di testing per TypeScript.

# Jest con TypeScript
npm install --save-dev jest ts-jest @types/jest

# npx ts-jest config:init

# Vitest (supporto TypeScript built-in)
npm install --save-dev vitest

Monorepo Setup

Configurare TypeScript per progetti monorepo.

# Struttura
# /packages/package-a
# /packages/package-b

# Root tsconfig.json
{
  "files": [],
  "references": [
    { "path": "./packages/package-a" },
    { "path": "./packages/package-b" }
  ]
}

# packages/package-a/tsconfig.json
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "composite": true,
    "outDir": "./dist"
  }
}

Verifica Installazione

Testare che installazione funzioni correttamente.

// src/test.ts
const messaggio: string = "TypeScript funziona!";
console.log(messaggio);

interface Utente {
  nome: string;
  eta: number;
}

const utente: Utente = {
  nome: "Mario",
  eta: 30,
};

console.log(utente);

# Compila e esegui
npx tsc
node dist/test.js

# Oppure con ts-node
npx ts-node src/test.ts

Aggiornamento TypeScript

Mantenere TypeScript aggiornato alle versioni più recenti.

# Verifica versione corrente
npx tsc --version

# Aggiorna a ultima versione
npm install --save-dev typescript@latest

# Aggiorna globalmente
npm install -g typescript@latest

# Verifica changelog
# https://github.com/microsoft/TypeScript/releases

Troubleshooting Comune

Soluzioni a problemi comuni durante installazione.

# Errore: command not found tsc
# Soluzione: usa npx tsc o installa globalmente

# Errore: Cannot find module
# Soluzione: npm install @types/<modulo>

# Errore: tsconfig.json not found
# Soluzione: npx tsc --init

# Conflitti versione TypeScript
# Soluzione: verifica package.json e node_modules
npm list typescript

# Cache corrotta
npm cache clean --force
rm -rf node_modules
npm install

Conclusioni

L’installazione di TypeScript configura l’ambiente di sviluppo con compilatore, type checker, e strumenti di supporto. Installazione locale come dev dependency garantisce versione consistente per team, mentre tsconfig.json personalizza comportamento del compilatore. Integrazione con editor, bundler, linter, e test framework completa setup production-ready, fornendo fondazione per sviluppo type-safe di applicazioni frontend, backend, o full-stack con TypeScript.