Kodokon kodokon.com

Objets et interfaces

Décrivez la forme de vos objets avec des types précis, puis rendez-les réutilisables grâce aux interfaces.

8 min · 3 questions

Ouvrir cette leçon dans Kodokon

En JavaScript, un objet regroupe plusieurs informations liées sous forme de paires clé-valeur, comme une fiche : un livre a un titre et un nombre de pages. En TypeScript, vous pouvez décrire la forme exacte d'un objet : quelles propriétés il contient et de quel type est chacune.

TYPESCRIPT
const book: { title: string; pages: number } = {
  title: "Le Petit Prince",
  pages: 96,
};

console.log(book.title); // "Le Petit Prince"
La forme de l'objet est écrite directement dans le type.

Écrire la forme à chaque fois devient vite répétitif. Une interface donne un nom à cette forme, pour la réutiliser partout. On la déclare avec le mot-clé interface, suivi d'un nom (par convention avec une majuscule), puis de la liste des propriétés et de leurs types.

TYPESCRIPT
interface Recipe {
  name: string;
  servings: number;
  isVegetarian: boolean;
}

const pancakes: Recipe = {
  name: "Pancakes",
  servings: 4,
  isVegetarian: true,
};
L'interface Recipe décrit toutes les recettes du programme.

Toutes les propriétés d'une interface sont obligatoires par défaut : oublier servings déclencherait une erreur. Pour rendre une propriété facultative, ajoutez un point d'interrogation ? juste après son nom. L'objet pourra alors être créé avec ou sans cette propriété.

TYPESCRIPT
interface Contact {
  name: string;
  phone: string;
  email?: string; // facultative grâce au ?
}

const alice: Contact = {
  name: "Alice",
  phone: "0601020304",
}; // accepté : email peut être omis
email? rend la propriété optionnelle.

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

  1. À quoi sert une interface en TypeScript ?
    • À décrire la forme d'un objet et la réutiliser
    • À créer une page web
    • À exécuter une fonction plus vite
    • À stocker des données sur un serveur
  2. Que signifie le point d'interrogation dans email?: string ?
    • La propriété email est obligatoire
    • La propriété email est facultative
    • La propriété email est toujours vide
  3. Un objet typé Recipe oublie la propriété name. Que se passe-t-il ?
    • TypeScript signale une erreur avant l'exécution
    • Le programme plante sans prévenir pendant l'exécution
    • TypeScript ajoute la propriété automatiquement