TypeScript Academy · leksjon

TypeScript-prosjektreferanser forklart

Bruk innstillingene composite og references for bygging av flere pakker.

Leksjon 1 av 413 trinn

TypeScript-prosjektreferanser forklart er en gratis leksjon i TypeScript Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i TypeScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.

Hva er prosjektreferanser?

Prosjektreferanser lar Dem dele en TypeScript-kodebase opp i flere tsconfig-prosjekter som deklarerer avhengigheter til hverandre, slik at De får inkrementelle og isolerte bygg.

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

Komposittprosjekter

Hvert referert prosjekt må ha "composite": true i tsconfig. Dette aktiverer hurtigbufring av deklarasjoner og sporing av avhengigheter.

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

Bygging med tsc --build

Kjør tsc --build (eller tsc -b) fra roten for å bygge alle refererte prosjekter i avhengighetsrekkefølge.

# Build all projects
tsc --build

# Build and watch
tsc --build --watch

# Clean build outputs
tsc --build --clean

Inkrementelle bygg

Etter det første bygget kompilerer tsc --build bare prosjekter der kildefiler eller avhengigheter er endret. Dette gir betydelig raskere bygg i store kodebaser.

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

Bruk av deklarasjonsfiler

Et referert prosjekt bruker avhengighetene sine via de genererte .d.ts-filene i dist/, ikke ved å analysere TypeScript-kildefilene på nytt.

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

Konfigurering av paths

Konfigurer paths i rotens tsconfig, eller bruk exports i package.json, slik at TypeScript løser pakkeimporter riktig under utvikling.

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

Bevaring av byggerekkefølgen

TypeScript bestemmer automatisk byggerekkefølgen ut fra referansegrafen. Sirkulære referanser oppdages og rapporteres som feil.

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

outDir og rootDir

Hvert komposittprosjekt bør ha outDir og rootDir konfigurert for å styre utdataoppsettet og hindre at filer lekker på tvers av pakkegrensene.

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

Integrasjon med byggeverktøy

Turborepo, Nx og Lerna integreres med prosjektreferanser for å hurtigbufre og parallellisere bygg basert på avhengighetsgrafen.

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

Overvåking av flere prosjekter

tsc --build --watch overvåker alle refererte prosjekter og kompilerer dem inkrementelt på nytt ved hver endring, noe som gir nesten umiddelbare tilbakemeldinger i monorepoer.

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

Oppsummering: Prosjektreferanser

Prosjektreferanser deler TypeScript inn i isolerte, hurtigbufferbare byggeenheter. Angi composite: true, deklarer references, og bruk tsc --build for raske og korrekte inkrementelle bygg i monorepoer.

Rask kontroll

Hvilket tsconfig-alternativ kreves for at et prosjekt skal kunne refereres av et annet?

Besvar den i den interaktive leksjonen

Dette har De lært

TypeScript-prosjektreferanser muliggjør raske, isolerte bygg i monorepoer. Konfigurer composite: true, deklarer avhengigheter via references, og bygg med tsc --build for inkrementell kompilering.

Gratis å komme i gang

Lær deg TypeScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 101
Leksjoner: 352

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «TypeScript-prosjektreferanser forklart» gratis?

Ja – hele teksten i «TypeScript-prosjektreferanser forklart» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av TypeScript Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «TypeScript-prosjektreferanser forklart»?

Bruk innstillingene composite og references for bygging av flere pakker. Du øver på TypeScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med TypeScript Academy?

Ingen tidligere erfaring er nødvendig. TypeScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «TypeScript-prosjektreferanser forklart»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne TypeScript Academy-leksjonen?

Ja. Alle TypeScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

TypeScript-prosjektreferanser forklart
pnpm Workspaces med TypeScript
Strategi for en delt types-pakke
Inkrementelle bygg og hurtigbuffer i monorepoer

← Tilbake til TypeScript Academy