Asynchrone typé

L'asynchrone est une source majeure d'erreurs en JavaScript. TypeScript rend le flux et les erreurs explicites.

🔵 Promise typée

Une Promise est un objet qui représente le résultat (ou l'échec) d'une opération asynchrone. Une Promise<T> finit par se résoudre avec une valeur de type T.

Promise<T> est une promesse dont la valeur résolue est de type T. Promise<void> signifie « cette promesse se résout, mais ne transporte pas de valeur utile ».

Promise<T> indique la valeur résolue :

function attendre(ms: number): Promise<void> {
  return new Promise((resolve) => setTimeout(resolve, ms))
}

function getNombre(): Promise<number> {
  return Promise.resolve(42)
}

⏳ async / await

async est un mot-clé qui marque une fonction comme asynchrone. Une fonction async renvoie toujours une Promise. Le retour est automatiquement enveloppé.

await est un mot-clé qui attend qu'une Promise se résoudre et extrait sa valeur. Après await maPromesse, on obtient le type T (pas Promise<T>).

Toute fonction async renvoie une Promise. Après await, on obtient T :

interface Post {
  id: number
  titre: string
}

declare function getPosts(id: number): Promise<Post[]>

async function getTitre(id: number): Promise<string> {
  const nom = await chargerNom(id)     // string
  const posts = await getPosts(id)     // Post[]
  return `${nom} (${posts.length} posts)`
}

declare function chargerNom(id: number): Promise<string>

🛡️ Erreurs typées

Depuis TypeScript 4.4, l'erreur capturée est unknown (pas any). Il faut la restreindre (via instanceof, in, etc.) avant de l'utiliser. C'est plus sûr.

instanceof est une garde de type qui vérifie si un objet est une instance d'une classe. err instanceof Error restreint unknown à Error.

Depuis TS 4.4, l'erreur dans catch est unknown :

async function exemple(): Promise<void> {
  try {
    await chargerNom(1)
  } catch (err) {
    if (err instanceof Error) {
      console.error(err.message)
    } else {
      console.error("Erreur inconnue", err)
    }
  }
}

declare function chargerNom(id: number): Promise<string>

🌐 Typer fetch

fetch est l'API web pour faire des requêtes HTTP. fetch renvoie une Promise<Response>. Le JSON parsé est unknown par défaut — il faut le valider avec un type guard.

Le JSON reçu du réseau est unknown. Prouvez sa forme avec un type guard :

interface User {
  id: number
  nom: string
  email: string
}

function estUser(v: unknown): v is User {
  return (
    typeof v === "object" &&
    v !== null &&
    "id" in v &&
    typeof (v as User).id === "number" &&
    "nom" in v &&
    typeof (v as User).nom === "string" &&
    "email" in v &&
    typeof (v as User).email === "string"
  )
}

async function getUser(id: number): Promise<User> {
  const res = await fetch(`/api/users/${id}`)
  if (!res.ok) throw new Error(`HTTP ${res.status}`)
  const data: unknown = await res.json()
  if (estUser(data)) return data
  throw new Error("Format invalide")
}

⚡ Promise.all

Promise.all exécute plusieurs promesses en parallèle et renvoie un tableau (tuple) avec tous les résultats. TypeScript préserve le type de chaque promesse dans le tuple.

Un tuple est un tableau dont les éléments ont des types précis et positionnels. [User, Post[]] est un tuple : première case User, deuxième Post[].

Promise.all préserve le type de chaque promesse dans un tuple :

interface User {
  id: number
  nom: string
}

interface Post {
  id: number
  titre: string
}

declare function getUser(id: number): Promise<User>
declare function getPosts(id: number): Promise<Post[]>

async function chargerPage(id: number) {
  const [utilisateur, posts] = await Promise.all([
    getUser(1),
    getPosts(1),
  ])
  return { utilisateur, posts }
}

📋 Points clés

• Promise : résultat (ou échec) d'une opération asynchrone.
• Promise<T> : promesse dont la valeur résolue est de type T.
• async : renvoie toujours une Promise.
• await : extrait la valeur T d'une Promise<T>.
• unknown dans catch : il faut restreindre avant usage (instanceof Error).
• fetch : renvoie Promise<Response>, le JSON est unknown.
• Promise.all : parallélise et retourne un tuple typé.
• Tuple : tableau positionnel avec types précis.

✅ Vérification des acquis