0Pricing
TypeScript Academy · Lektion

Pfad-Aliase und baseUrl

Konfigurieren Sie Pfade für übersichtlichere Importe.

Pfad-Aliase und baseUrl ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Willkommen

Pfad-Aliase vereinfachen tief verschachtelte relative Importpfade und werden in tsconfig konfiguriert.

Das Problem mit Importpfaden

Tiefe relative Pfade wie ../../../../utils sind fehleranfällig und schwer zu lesen.
import { logger } from '../../../../utils/logger';
import { User } from '../../../models/user';

baseUrl

baseUrl legt das Stammverzeichnis für die Auflösung nicht relativer Imports fest.
{ "compilerOptions": { "baseUrl": "./src" } }
// Now you can import from 'utils/logger' directly

paths-Aliase

paths ordnet Importpräfixe Verzeichnispfaden zu.
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], "@utils/*": ["src/utils/*"] } } }

Pfad-Aliase verwenden

Importieren Sie mit dem Präfix @ statt mit relativen Pfaden.
import { logger } from '@/utils/logger';
import { User } from '@/models/user';

Bundler-Konfiguration

Bundler wie Vite und webpack müssen separat konfiguriert werden, damit sie Pfad-Aliase auflösen können.
// vite.config.ts
import { resolve } from 'path';
export default { resolve: { alias: { '@': resolve(__dirname, 'src') } } };

tsconfig-paths für Node

Verwenden Sie tsconfig-paths zusammen mit ts-node, um Pfad-Aliase in Node.js aufzulösen.
npm install tsconfig-paths
// tsconfig.json: "ts-node": { "require": ["tsconfig-paths/register"] }

Mehrere Pfadzuordnungen

Definieren Sie Aliase für verschiedene Teile Ihres Projekts.
{ "paths": { "@models/*": ["src/models/*"], "@services/*": ["src/services/*"], "@utils/*": ["src/utils/*"] } }

Wildcard-Pfade

Der Platzhalter * passt auf jeden Unterpfad.
// '@/*': ['src/*'] maps '@/foo/bar' to 'src/foo/bar'

Exakte Pfad-Aliase

Vergeben Sie für ein bestimmtes Modul einen Alias, der auf eine bestimmte Datei zeigt.
{ "paths": { "@config": ["src/config/index.ts"], "@types": ["src/types/index.ts"] } }

Pfad-Aliase im Vergleich zu Barrel-Dateien

Verwenden Sie beides zusammen: Pfad-Aliase verringern die Verschachtelung, Barrel-Dateien bündeln Exporte.

Schnelltest

Was legt die Option `baseUrl` in tsconfig fest?

Zusammenfassung

Pfad-Aliase und baseUrl: Sie beherrschen die zentralen Konzepte und Muster.

Häufig gestellte Fragen

Ist die Lektion „Pfad-Aliase und baseUrl“ kostenlos?

Ja — der vollständige Text von „Pfad-Aliase und baseUrl“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Pfad-Aliase und baseUrl“?

Konfigurieren Sie Pfade für übersichtlichere Importe. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Pfad-Aliase und baseUrl“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Das strict-Flag und seine Möglichkeiten
  2. Modul- und Target-Konfiguration
  3. Pfad-Aliase und baseUrl
  4. Inkrementelle Builds und Deklarationsdateien
← Zurück zu TypeScript Academy