Mappatura dei percorsi e risoluzione dei moduli
Configuri gli alias dei percorsi con baseUrl/paths, comprenda come TS risolve i moduli ed eviti gli errori più comuni.
Mappatura dei percorsi e risoluzione dei moduli è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 3. 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 3 lezioni in totale.
Introduzione
Obiettivo: sostituire le lunghe importazioni relative con gli alias di percorso e comprendere le regole di risoluzione dei moduli di TypeScript`s per mantenere ordinate le importazioni.
Percorsi in tsconfig
Imposti baseUrl (la radice del progetto per le importazioni non relative) e associ gli alias in paths. Le chiavi possono usare i caratteri jolly *.
// file: tsconfig.json (excerpt)
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@utils/*": ["utils/*"],
"@components/*": ["components/*"]
}
}
}Usare un alias
Importi usando l’alias esattamente come è stato dichiarato, ad esempio @utils/date. TypeScript risolve il percorso associato in src/.
// file: src/app.ts
import { formatDate } from "@utils/date";
import Button from "@components/Button";
console.log(formatDate(new Date()));
const btn = new Button();Strategia di risoluzione
La risoluzione dipende da module (Node, NodeNext, Bundler). TS controlla le estensioni dei file e i campi exports/types di package.json, poi ricorre a node_modules.
// Resolution order sketch (NodeNext/Node):
// 1) Exact file: .ts/.tsx/.d.ts/.js
// 2) Index files: index.ts / index.js
// 3) package.json exports / types
// 4) paths & baseUrl fallbacks
// 5) node_modules lookup (upwards)
export const note = "Resolution depends on module setting (Node, NodeNext, Bundler).";Allineamento con il bundler
Importante: TS conosce gli alias per la verifica dei tipi, ma anche il bundler/runtime deve mapparli, ad esempio Vite/Webpack/tsconfig-paths per ts-node.
// Example: vite.config.ts (alias for runtime)
import { defineConfig } from "vite";
import path from "path";
export default defineConfig({
resolve: {
alias: {
"@utils": path.resolve(__dirname, "src/utils"),
"@components": path.resolve(__dirname, "src/components")
}
}
});Suggerimenti e insidie
Suggerimenti:
- Mantenga stabile baseUrl, ad esempio src/.
- Riprovi gli alias nel bundler/runtime.
- Eviti catene profonde di ../..; preferisca alias concisi.
Verifica degli alias di percorso
Verifica rapida: quali opzioni di tsconfig abilitano alias di percorso come @utils/*?
Riepilogo
Riepilogo: configuri baseUrl e paths per gli alias, impari l’ordine di risoluzione di TS e allinei bundler/runtime per evitare importazioni non funzionanti.
Domande Frequenti
La lezione «Mappatura dei percorsi e risoluzione dei moduli» è gratuita?
Sì — il testo completo di «Mappatura dei percorsi e risoluzione dei moduli» è 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 3 lezioni in totale.
Cosa imparerò in «Mappatura dei percorsi e risoluzione dei moduli»?
Configuri gli alias dei percorsi con baseUrl/paths, comprenda come TS risolve i moduli ed eviti gli errori più comuni. 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 3 di 3.
Quanto tempo richiede la lezione «Mappatura dei percorsi e risoluzione dei moduli»?
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
- Moduli ES (named e default), riesportazioni
- Dichiarazioni ambientali (.d.ts) e tipizzazioni di terze parti
- Mappatura dei percorsi e risoluzione dei moduli