0Pricing
TypeScript Academy · Lezione

Riferimenti ai progetti TypeScript

Utilizzi le impostazioni composite e references per build composte da più pacchetti.

Riferimenti ai progetti TypeScript è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 1 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 TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 4 lezioni in totale.

Che cosa sono i riferimenti ai progetti?

I riferimenti ai progetti consentono di suddividere una codebase TypeScript in più progetti tsconfig che dichiarano dipendenze reciproche, abilitando build incrementali e isolate.

// tsconfig.json (root)
{
  "references": [
    { "path": "./packages/core" },
    { "path": "./packages/ui" }
  ]
}

Progetti compositi

Ogni progetto referenziato deve avere "composite": true nel proprio tsconfig. Questa impostazione abilita la memorizzazione nella cache delle dichiarazioni e il tracciamento delle dipendenze.

// packages/core/tsconfig.json
{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "outDir": "./dist"
  }
}

Build con tsc --build

Esegua tsc --build (o tsc -b) dalla radice per creare tutti i progetti referenziati nell'ordine delle dipendenze.

# Build all projects
tsc --build

# Build and watch
tsc --build --watch

# Clean build outputs
tsc --build --clean

Ricostruzioni incrementali

Dopo la prima build, tsc --build ricompila solo i progetti i cui file sorgente o dipendenze sono cambiati, velocizzando notevolmente i repository di grandi dimensioni.

# Only changed packages are rebuilt
tsc --build
# Output: 2/5 projects up to date — skipping

Utilizzo dei file di dichiarazione

Un progetto referenziato utilizza le proprie dipendenze tramite i file .d.ts generati nella cartella dist/, invece di analizzare nuovamente i file TypeScript sorgente.

// packages/ui imports from packages/core
import { Button } from "@myapp/core"; // resolved via dist/index.d.ts

Configurazione dei percorsi

Configuri paths nel tsconfig radice oppure utilizzi exports in package.json, così TypeScript può risolvere correttamente gli import dei pacchetti durante lo sviluppo.

{
  "compilerOptions": {
    "paths": {
      "@myapp/core": ["./packages/core/src/index.ts"]
    }
  }
}

Mantenimento dell'ordine di build

TypeScript determina automaticamente l'ordine di build a partire dal grafo dei riferimenti. I riferimenti circolari vengono rilevati e segnalati come errori.

// Circular reference error example:
// packages/core references packages/ui
// packages/ui references packages/core
// Error: Circular project reference

outDir e rootDir

Ogni progetto composito dovrebbe avere outDir e rootDir configurati per controllare la struttura dell'output e impedire che i file oltrepassino i confini dei pacchetti.

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  }
}

Integrazione con gli strumenti di build

Turborepo, Nx e Lerna si integrano con i riferimenti ai progetti per memorizzare nella cache e parallelizzare le build in base al grafo delle dipendenze.

// turbo.json — declare TypeScript build as a pipeline step
{
  "pipeline": {
    "build": { "dependsOn": ["^build"], "outputs": ["dist/**"] }
  }
}

Monitoraggio di più progetti

tsc --build --watch monitora tutti i progetti referenziati e li ricompila in modo incrementale a ogni modifica, fornendo un feedback quasi immediato nei monorepo.

# Terminal: tsc --build --watch
# [9:00:01 AM] Found 0 errors. Watching for file changes.

Riepilogo: riferimenti ai progetti

I riferimenti ai progetti suddividono TypeScript in unità di build isolate e memorizzabili nella cache. Imposti composite: true, dichiari references e utilizzi tsc --build per ottenere build incrementali rapide e corrette nei monorepo.

Verifica rapida

Quale opzione di tsconfig è necessaria affinché un progetto possa essere referenziato da un altro?

Che cosa ha imparato

I riferimenti ai progetti TypeScript consentono build rapide e isolate nei monorepo. Configuri composite: true, dichiari le dipendenze tramite references e crei la build con tsc --build per una compilazione incrementale.

Domande Frequenti

La lezione «Riferimenti ai progetti TypeScript» è gratuita?

Sì — il testo completo di «Riferimenti ai progetti TypeScript» è 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 TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 4 lezioni in totale.

Cosa imparerò in «Riferimenti ai progetti TypeScript»?

Utilizzi le impostazioni composite e references per build composte da più pacchetti. Eserciti TypeScript 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 TypeScript Academy?

Non è richiesta alcuna esperienza precedente. TypeScript 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 1 di 4.

Quanto tempo richiede la lezione «Riferimenti ai progetti TypeScript»?

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 TypeScript Academy?

Sì. Ogni lezione TypeScript 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

  1. Riferimenti ai progetti TypeScript
  2. Workspace pnpm con TypeScript
  3. Strategia per un pacchetto di tipi condivisi
  4. Build incrementali e cache nei monorepo
← Torna a TypeScript Academy