TypeScript Academy · Lezione

Riesportazioni e file barrel

Crei file index per semplificare i percorsi degli import.

Riesportazioni e file barrel è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 2 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.

Benvenuto

I file barrel (index.ts) aggregano e riesportano i contenuti dei moduli, creando una semplice API pubblica per una directory, così chi li utilizza dispone di percorsi di import più ordinati.

Che cos'è un file barrel

Un barrel è un index.ts che riesporta tutto dalla stessa directory. Chi lo utilizza importa dalla directory invece che dai singoli file.

// src/models/index.ts (barrel)
export { User } from './user';
export { Product } from './product';
export { Order } from './order';

Utilizzare il barrel

Importi dal barrel invece che dai singoli file per ottenere percorsi più ordinati.

// Before barrel:
import { User } from '../models/user';
import { Product } from '../models/product';

// After barrel:
import { User, Product } from '../models';

Riesportazione jolly con export *

Riesporti tutte le esportazioni con nome di un modulo con `export *`.

// index.ts
export * from './utils';
export * from './helpers';
export * from './validators';

Rinominare durante la riesportazione

È possibile rinominare le esportazioni mentre le si riesporta.

export { default as MyButton } from './Button';
export { Button as Btn } from './Button';

Riesportazioni di soli tipi

Riesporti i tipi senza alcun impatto a runtime.

export type { User, UserRole } from './user.types';

File barrel per un modulo di funzionalità

Nelle applicazioni di grandi dimensioni, le cartelle delle funzionalità hanno spesso un file barrel che espone solo la superficie pubblica.

// features/auth/index.ts
export { AuthProvider } from './AuthProvider';
export { useAuth } from './useAuth';
export type { AuthUser } from './types';

Rischio di dipendenze circolari

I file barrel possono introdurre dipendenze circolari se i file dello stesso barrel importano indirettamente l'uno dall'altro attraverso l'index. Presti attenzione a questo aspetto.

Tree shaking e barrel

I bundler moderni (Webpack, Rollup, Vite) eseguono il tree shaking delle riesportazioni dei barrel. Nel bundle vengono incluse solo le esportazioni effettivamente utilizzate.

Barrel profondi e superficiali

Annidi i barrel: ogni sottodirectory ha il proprio index.ts e il barrel principale riesporta dai barrel delle sottodirectory.

// src/index.ts
export * from './models';
export * from './services';
export * from './utils';

File barrel e prestazioni di TypeScript

I file barrel profondamente annidati possono rallentare la compilazione di TypeScript. Nei progetti di grandi dimensioni, valuti di appiattire la struttura o di utilizzare invece gli alias paths.

Controllo rapido

Qual è il principale vantaggio dell'utilizzo di un file barrel (index.ts)?

Riepilogo

I file barrel (index.ts) riesportano da una directory, creando percorsi di import ordinati. Utilizzi `export *` per le riesportazioni collettive, `export type` solo per i tipi e presti attenzione ai rischi di dipendenze circolari nei progetti di grandi dimensioni.

Domande Frequenti

La lezione «Riesportazioni e file barrel» è gratuita?

Sì — il testo completo di «Riesportazioni e file barrel» è 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 «Riesportazioni e file barrel»?

Crei file index per semplificare i percorsi degli import. 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 2 di 4.

Quanto tempo richiede la lezione «Riesportazioni e file barrel»?

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

Sintassi dei moduli ES: import ed export
Riesportazioni e file barrel
Import ed export di soli tipi
Namespace o moduli: uso moderno

← Torna a TypeScript Academy