Inférence de Type Conditionnelle : Maîtriser le mot-clé 'infer' en TypeScript

Le système de types de TypeScript offre des outils puissants pour créer du code robuste et maintenable. Parmi ces outils, les types conditionnels se distinguent comme un mécanisme polyvalent pour exprimer des relations de types complexes. Le mot-clé infer, en particulier, ouvre des possibilités avancées au sein des types conditionnels, permettant une extraction et une manipulation de types sophistiquées. Ce guide complet explorera les subtilités de infer, en fournissant des exemples pratiques et des aperçus pour vous aider à maîtriser son utilisation.

Comprendre les Types Conditionnels

Avant de plonger dans infer, il est crucial de saisir les fondamentaux des types conditionnels. Les types conditionnels vous permettent de définir des types qui dépendent d'une condition, à la manière d'un opérateur ternaire en JavaScript. La syntaxe suit ce modèle :

            T extends U ? X : Y
            

              
                Copy
              
            
          

Ici, si le type T est assignable au type U, le type résultant est X ; sinon, c'est Y.

Exemple :

            type IsString<T> = T extends string ? true : false;

type StringCheck = IsString<string>; // type StringCheck = true
type NumberCheck = IsString<number>; // type NumberCheck = false
            

              
                Copy
              
            
          

Cet exemple simple montre comment les types conditionnels peuvent être utilisés pour déterminer si un type est une chaîne de caractères ou non. Ce concept s'étend à des scénarios plus complexes, ouvrant la voie au mot-clé infer.

Introduction au mot-clé 'infer'

Le mot-clé infer est utilisé dans la branche true d'un type conditionnel pour introduire une variable de type qui peut être inférée à partir du type vérifié. Cela vous permet d'extraire des parties spécifiques d'un type et de les utiliser dans le type résultant.

Syntaxe :

            T extends (infer R) ? X : Y
            

              
                Copy
              
            
          

Dans cette syntaxe, R est une variable de type qui sera inférée à partir de la structure de T. Si T correspond au modèle, R contiendra le type inféré, et le type résultant sera X ; sinon, ce sera Y.

Exemples de Base d'Utilisation de 'infer'

1. Inférence du Type de Retour d'une Fonction

Un cas d'utilisation courant est d'inférer le type de retour d'une fonction. Cela peut être réalisé avec le type conditionnel suivant :

            type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;
            

              
                Copy
              
            
          

Explication :

• T extends (...args: any) => any : Cette contrainte garantit que T est une fonction.
• (...args: any) => infer R : Ce modèle correspond à une fonction et infère le type de retour en tant que R.
• R : any : Si T n'est pas une fonction, le type résultant est any.

Exemple :

            function greet(name: string): string {
  return `Hello, ${name}!`;
}

type GreetingReturnType = ReturnType<typeof greet>; // type GreetingReturnType = string

function calculate(a: number, b: number): number {
  return a + b;
}

type CalculateReturnType = ReturnType<typeof calculate>; // type CalculateReturnType = number

            

              
                Copy
              
            
          

Cet exemple démontre comment ReturnType extrait avec succès les types de retour des fonctions greet et calculate.

2. Inférence du Type d'Élément d'un Tableau

Un autre cas d'utilisation fréquent est l'extraction du type d'élément d'un tableau :

            type ElementType<T> = T extends (infer U)[] ? U : never;
            

              
                Copy
              
            
          

Explication :

• T extends (infer U)[] : Ce modèle correspond à un tableau et infère le type d'élément en tant que U.
• U : never : Si T n'est pas un tableau, le type résultant est never.

Exemple :

            type StringArrayElement = ElementType<string[]>; // type StringArrayElement = string
type NumberArrayElement = ElementType<number[]>; // type NumberArrayElement = number
type MixedArrayElement = ElementType<(string | number)[]>; // type MixedArrayElement = string | number

type NotAnArray = ElementType<number>; // type NotAnArray = never
            

              
                Copy
              
            
          

Ceci montre comment ElementType infère correctement le type d'élément de divers types de tableaux.

Utilisation Avancée de 'infer'

1. Inférence des Paramètres d'une Fonction

De manière similaire à l'inférence du type de retour, vous pouvez inférer les paramètres d'une fonction en utilisant infer et les tuples :

            type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
            

              
                Copy
              
            
          

Explication :

• T extends (...args: any) => any : Cette contrainte garantit que T est une fonction.
• (...args: infer P) => any : Ce modèle correspond à une fonction et infère les types des paramètres en tant que tuple P.
• P : never : Si T n'est pas une fonction, le type résultant est never.

Exemple :

            function logMessage(message: string, level: 'info' | 'warn' | 'error'): void {
  console.log(`[${level.toUpperCase()}] ${message}`);
}

type LogMessageParams = Parameters<typeof logMessage>; // type LogMessageParams = [message: string, level: "info" | "warn" | "error"]

function processData(data: any[], callback: (item: any) => void): void {
  data.forEach(callback);
}

type ProcessDataParams = Parameters<typeof processData>; // type ProcessDataParams = [data: any[], callback: (item: any) => void]
            

              
                Copy
              
            
          

Parameters extrait les types des paramètres sous forme de tuple, préservant l'ordre et les types des arguments de la fonction.

2. Extraction de Propriétés d'un Type Objet

infer peut également être utilisé pour extraire des propriétés spécifiques d'un type objet. Cela nécessite un type conditionnel plus complexe, mais permet une manipulation de type puissante.

            type PickByType<T, U> = {
  [K in keyof T as T[K] extends U ? K : never]: T[K];
};
            

              
                Copy
              
            
          

Explication :

• K in keyof T : Itère sur toutes les clés du type T.
• T[K] extends U ? K : never : Ce type conditionnel vérifie si le type de la propriété à la clé K (c'est-à-dire T[K]) est assignable au type U. Si c'est le cas, la clé K est incluse dans le type résultant ; sinon, elle est exclue en utilisant never.
• L'ensemble de la construction crée un nouveau type objet avec uniquement les propriétés dont les types étendent U.

Exemple :

            interface Person {
  name: string;
  age: number;
  city: string;
  country: string;
}


type StringProperties = PickByType<Person, string>; // type StringProperties = { name: string; city: string; country: string; }

type NumberProperties = PickByType<Person, number>; // type NumberProperties = { age: number; }

            

              
                Copy
              
            
          

PickByType vous permet de créer un nouveau type contenant uniquement les propriétés d'un type spécifique à partir d'un type existant.

3. Inférence de Types Imbriqués

infer peut être enchaîné et imbriqué pour extraire des types de structures profondément imbriquées. Par exemple, considérons l'extraction du type de l'élément le plus interne d'un tableau imbriqué.

            type DeepArrayElement<T> = T extends (infer U)[] ? DeepArrayElement<U> : T;
            

              
                Copy
              
            
          

Explication :

• T extends (infer U)[] : Vérifie si T est un tableau et infère le type de l'élément en tant que U.
• DeepArrayElement<U> : Si T est un tableau, le type appelle récursivement DeepArrayElement avec le type d'élément U.
• T : Si T n'est pas un tableau, le type retourne T lui-même.

Exemple :

            type NestedStringArray = string[][][];
type DeepString = DeepArrayElement<NestedStringArray>; // type DeepString = string

type MixedNestedArray = (number | string)[][][][];
type DeepMixed = DeepArrayElement<MixedNestedArray>; // type DeepMixed = string | number

type RegularNumber = DeepArrayElement<number>; // type RegularNumber = number
            

              
                Copy
              
            
          

Cette approche récursive vous permet d'extraire le type de l'élément au niveau le plus profond d'imbrication dans un tableau.

Applications Concrètes

Le mot-clé infer trouve des applications dans divers scénarios où une manipulation de type dynamique est requise. Voici quelques exemples pratiques :

1. Créer un Émetteur d'Événements Typé (Type-Safe)

Vous pouvez utiliser infer pour créer un émetteur d'événements typé qui garantit que les gestionnaires d'événements reçoivent le bon type de données.

            type EventMap = {
  'data': { value: string };
  'error': { message: string };
};

type EventName<T extends EventMap> = keyof T;

type EventData<T extends EventMap, K extends EventName<T>> = T[K];

type EventHandler<T extends EventMap, K extends EventName<T>> = (data: EventData<T, K>) => void;

class EventEmitter<T extends EventMap> {
  private listeners: { [K in EventName<T>]?: EventHandler<T, K>[] } = {};

  on<K extends EventName<T>>(event: K, handler: EventHandler<T, K>): void {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event]!.push(handler);
  }

  emit<K extends EventName<T>>(event: K, data: EventData<T, K>): void {
    this.listeners[event]?.forEach(handler => handler(data));
  }
}


const emitter = new EventEmitter<EventMap>();

emitter.on('data', (data) => {
  console.log(`Received data: ${data.value}`);
});

emitter.on('error', (error) => {
  console.error(`An error occurred: ${error.message}`);
});

emitter.emit('data', { value: 'Hello, world!' });

emitter.emit('error', { message: 'Something went wrong.' });

            

              
                Copy
              
            
          

Dans cet exemple, EventData utilise les types conditionnels et infer pour extraire le type de données associé à un nom d'événement spécifique, garantissant que les gestionnaires d'événements reçoivent le bon type de données.

2. Implémenter un Reducer Typé (Type-Safe)

Vous pouvez tirer parti de infer pour créer une fonction reducer typée pour la gestion de l'état.

            type Action<T extends string, P = undefined> = P extends undefined
  ? { type: T }
  : { type: T; payload: P };

type Reducer<S, A extends Action<string>> = (state: S, action: A) => S;

// Exemples d'Actions
type IncrementAction = Action<'INCREMENT'>;
type DecrementAction = Action<'DECREMENT'>;
type SetValueAction = Action<'SET_VALUE', number>;


// Exemple d'État
interface CounterState {
  value: number;
}

// Exemple de Reducer
const counterReducer: Reducer<CounterState, IncrementAction | DecrementAction | SetValueAction> = (
  state: CounterState,
  action: IncrementAction | DecrementAction | SetValueAction
): CounterState => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, value: state.value + 1 };
    case 'DECREMENT':
      return { ...state, value: state.value - 1 };
    case 'SET_VALUE':
      return { ...state, value: action.payload };
    default:
      return state;
  }
};

// Utilisation
const initialState: CounterState = { value: 0 };
const newState1 = counterReducer(initialState, { type: 'INCREMENT' }); // newState1.value is 1
const newState2 = counterReducer(newState1, { type: 'SET_VALUE', payload: 10 }); // newState2.value is 10

            

              
                Copy
              
            
          

Bien que cet exemple n'utilise pas directement `infer`, il pose les bases pour des scénarios de reducer plus complexes. `infer` peut être appliqué pour extraire dynamiquement le type du `payload` de différents types d'`Action`, permettant une vérification de type plus stricte au sein de la fonction reducer. C'est particulièrement utile dans les grandes applications avec de nombreuses actions et des structures d'état complexes.

3. Génération Dynamique de Types à partir des Réponses d'API

Lorsque vous travaillez avec des API, vous pouvez utiliser infer pour générer automatiquement des types TypeScript à partir de la structure des réponses de l'API. Cela aide à garantir la sécurité des types lors de l'interaction avec des sources de données externes.

Considérons un scénario simplifié où vous souhaitez extraire le type de données d'une réponse d'API générique :

            type ApiResponse<T> = {
  status: number;
  data: T;
  message?: string;
};

type ExtractDataType<T> = T extends ApiResponse<infer U> ? U : never;

// Exemple de Réponse d'API
type User = {
  id: number;
  name: string;
  email: string;
};

type UserApiResponse = ApiResponse<User>;

type ExtractedUser = ExtractDataType<UserApiResponse>; // type ExtractedUser = User

            

              
                Copy
              
            
          

ExtractDataType utilise infer pour extraire le type U de ApiResponse<U>, offrant un moyen typé d'accéder à la structure de données retournée par l'API.

Bonnes Pratiques et Considérations

• Clarté et Lisibilité : Utilisez des noms de variables de type descriptifs (par exemple, ReturnType au lieu de juste R) pour améliorer la lisibilité du code.
• Performance : Bien que infer soit puissant, une utilisation excessive peut avoir un impact sur les performances de la vérification de type. Utilisez-le judicieusement, en particulier dans les grandes bases de code.
• Gestion des Erreurs : Fournissez toujours un type de repli (par exemple, any ou never) dans la branche false d'un type conditionnel pour gérer les cas où le type ne correspond pas au modèle attendu.
• Complexité : Évitez les types conditionnels trop complexes avec des instructions infer imbriquées, car ils peuvent devenir difficiles à comprendre et à maintenir. Refactorisez votre code en types plus petits et plus gérables lorsque cela est nécessaire.
• Tests : Testez minutieusement vos types conditionnels avec divers types d'entrée pour vous assurer qu'ils se comportent comme prévu.

Considérations Globales

Lors de l'utilisation de TypeScript et infer dans un contexte global, considérez ce qui suit :

• Localisation et Internationalisation (i18n) : Les types peuvent avoir besoin de s'adapter à différents paramètres régionaux et formats de données. Utilisez des types conditionnels et `infer` pour gérer dynamiquement des structures de données variables en fonction des exigences spécifiques aux paramètres régionaux. Par exemple, les dates et les devises peuvent être représentées différemment d'un pays à l'autre.
• Conception d'API pour un public mondial : Concevez vos API en gardant à l'esprit l'accessibilité mondiale. Utilisez des structures de données et des formats cohérents, faciles à comprendre et à traiter, quel que soit l'emplacement de l'utilisateur. Les définitions de type doivent refléter cette cohérence.
• Fuseaux Horaires : Lorsque vous traitez des dates et des heures, soyez attentif aux différences de fuseaux horaires. Utilisez des bibliothèques appropriées (par exemple, Luxon, date-fns) pour gérer les conversions de fuseaux horaires et garantir une représentation précise des données dans différentes régions. Envisagez de représenter les dates et les heures au format UTC dans vos réponses d'API.
• Différences Culturelles : Soyez conscient des différences culturelles dans la représentation et l'interprétation des données. Par exemple, les noms, adresses et numéros de téléphone peuvent avoir des formats différents selon les pays. Assurez-vous que vos définitions de type peuvent s'adapter à ces variations.
• Gestion des Devises : Lorsque vous traitez des valeurs monétaires, utilisez une représentation de devise cohérente (par exemple, les codes de devise ISO 4217) et gérez les conversions de devises de manière appropriée. Utilisez des bibliothèques conçues pour la manipulation de devises afin d'éviter les problèmes de précision et d'assurer des calculs exacts.

Par exemple, considérons un scénario où vous récupérez des profils d'utilisateurs de différentes régions, et le format de l'adresse varie en fonction du pays. Vous pouvez utiliser des types conditionnels et `infer` pour ajuster dynamiquement la définition de type en fonction de l'emplacement de l'utilisateur :

            type AddressFormat<CountryCode extends string> = CountryCode extends 'US'
    ? { street: string; city: string; state: string; zipCode: string; }
    : CountryCode extends 'CA'
    ? { street: string; city: string; province: string; postalCode: string; }
    : { addressLines: string[]; city: string; country: string; };

type UserProfile<CountryCode extends string> = {
    id: number;
    name: string;
    email: string;
    address: AddressFormat<CountryCode>;
    countryCode: CountryCode; // Ajouter le code du pays au profil
};

// Exemple d'Utilisation
type USUserProfile = UserProfile<'US'>; // A le format d'adresse américain
type CAUserProfile = UserProfile<'CA'>; // A le format d'adresse canadien
type GenericUserProfile = UserProfile<'DE'>; // A le format d'adresse générique (international)

            

              
                Copy
              
            
          

En incluant le `countryCode` dans le type `UserProfile` et en utilisant des types conditionnels basés sur ce code, vous pouvez ajuster dynamiquement le type `address` pour qu'il corresponde au format attendu pour chaque région. Cela permet une gestion typée des divers formats de données à travers différents pays.

Conclusion

Le mot-clé infer est un ajout puissant au système de types de TypeScript, permettant une manipulation et une extraction de types sophistiquées au sein des types conditionnels. En maîtrisant infer, vous pouvez créer un code plus robuste, typé et maintenable. De l'inférence des types de retour de fonction à l'extraction de propriétés d'objets complexes, les possibilités sont vastes. N'oubliez pas d'utiliser infer judicieusement, en privilégiant la clarté et la lisibilité pour garantir que votre code reste compréhensible et maintenable à long terme.

Ce guide a fourni un aperçu complet de infer et de ses applications. Expérimentez avec les exemples fournis, explorez des cas d'utilisation supplémentaires et tirez parti de infer pour améliorer votre flux de travail de développement TypeScript.