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 Utilisateur4.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 readonly4.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 valide4.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 | string4.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) }
}