0Pricing
Frontend Academy · Leçon

Interfaces et types d’objets

Décrivez la structure des objets avec interface et type, étendez les interfaces, utilisez des propriétés facultatives avec ? et readonly pour garantir l’immuabilité.

Interfaces et types d’objets est une leçon Frontend 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

interface ou type

Les deux, interface et type, décrivent la structure des objets. La différence essentielle est que les interfaces peuvent être fusionnées (fusion de déclarations) et sont généralement préférées pour définir les structures des API publiques. Les alias de type sont plus flexibles pour les types complexes.

// interface:
interface User {
  id: number;
  name: string;
}

// type alias (equivalent for objects):
type User = {
  id: number;
  name: string;
};

Définir une interface

Utilisez interface pour définir la structure d'un objet. Toutes les propriétés sont obligatoires par défaut. Séparez les propriétés par des points-virgules.

interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
  inStock: boolean;
  category: string;
}

Propriétés facultatives et en lecture seule

Rendez les propriétés facultatives avec ?. Utilisez readonly pour empêcher leur modification. Le caractère readonly impose l'immutabilité lors de la compilation.

interface Config {
  host: string;
  port?: number;          // optional: number | undefined
  readonly apiKey: string; // can't change after assignment
}

const config: Config = { host: 'localhost', apiKey: 'abc' };
config.port = 8080;       // OK
config.apiKey = 'new';    // Error: readonly

Étendre des interfaces

Utilisez extends pour créer une nouvelle interface qui inclut toutes les propriétés d'une autre. L'héritage multiple est pris en charge.

interface Animal {
  name: string;
  sound(): string;
}

interface Dog extends Animal {
  breed: string;
  fetch(): void;
}

interface ServiceDog extends Dog {
  task: string;
}

Signatures d'index — clés dynamiques

Lorsque vous ne connaissez pas à l'avance les noms des propriétés, mais que vous connaissez les types de leurs valeurs, utilisez une signature d'index.

interface StringMap {
  [key: string]: string;
}

const headers: StringMap = {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer token123'
};

// Also for translating:
interface Translations {
  [locale: string]: { [key: string]: string };
}

Types de fonctions dans les interfaces

Définissez des signatures de méthodes dans une interface : la syntaxe abrégée et la syntaxe complète des propriétés fonctionnent toutes les deux.

interface Logger {
  log(message: string): void;
  warn(message: string): void;
  error(message: string, err?: Error): void;
}

// Also valid:
interface Logger2 {
  log: (message: string) => void;
}

Implémenter des interfaces dans des classes

Une classe peut implement une ou plusieurs interfaces. TypeScript vérifie que la classe fournit tous les membres requis.

interface Serialisable {
  serialise(): string;
  deserialise(data: string): this;
}

class User implements Serialisable {
  constructor(public name: string) {}
  serialise() { return JSON.stringify({ name: this.name }); }
  deserialise(data: string) {
    const obj = JSON.parse(data);
    return new User(obj.name) as this;
  }
}

Fusion de déclarations

Plusieurs déclarations d'interface portant le même nom sont fusionnées en une seule. Cela est utile pour étendre des types provenant de bibliothèques tierces. Les alias de type ne prennent pas cette fonctionnalité en charge.

interface Window {
  myPlugin: { version: string };
}
// Now window.myPlugin is typed everywhere

Types d'objets imbriqués

Les propriétés d'une interface peuvent elles-mêmes avoir des types d'objet, définis directement ou par référence à une autre interface.

interface Order {
  id: string;
  customer: {
    name: string;
    email: string;
  };
  items: Array<{
    productId: string;
    quantity: number;
    price: number;
  }>;
  total: number;
}

Typage structurel — typage canard

TypeScript utilise le typage structurel : une valeur est conforme à un type si elle possède au moins les propriétés requises. Il n'est pas nécessaire d'utiliser une implémentation explicite. Tout objet ayant la bonne structure est compatible.

interface Named {
  name: string;
}

function greet(obj: Named) {
  console.log(`Hello, ${obj.name}!`);
}

// No 'implements Named' needed:
greet({ name: 'Alice', age: 30 }); // OK — has the name property

Unions discriminées avec des interfaces

Ajoutez une propriété discriminante de type littéral pour différencier les variantes d'une union. TypeScript affine le type dans les blocs conditionnels en fonction du discriminant.

interface Circle { kind: 'circle'; radius: number; }
interface Square { kind: 'square'; side: number; }
type Shape = Circle | Square;

function area(shape: Shape): number {
  switch (shape.kind) {
    case 'circle': return Math.PI * shape.radius ** 2;
    case 'square': return shape.side ** 2;
  }
}

Vérification rapide

Quelle est la différence essentielle entre interface et type dans TypeScript ?

Récapitulatif : interfaces

interface décrit la structure des objets avec des propriétés obligatoires, facultatives et en lecture seule. Étendez les interfaces avec le mot-clé d'extension. Utilisez les signatures d'index pour les clés dynamiques. Les classes implémentent les interfaces. La fusion de déclarations est propre aux interfaces. TypeScript utilise le typage structurel : c'est la structure qui compte, et non la déclaration explicite.

Questions Fréquemment Posées

La leçon « Interfaces et types d’objets » est-elle gratuite ?

Oui — le texte complet de « Interfaces et types d’objets » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Interfaces et types d’objets » ?

Décrivez la structure des objets avec interface et type, étendez les interfaces, utilisez des propriétés facultatives avec ? et readonly pour garantir l’immuabilité. Tu pratiques Frontend 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 Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend 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 « Interfaces et types d’objets » ?

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 Frontend Academy ?

Oui. Chaque leçon Frontend 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. Pourquoi TypeScript : les types détectent les bogues à la compilation
  2. Types primitifs, unions et alias de types
  3. Interfaces et types d’objets
  4. Compiler TS et tsconfig.json
← Retour à Frontend Academy