Interfaces génériques

Fait partie de la section Introduction à TypeScript du Journey JavaScript de Coddy — leçon 61 sur 73.

Tout comme vous pouvez créer des fonctions génériques, vous pouvez également créer des interfaces génériques. Cela vous permet de définir la forme d'un objet tout en gardant certains types de propriétés flexibles et réutilisables.

Voici comment créer une interface générique en utilisant la même syntaxe de paramètre de type :

interface Container {
  value: T;
  isEmpty: boolean;
}

Le <T> après le nom de l'interface crée un paramètre de type qui peut être utilisé dans toute la définition de l'interface. Dans cet exemple, la propriété value aura le type que vous spécifierez lors de l'utilisation de l'interface, tandis que isEmpty reste un type boolean fixe.

Lorsque vous utilisez une interface générique, vous spécifiez le type concret entre chevrons :

const stringContainer: Container = {
  value: "hello",
  isEmpty: false
};

const numberContainer: Container = {
  value: 42,
  isEmpty: false
};

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Défi

Facile

Créez une interface générique nommée Result qui peut contenir des données de n'importe quel type ainsi que des informations de succès.

L'interface doit avoir deux propriétés :

success de type boolean
data de type T (le paramètre de type générique)

Créez les objets suivants en utilisant votre interface générique :

stringResult de type Result<string> avec success: true et data: "Operation completed"
numberResult de type Result<number> avec success: true et data: 42
booleanResult de type Result<boolean> avec success: false et data: false
arrayResult de type Result<string[]> avec success: true et data: ["item1", "item2", "item3"]

Créez une fonction générique nommée processResult qui :

Utilise un paramètre de type générique T
Prend un paramètre result de type Result<T>
Retourne un message sous forme de chaîne de caractères
Si success est true, retourne "Success: [data]"
Si success est false, retourne "Failed: [data]"

Affichez les sorties suivantes :

Affichez le résultat de l'appel de processResult avec stringResult
Affichez le résultat de l'appel de processResult avec numberResult
Affichez le résultat de l'appel de processResult avec booleanResult
Affichez le résultat de l'appel de processResult avec arrayResult
Affichez stringResult.data

Aide-mémoire

Les interfaces génériques vous permettent de définir la forme d'un objet tout en gardant certains types de propriétés flexibles et réutilisables.

Créez une interface générique en utilisant la syntaxe des paramètres de type :

interface Container<T> {
  value: T;
  isEmpty: boolean;
}

Le <T> après le nom de l'interface crée un paramètre de type qui peut être utilisé dans toute la définition de l'interface.

Utilisez une interface générique en spécifiant le type concret entre chevrons :

const stringContainer: Container<string> = {
  value: "hello",
  isEmpty: false
};

const numberContainer: Container<number> = {
  value: 42,
  isEmpty: false
};

Essayez vous-même

// À FAIRE : Écrivez votre code ici

// Créer l'interface générique Result


// Créer les objets en utilisant l'interface Result


// Créer la fonction générique processResult


// Afficher les sorties requises

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.