BaliseTonSite

Interfaces & Types

Donne une forme à tes données.

4.1Les interfaces

Une interface décrit la forme d'un objet - quelles propriétés il doit avoir et de quels types :

TypeScripttypescript
interface Utilisateur {
  nom: string
  email: string
  age: number
  actif: boolean
}

// L'objet DOIT respecter la forme
const alice: Utilisateur = {
  nom: "Alice",
  email: "alice@email.com",
  age: 25,
  actif: true
}

// ❌ Propriété manquante
// const bob: Utilisateur = { nom: "Bob" }
// Erreur : 'email', 'age', 'actif' manquants

// ❌ Propriété en trop
// const charlie: Utilisateur = { ...alice, couleur: "bleu" }
// Erreur : 'couleur' n'existe pas sur Utilisateur

4.2Propriétés optionnelles et readonly

TypeScripttypescript
interface Article {
  readonly id: number        // ← Impossible à modifier après création
  titre: string
  contenu: string
  image?: string             // ← Optionnel
  tags?: string[]            // ← Optionnel
  publieLe: Date
}

const post: Article = {
  id: 1,
  titre: "Premier article",
  contenu: "Contenu ici...",
  publieLe: new Date()
  // image et tags sont optionnels, pas d'erreur
}

// post.id = 2            // ❌ Erreur : 'id' est readonly
post.titre = "Modifié"    // ✅ OK, pas readonly

4.3Le mot-clé type (Type Aliases)

type permet de créer des alias pour n'importe quel type, pas seulement des objets :

TypeScripttypescript
// Type alias pour un objet (similaire à interface)
type Produit = {
  nom: string
  prix: number
  enStock: boolean
}

// Type alias pour des primitifs
type ID = string | number
type Email = string

// Type alias pour des unions
type Statut = "actif" | "inactif" | "suspendu"
type Couleur = "rouge" | "bleu" | "vert"

// Utilisation
let monStatut: Statut = "actif"
// monStatut = "supprimé"    // ❌ Pas dans l'union

let userId: ID = 42
userId = "abc-123"           // ✅ Aussi valide

4.4Interface vs Type - quand utiliser quoi ?

Interface

  • • Décrit la forme d'un objet
  • • Peut être étendue (extends)
  • • Peut être fusionnée (declaration merging)
  • • Idéale pour les contrats d'API
  • • Convention : Props, données, services

Type

  • • Alias pour n'importe quel type
  • • Unions : A | B
  • • Intersections : A & B
  • • Types primitifs, tuples, fonctions
  • • Convention : unions, utilitaires, computed
TypeScripttypescript
// ✅ Interface : contrat pour un objet
interface UserProps {
  name: string
  onSubmit: () => void
}

// ✅ Type : union ou type complexe
type Theme = "light" | "dark"
type EventHandler = (event: MouseEvent) => void
type NumberOrString = number | string

4.5Extension d'interfaces

TypeScripttypescript
// Interface de base
interface Animal {
  nom: string
  age: number
}

// Extension : Chien hérite de Animal
interface Chien extends Animal {
  race: string
  aboie: () => void
}

const rex: Chien = {
  nom: "Rex",
  age: 3,
  race: "Berger Allemand",
  aboie: () => console.log("Woof !")
}

// Extension multiple
interface DocumentSauvegardable {
  sauvegarder: () => Promise<void>
}

interface ArticleBlog extends Article, DocumentSauvegardable {
  auteur: string
  commentaires: number
}

4.6Intersection de types (&)

L'intersection (&) combine plusieurs types en un seul. C'est l'équivalent de extends pour les types :

TypeScripttypescript
type Horodatage = {
  creeLe: Date
  modifieLe: Date
}

type Auteur = {
  auteurId: string
  auteurNom: string
}

// Intersection : combine tout
type ArticleComplet = Article & Horodatage & Auteur

const article: ArticleComplet = {
  id: 1,
  titre: "Mon article",
  contenu: "...",
  publieLe: new Date(),
  creeLe: new Date(),
  modifieLe: new Date(),
  auteurId: "user-1",
  auteurNom: "Alice"
}

4.7Index signatures

Quand tu ne connais pas à l'avance les clés d'un objet :

TypeScripttypescript
// Index signature : clés dynamiques
interface Dictionnaire {
  [cle: string]: string
}

const traductions: Dictionnaire = {
  hello: "bonjour",
  goodbye: "au revoir",
  thanks: "merci"
}

traductions["please"] = "s'il vous plaît"  // ✅

// Combiner propriétés connues et dynamiques
interface Config {
  theme: string                    // Propriété connue
  langue: string                   // Propriété connue
  [option: string]: string         // + options dynamiques
}

const config: Config = {
  theme: "dark",
  langue: "fr",
  debugMode: "true",               // ✅ Clé dynamique
  logLevel: "verbose"              // ✅ Clé dynamique
}

4.8Interfaces pour les fonctions et classes

TypeScripttypescript
// Interface pour une fonction
interface Comparateur {
  (a: number, b: number): number
}

const triAscendant: Comparateur = (a, b) => a - b
const triDescendant: Comparateur = (a, b) => b - a

// Interface pour une classe (contrat)
interface Stockage {
  lire(cle: string): string | null
  ecrire(cle: string, valeur: string): void
  supprimer(cle: string): void
}

// La classe DOIT implémenter toutes les méthodes
class LocalStockage implements Stockage {
  lire(cle: string) { return localStorage.getItem(cle) }
  ecrire(cle: string, valeur: string) { localStorage.setItem(cle, valeur) }
  supprimer(cle: string) { localStorage.removeItem(cle) }
}

Verifie tes acquis

3 questions pour valider ce chapitre

1. Quelle est la difference principale entre interface et type en TypeScript ?

Valide et sauvegarde ce chapitre

Ne perds pas le fil de ton apprentissage. Chaque QCM terminé sauvegarde ton score. Crée ton profil gratuitement pour débloquer toutes les évaluations du site et retrouver tes résultats plus tard.

Commencer l'aventure
Déjà membre ?Connecte-toi