Frontend Academy · Lezione

Compilare TS e tsconfig.json

Eseguire tsc per compilare TypeScript e configurare il compilatore con opzioni di tsconfig.json come strict, target e outDir.

Compilare TS e tsconfig.json è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Installazione del compilatore TypeScript

Installi TypeScript come dipendenza di sviluppo. La CLI tsc compila i file TypeScript. Con Vite o Next.js, il bundler gestisce la compilazione, ma tsc viene comunque utilizzato per il controllo dei tipi.

npm install --save-dev typescript
npx tsc --version  # verify installation
npx tsc app.ts     # compile a single file

Inizializzazione di tsconfig.json

Esegua npx tsc --init per generare un tsconfig.json con tutte le opzioni commentate e valori predefiniti sensati. Questo file è la configurazione unica del compilatore TypeScript.

npx tsc --init
# Creates tsconfig.json with ~100 commented-out options

La struttura di tsconfig.json

Le sezioni principali sono: compilerOptions (comportamento del compilatore), include (file da compilare) ed exclude (file da ignorare).

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

target — versione JavaScript di output

target specifica quale versione di JavaScript deve produrre tsc. Utilizzi ES2022 o ESNext per gli ambienti moderni. ES5 offre la massima compatibilità, anche se di solito questo compito viene affidato a Babel.

module — sistema dei moduli

module controlla il formato dei moduli nell'output. Utilizzi CommonJS per Node.js. Utilizzi ESNext o ES2022 con i bundler, come Vite e webpack. Utilizzi NodeNext per Node.js moderno con package.json type:module.

strict — il flag di strictness

"strict": true abilita una raccolta di controlli rigorosi: strictNullChecks, noImplicitAny, strictFunctionTypes e altri. Lo abiliti sempre nei nuovi progetti: rileva la maggior parte dei bug.

{
  "compilerOptions": {
    "strict": true  // enables all strict checks
    // or individually:
    // "strictNullChecks": true,
    // "noImplicitAny": true
  }
}

strictNullChecks — eliminare i bug legati a null

Con strictNullChecks abilitato, null e undefined non possono essere assegnati ad altri tipi, a meno che non siano inclusi esplicitamente in un'unione. Questo obbliga a gestire i casi null.

// Without strictNullChecks:
const name: string = null; // allowed

// With strictNullChecks:
const name: string = null; // Error!
const name2: string | null = null; // OK

outDir e rootDir

outDir specifica dove vengono collocati i file JS compilati. rootDir imposta la radice dei file TypeScript sorgente. Insieme, rispecchiano la struttura del codice sorgente all'interno di dist/.

// src/utils.ts → dist/utils.js
{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  }
}

paths — alias dei moduli

Configuri gli alias dei percorsi con l'opzione paths e baseUrl. Ciò consente di importare @/components/Button invece di ../../components/Button.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

Modalità watch e solo controllo dei tipi

tsc --watch ricompila quando cambiano i file. tsc --noEmit esegue il controllo dei tipi senza produrre file: è utile in CI per convalidare i tipi senza duplicare il lavoro del bundler.

# Type check only (no output):
npx tsc --noEmit

# Watch and recompile:
npx tsc --watch

Estensione di tsconfig.json

Utilizzi extends per ereditare da una configurazione di base. Le configurazioni di base condivise, come @tsconfig/strictest, forniscono le best practice della community.

// Install:
npm install -D @tsconfig/strictest

// tsconfig.json:
{
  "extends": "@tsconfig/strictest",
  "compilerOptions": {
    "outDir": "./dist"
  }
}

Verifica rapida

Quale opzione di tsconfig abilita l'insieme completo dei controlli rigorosi sui tipi?

Riepilogo: tsconfig.json

tsc compila TypeScript in JavaScript. tsconfig.json controlla target (versione ES di output), module (sistema dei moduli), outDir, strict e paths. strict: true rileva la maggior parte dei bug. Utilizzi --noEmit in CI per il solo controllo dei tipi. Estenda le configurazioni di base della community per adottare le best practice.

Domande Frequenti

La lezione «Compilare TS e tsconfig.json» è gratuita?

Sì — il testo completo di «Compilare TS e tsconfig.json» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Compilare TS e tsconfig.json»?

Eseguire tsc per compilare TypeScript e configurare il compilatore con opzioni di tsconfig.json come strict, target e outDir. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Compilare TS e tsconfig.json»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Perché TypeScript: i tipi rilevano gli errori in fase di compilazione
Tipi primitivi, union e alias di tipo
Interfacce e tipi di oggetto
Compilare TS e tsconfig.json

← Torna a Frontend Academy