Monorepo avec TypeScript : organisation du code en pratique

Monorepo avec TypeScript : organisation du code en pratique

Le développement frontend et backend moderne est de plus en plus confronté au problème de la gestion de plusieurs projets interconnectés. Lorsque le nombre de packages, de bibliothèques et d'applications augmente, l'approche traditionnelle avec des dépôts séparés (multi-repo) commence à ralentir le développement : duplication de code, difficultés de synchronisation des versions et longs cycles de révision. La solution est le monorepo, surtout en combinaison avec TypeScript. Dans cet article, nous aborderons les aspects pratiques de l'organisation du code dans un monorepo TypeScript : du choix des outils aux exemples concrets de structure et de configuration.

Qu'est-ce qu'un monorepo et pourquoi est-il utile pour les projets TypeScript ?

Un monorepo est une approche dans laquelle le code de plusieurs projets (packages, bibliothèques, services) est stocké dans un seul dépôt Git. C'est particulièrement pertinent pour TypeScript, car le langage à typage strict permet de réutiliser facilement des types et des interfaces communs entre différentes parties du système.

Les principaux avantages d'un monorepo avec TypeScript :

• Version unique des dépendances — on évite la situation où différents projets utilisent différentes versions d'une même bibliothèque.
• Réutilisation du code — les types, utilitaires et configurations communs sont facilement accessibles à tous les packages.
• Commits atomiques — les modifications affectant plusieurs packages peuvent être commitées ensemble.
• Simplification du CI/CD — un seul pipeline pour la construction et les tests de toutes les parties.

Cependant, un monorepo exige de la discipline dans l'organisation du code. Sans une structure appropriée, il se transforme en "dépotoir". TypeScript aide à mettre de l'ordre grâce à son typage strict et à son système modulaire.

Choix de l'outil de gestion du monorepo

Il existe plusieurs outils populaires pour travailler avec les monorepos. Examinons les deux plus courants pour TypeScript : Nx et Turborepo.

Nx est un système puissant avec prise en charge des monorepos, génération de code et mise en cache avancée. Il convient parfaitement aux grands projets avec de nombreux packages.

Turborepo est un outil plus léger et plus rapide de Vercel, axé sur la simplicité. Il est idéal pour les projets de taille moyenne et les équipes qui souhaitent une configuration minimale.

Exemple de configuration de base avec Turborepo :

// turbo.json{  "$schema": "https://turbo.build/schema.json",  "pipeline": {    "build": {      "dependsOn": ["^build"],      "outputs": ["dist/**"]    },    "test": {      "dependsOn": ["build"]    },    "lint": {}  }}

Pour TypeScript, la configuration de tsconfig.json avec la prise en charge des project references est obligatoire. Cela permet au compilateur de comprendre les dépendances entre les packages.

// tsconfig.base.json{  "compilerOptions": {    "target": "ES2020",    "module": "ESNext",    "moduleResolution": "bundler",    "strict": true,    "composite": true,    "declaration": true,    "declarationMap": true,    "sourceMap": true,    "outDir": "./dist",    "rootDir": "./src"  }}

Organisation pratique de la structure du monorepo

Le principe clé est la division du code en couches logiques. Examinons une structure typique pour un monorepo TypeScript avec une application web et un backend :

monorepo/├── apps/│   ├── web/          # Application Frontend (React, Vue, etc.)│   └── api/          # Service Backend (Express, NestJS)├── packages/│   ├── shared/       # Types et interfaces communs│   ├── utils/        # Fonctions utilitaires│   ├── ui/           # Composants UI (si utilisés)│   └── config/       # Configurations communes (eslint, tsconfig)├── tools/            # Scripts et outils pour le CI/CD├── turbo.json├── package.json└── tsconfig.