Objets, interface et type

Ce que tu vas apprendre

• Décrire la forme d'un objet avec ses propriétés.
• Écrire une interface et un alias avec type.
• Choisir entre les deux et les combiner.

Typer un objet

Voici une recette sous forme d'objet JavaScript.

const recette: { nom: string; personnes: number } = {
  nom: "Gratin dauphinois",
  personnes: 4
}

Après les deux-points, les accolades décrivent la forme de l'objet : le nom de chaque propriété et son type.

TypeScript vérifie que tout est présent et du bon type. Écrire recette.duree est une erreur, car cette propriété n'existe pas dans la description.

Donner un nom avec interface

Recopier la forme à chaque usage devient vite lourd. Une interface donne un nom à une forme d'objet, que tu réutilises ensuite.

interface Recette {
  nom: string
  personnes: number
  vegetarien: boolean
}

const gratin: Recette = {
  nom: "Gratin dauphinois",
  personnes: 4,
  vegetarien: true
}

Par convention, le nom d'une interface commence par une majuscule. On lit Recette comme « un objet qui a ces trois propriétés ».

Donner un nom avec type

Un alias de type fait la même chose avec le mot type et un signe égal.

type Ingredient = {
  nom: string
  quantite: number
  unite: string
}

Un alias peut nommer n'importe quel type, pas seulement un objet. On le verra avec les unions dans le prochain cours.

Propriétés optionnelles et en lecture seule

Un point d'interrogation après le nom rend la propriété facultative. Le mot readonly interdit de la modifier après la création.

interface Recette {
  readonly id: number
  nom: string
  duree?: number
}

const tarte: Recette = { id: 1, nom: "Tarte aux pommes" }
tarte.id = 2        // Erreur : lecture seule
tarte.duree         // number | undefined

Une propriété optionnelle peut valoir undefined. TypeScript te force donc à gérer ce cas avant de t'en servir.

Des objets dans des objets

Les propriétés peuvent elles-mêmes être des types nommés ou des tableaux.

interface Recette {
  nom: string
  ingredients: Ingredient[]
  auteur: { nom: string; pseudo?: string }
}

Ingredient[] est un tableau d'objets de type Ingredient. Tu peux donc écrire recette.ingredients[0].quantite et l'éditeur propose la bonne propriété.

Étendre une interface

Pour construire un type à partir d'un autre, une interface utilise extends.

interface Recette {
  nom: string
  personnes: number
}

interface RecetteDuJour extends Recette {
  date: string
}

RecetteDuJour possède nom, personnes et date. Un alias fait la même chose avec une intersection, notée &.

type RecetteDuJour = Recette & { date: string }

Interface ou type : lequel choisir

La documentation officielle donne un conseil simple : utilise interface tant que tu n'as pas besoin d'une fonction propre à type, comme nommer une union.

La dernière ligne s'appelle la fusion de déclarations : deux interfaces de même nom se fondent en une seule. Un alias déclaré deux fois produit une erreur.

Pour un débutant, la différence compte peu. Choisis l'un des deux et garde-le dans tout le projet.

Un objet est vérifié selon sa forme

TypeScript compare la forme, pas le nom. Un objet qui possède les bonnes propriétés convient, même s'il n'a pas été créé avec ton interface.

function afficher(recette: Recette) {
  console.log(recette.nom)
}

afficher({ nom: "Crêpes", personnes: 6 })

Un littéral d'objet passé directement est examiné de plus près : une propriété en trop, comme une faute de frappe sur personne, est signalée.

Fixer des valeurs avec as const

Un objet déclaré avec const voit ses propriétés rester modifiables. Pour obtenir des valeurs figées, ajoute as const après l'objet.

const requete = { url: "/recettes", methode: "GET" } as const

La propriété methode n'est alors plus un string quelconque, mais exactement "GET". Cette idée est le sujet du cours suivant.

À retenir

• { nom: string } décrit la forme d'un objet : propriétés et types.
• Une interface ou un type donne un nom à cette forme.
• ? rend une propriété facultative, readonly interdit de la modifier.
• extends pour une interface, & pour un alias : les deux combinent des types.
• Conseil officiel : interface par défaut, type pour les unions.
• TypeScript compare la forme des objets, pas leur nom.