TypeScript : Maîtriser l'opérateur `satisfies`

TypeScript : Maîtriser l'opérateur satisfies

L'opérateur satisfies est l'une des fonctionnalités les plus puissantes de TypeScript pour la validation de types. Introduit dans la version 4.9, il offre un parfait équilibre entre vérification de type stricte et inférence de type intelligente. Découvrons ensemble comment l'utiliser efficacement.

Le problème que résout satisfies

En TypeScript, nous avons souvent besoin de vérifier qu'un objet correspond à un type spécifique tout en préservant l'information exacte sur ses propriétés. Les approches traditionnelles présentent des limitations :

typescript
1// Définition du type
2type ColorMap = {
3  primary: string;
4  secondary: string;
5};
6
7// Approche 1 : Annotation de type - Perte d'information précise
8const colors: ColorMap = {
9  primary: '#007bff',
10  secondary: '#6c757d',
11}; // Le type exact des valeurs est perdu
12
13// Approche 2 : Sans annotation - Pas de validation
14const colors2 = {
15  primary: '#007bff',
16  secondary: '#6c757d',
17}; // Aucune validation par rapport à ColorMap

L'opérateur satisfies à la rescousse

satisfies nous permet d'avoir le meilleur des deux mondes :

typescript
1const colors = {
2  primary: '#007bff',
3  secondary: '#6c757d',
4} satisfies ColorMap;
5
6// ✅ Vérifie la conformité avec ColorMap
7// ✅ Préserve l'information littérale des chaînes
8// ✅ L'autocomplétion fonctionne parfaitement

Cas d'utilisation concrets

1. Validation de configuration

typescript
1type Config = {
2  api: {
3    endpoint: string;
4    timeout?: number;
5  };
6  features: Record<string, boolean>;
7};
8
9const config = {
10  api: {
11    endpoint: 'https://api.example.com',
12    timeout: 5000,
13    retryCount: 3, // Propriété supplémentaire autorisée
14  },
15  features: {
16    darkMode: true,
17    betaFeatures: false,
18  },
19} satisfies Config;
20
21// TypeScript vérifie que les propriétés requises sont présentes
22// tout en permettant des propriétés supplémentaires

2. Typage de constantes avec union de types

typescript
1type MediaType = 'image' | 'video' | 'audio';
2
3const MEDIA_CONFIG = {
4  image: { maxSize: 5000000, formats: ['jpg', 'png'] },
5  video: { maxSize: 50000000, formats: ['mp4', 'mov'] },
6  audio: { maxSize: 10000000, formats: ['mp3', 'wav'] },
7} satisfies Record<MediaType, { maxSize: number; formats: string[] }>;
8
9// L'accès aux propriétés conserve leur type précis
10const imageFormats = MEDIA_CONFIG.image.formats; // string[]

Bonnes pratiques

1. Utilisez satisfies pour les objets de configuration

   • Idéal pour valider la structure tout en permettant des extensions

2. Préférez satisfies aux assertions de type

   • Plus sûr que as car la validation est faite à la définition

3. Combinez avec des types utilitaires

   typescript
   1type Partial<T> = { [P in keyof T]?: T[P] };
   2
   3const partialConfig = {
   4  api: { endpoint: 'https://api.example.com' },
   5} satisfies Partial<Config>;
   

Limitations et pièges à éviter

1. Ne pas surcharger les types

   typescript
   1// ❌ Trop restrictif
   2type StrictConfig = {
   3  [K in string]: never;
   4} & Config;
   5
   6// ✅ Plus flexible
   7type ExtensibleConfig = Config & Record<string, unknown>;
   

2. Attention aux types union

   typescript
   1type Status = 'success' | 'error';
   2
   3// ❌ Peut être trompeur
   4const result = { status: 'success' as Status };
   5
   6// ✅ Plus sûr
   7const result = { status: 'success' } satisfies { status: Status };
   

Conclusion

L'opérateur satisfies est un outil puissant pour la validation de types en TypeScript. Il permet de :

• Vérifier la conformité avec un type
• Préserver l'inférence de type précise
• Autoriser des extensions tout en garantissant la structure de base

En l'utilisant judicieusement, vous pouvez rendre votre code plus robuste tout en conservant la flexibilité nécessaire pour votre application.