TypeScript-Projektreferenzen erklärt
Verwenden Sie die Einstellungen composite und references für Builds mit mehreren Paketen.
TypeScript-Projektreferenzen erklärt ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.
Was sind Project References?
Mit Project References können Sie eine TypeScript-Codebasis in mehrere tsconfig-Projekte aufteilen, die Abhängigkeiten voneinander deklarieren. Dadurch werden inkrementelle und isolierte Builds ermöglicht.
// tsconfig.json (root)
{
"references": [
{ "path": "./packages/core" },
{ "path": "./packages/ui" }
]
}Composite-Projekte
Jedes referenzierte Projekt muss in seiner tsconfig "composite": true enthalten. Dadurch werden das Caching von Deklarationen und die Nachverfolgung von Abhängigkeiten aktiviert.
// packages/core/tsconfig.json
{
"compilerOptions": {
"composite": true,
"declaration": true,
"outDir": "./dist"
}
}Mit tsc --build bauen
Führen Sie tsc --build (oder tsc -b) im Stammverzeichnis aus, um alle referenzierten Projekte in der Reihenfolge ihrer Abhängigkeiten zu bauen.
# Build all projects
tsc --build
# Build and watch
tsc --build --watch
# Clean build outputs
tsc --build --cleanInkrementelle Neubuilds
Nach dem ersten Build kompiliert tsc --build nur Projekte neu, deren Quelldateien oder Abhängigkeiten geändert wurden. Das beschleunigt große Repositories erheblich.
# Only changed packages are rebuilt
tsc --build
# Output: 2/5 projects up to date — skippingVerwendung von Deklarationsdateien
Ein referenziertes Projekt verwendet seine Abhängigkeiten über deren generierte .d.ts-Dateien in dist/ und nicht, indem es die TypeScript-Quelldateien erneut parst.
// packages/ui imports from packages/core
import { Button } from "@myapp/core"; // resolved via dist/index.d.tsPfadkonfiguration
Richten Sie paths in der Root-tsconfig ein oder verwenden Sie exports in package.json, damit TypeScript Paketimporte während der Entwicklung korrekt auflöst.
{
"compilerOptions": {
"paths": {
"@myapp/core": ["./packages/core/src/index.ts"]
}
}
}Build-Reihenfolge beibehalten
TypeScript bestimmt die Build-Reihenfolge automatisch anhand des Referenzgraphen. Zirkuläre Referenzen werden erkannt und als Fehler gemeldet.
// Circular reference error example:
// packages/core references packages/ui
// packages/ui references packages/core
// Error: Circular project referenceoutDir und rootDir
Jedes Composite-Projekt sollte mit outDir und rootDir konfiguriert sein, um die Ausgabestruktur zu steuern und das Austreten von Dateien über Paketgrenzen hinweg zu verhindern.
{
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist"
}
}Integration mit Build-Tools
Turborepo, Nx und Lerna integrieren Project References, um Builds auf Grundlage des Abhängigkeitsgraphen zu cachen und zu parallelisieren.
// turbo.json — declare TypeScript build as a pipeline step
{
"pipeline": {
"build": { "dependsOn": ["^build"], "outputs": ["dist/**"] }
}
}Mehrere Projekte überwachen
tsc --build --watch überwacht alle referenzierten Projekte und kompiliert sie bei jeder Änderung inkrementell neu. Das ermöglicht in Monorepos nahezu sofortiges Feedback.
# Terminal: tsc --build --watch
# [9:00:01 AM] Found 0 errors. Watching for file changes.Zusammenfassung: Project References
Project References teilen TypeScript in isolierte, cachebare Build-Einheiten auf. Setzen Sie composite: true, deklarieren Sie references und verwenden Sie tsc --build, um in Monorepos schnelle und korrekte inkrementelle Builds durchzuführen.
Kurze Überprüfung
Welche tsconfig-Option ist erforderlich, damit ein Projekt von einem anderen referenziert werden kann?
Das haben Sie gelernt
Mit TypeScript Project References sind schnelle, isolierte Builds in Monorepos möglich. Konfigurieren Sie composite: true, deklarieren Sie Abhängigkeiten über references und führen Sie den Build mit tsc --build für inkrementelle Kompilierung aus.
Häufig gestellte Fragen
Ist die Lektion „TypeScript-Projektreferenzen erklärt“ kostenlos?
Ja — der vollständige Text von „TypeScript-Projektreferenzen erklärt“ 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 „TypeScript-Projektreferenzen erklärt“?
Verwenden Sie die Einstellungen composite und references für Builds mit mehreren Paketen. 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 1 von 4.
Wie lange dauert die Lektion „TypeScript-Projektreferenzen erklärt“?
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
- TypeScript-Projektreferenzen erklärt
- pnpm-Workspaces mit TypeScript
- Strategie für ein gemeinsames Typenpaket
- Inkrementelle Builds und Caching in Monorepos