0Pricing
TypeScript Academy · Leçon

Stratégie de bibliothèque de types partagés

Créez un paquet de types dédié, utilisé dans tout le monorepo

Stratégie de bibliothèque de types partagés est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

Pourquoi utiliser un paquet de types partagé ?

Le partage des types entre l’interface utilisateur et le serveur élimine les divergences entre les contrats d’API. Une source unique de vérité permet de détecter les erreurs lors de la compilation lorsque la structure de l’API change.

// packages/types/src/index.ts
export interface User { id: string; name: string; email: string; }
export interface ApiResponse<T> { data: T; error?: string; }

Structure du paquet

Gardez le paquet de types minimal : uniquement des exportations de types, sans logique d’exécution. Il reste ainsi dépourvu d’effets secondaires et peut être optimisé par élimination des éléments inutilisés.

packages/types/
├── src/
│   ├── index.ts      # re-exports all
│   ├── user.ts
│   ├── product.ts
│   └── api.ts
├── tsconfig.json
└── package.json

tsconfig pour un paquet de types

Activez emitDeclarationOnly afin qu’aucun JavaScript ne soit généré : uniquement des fichiers .d.ts référencés par les consommateurs.

{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "emitDeclarationOnly": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

Consommer le paquet de types

Référencez le paquet de types dans l’API et l’application web, puis importez les types avec import type afin d’éviter une surcharge à l’exécution.

import type { User, ApiResponse } from "@myapp/types";

async function getUser(id: string): Promise<ApiResponse<User>> {
  // ...
}

Conserver des types sûrs pour la sérialisation

Les types partagés entre le client et le serveur doivent uniquement inclure des valeurs sérialisables en JSON. Évitez les objets Date et utilisez plutôt string (ISO).

// Good: serialization-safe
interface Event { id: string; createdAt: string; /* ISO date */ }
// Bad: Date is not JSON-serializable
interface Event { id: string; createdAt: Date; }

Versionner le paquet de types

Versionnez votre paquet de types selon le versionnage sémantique. Un changement incompatible, comme la suppression ou le renommage d’un champ, entraîne une augmentation de la version majeure.

# Breaking change: major bump
npm version major
# Adding optional fields: minor bump
npm version minor

Générer des types depuis OpenAPI

Automatisez le paquet de types en le générant depuis une spécification OpenAPI avec openapi-typescript. Vous garantissez ainsi que les types correspondent toujours au serveur.

npx openapi-typescript ./api/openapi.yaml -o ./packages/types/src/api.ts

Utiliser Zod pour les types à l’exécution et à la compilation

Définissez les types avec des schémas Zod et déduisez-en les types TypeScript. La validation à l’exécution et les types statiques proviennent ainsi de la même source.

import { z } from "zod";
export const UserSchema = z.object({ id: z.string(), name: z.string() });
export type User = z.infer<typeof UserSchema>;

Éviter les dépendances circulaires

Le paquet de types ne doit pas importer d’éléments provenant d’autres paquets de l’espace de travail afin d’éviter les chaînes de dépendances circulaires. Gardez-le comme nœud terminal du graphe des dépendances.

// types/ should not import from ui/ or api/
// ui/ and api/ both import from types/

Tester la correction des types

Utilisez tsd pour écrire des assertions au niveau des types qui vérifient que les types partagés correspondent aux attentes.

import { expectType } from "tsd";
import type { User } from "@myapp/types";
expectType<User>({ id: "1", name: "Alice", email: "a@b.com" });

Récapitulatif : stratégie de types partagés

Un paquet de types partagé élimine les divergences d’API : générez uniquement les déclarations, conservez des types sérialisables en JSON, versionnez-les selon le versionnage sémantique, générez-les éventuellement automatiquement depuis OpenAPI et testez-les avec tsd.

Vérification rapide

Pourquoi les types d’API partagés doivent-ils utiliser string plutôt que Date ?

Ce que vous avez appris

Un paquet de types partagé constitue une source unique de vérité pour les contrats d’API. Gardez-le limité aux déclarations, compatible avec JSON et versionné selon le versionnage sémantique ; vous pouvez aussi le générer depuis OpenAPI pour éliminer les divergences entre l’interface utilisateur et le serveur.

Questions Fréquemment Posées

La leçon « Stratégie de bibliothèque de types partagés » est-elle gratuite ?

Oui — le texte complet de « Stratégie de bibliothèque de types partagés » 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 « Stratégie de bibliothèque de types partagés » ?

Créez un paquet de types dédié, utilisé dans tout le monorepo 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 3 sur 4.

Combien de temps prend la leçon « Stratégie de bibliothèque de types partagés » ?

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