0Pricing
TypeScript Academy · Leçon

Les références de projets TypeScript expliquées

Utilisez les paramètres composite et references pour les compilations multipackages

Les références de projets TypeScript expliquées est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.

Que sont les références de projet ?

Les références de projet vous permettent de diviser une base de code TypeScript en plusieurs projets tsconfig qui déclarent leurs dépendances mutuelles, ce qui permet des compilations incrémentielles et isolées.

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

Projets composites

Chaque projet référencé doit contenir "composite": true dans son tsconfig. Cela active la mise en cache des déclarations et le suivi des dépendances.

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

Compiler avec tsc --build

Exécutez tsc --build (ou tsc -b) depuis la racine pour compiler tous les projets référencés dans l’ordre de leurs dépendances.

# Build all projects
tsc --build

# Build and watch
tsc --build --watch

# Clean build outputs
tsc --build --clean

Recompilations incrémentielles

Après la première compilation, tsc --build ne recompile que les projets dont les fichiers source ou les dépendances ont changé, ce qui accélère considérablement les grands dépôts.

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

Consommation des fichiers de déclaration

Un projet référencé consomme ses dépendances via leurs fichiers .d.ts générés dans dist/, plutôt que de réanalyser les fichiers TypeScript source.

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

Configuration des chemins

Configurez paths dans le tsconfig racine ou utilisez exports dans package.json afin que TypeScript résolve correctement les importations de paquets pendant le développement.

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

Préserver l’ordre de compilation

TypeScript détermine automatiquement l’ordre de compilation à partir du graphe des références. Les références circulaires sont détectées et signalées comme des erreurs.

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

outDir et rootDir

Chaque projet composite doit être configuré avec outDir et rootDir afin de contrôler la structure de sortie et d’empêcher les fichiers de déborder des limites des paquets.

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

Intégration aux outils de compilation

Turborepo, Nx et Lerna s’intègrent aux références de projet pour mettre en cache et paralléliser les compilations en fonction du graphe des dépendances.

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

Surveiller plusieurs projets

tsc --build --watch surveille tous les projets référencés et les recompile progressivement à chaque modification, offrant un retour presque instantané dans les monodépôts.

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

Récapitulatif : références de projet

Les références de projet divisent TypeScript en unités de compilation isolées et pouvant être mises en cache. Définissez composite: true, déclarez references et utilisez tsc --build pour obtenir des compilations incrémentielles rapides et correctes dans les monodépôts.

Vérification rapide

Quelle option de tsconfig est requise pour qu’un projet puisse être référencé par un autre ?

Ce que vous avez appris

Les références de projet TypeScript permettent des compilations rapides et isolées dans les monodépôts. Configurez composite: true, déclarez les dépendances via references et compilez avec tsc --build pour une compilation incrémentielle.

Questions Fréquemment Posées

La leçon « Les références de projets TypeScript expliquées » est-elle gratuite ?

Oui — le texte complet de « Les références de projets TypeScript expliquées » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Les références de projets TypeScript expliquées » ?

Utilisez les paramètres composite et references pour les compilations multipackages Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer TypeScript Academy ?

Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Les références de projets TypeScript expliquées » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?

Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Les références de projets TypeScript expliquées
  2. Espaces de travail pnpm avec TypeScript
  3. Stratégie de bibliothèque de types partagés
  4. Compilations incrémentielles et cache dans les monorepos
← Retour à TypeScript Academy