Exercice — Validation typée d'une réponse API
Validez une donnée inconnue (unknown) reçue d'une API en la transformant en type User sûr, en appliquant le narrowing et les type guards.
Objectif : écrire parseUser(data) qui reçoit une donnée de type unknown (réponse
réseau non fiable) et la convertit en User uniquement si sa forme est valide.
Vous pratiquez le narrowing de unknown et les type guards vus dans
Asynchrone typed.
Le projet : une réponse API sûre
Une API renvoie du JSON. Avant de l'utiliser, vous devez prouver sa forme. Écrivez une
fonction qui renvoie un User si les champs id (number) et nom (string) sont présents,
sinon null.
Étapes pas à pas
1. Recevoir un unknown
La fonction prend data: unknown — on ne suppose rien de sa forme.
2. Restreindre le type
Vérifiez typeof data === "object" et data !== null avant d'accéder aux clés.
3. Valider chaque champ
id doit être un number, nom un string.
4. Retourner le résultat
Retournez l'objet typé User si tout est bon, sinon null.
Exercice : parseUser (testée)
Exercice : parseUser
Valider une donnée réseau inconnue
Vous allez implémenter une fonction qui reçoit une valeur unknown (réponse API non fiable) et la convertit en type User uniquement si sa forme est valide.
- Utiliser
typeofpour vérifier que la donnée est un objet non nul - Vérifier la présence et le type de chaque champ (
id: number,nom: string) - Retourner l'objet typé ou
nullselon la validité
Créez parseUser(data) qui renvoie { id, nom } si data a id:number et nom:string, sinon null.
Code à valider
Le projet complet (version typée)
interface User {
id: number
nom: 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"
)
}
async function getUserSafe(id: number): Promise<User | null> {
const res = await fetch(`/api/users/${id}`)
if (!res.ok) return null
const data: unknown = await res.json()
return estUser(data) ? data : null
}Conseils
- Traitez toujours
unknowncomme non fiable : prouvez la forme avant usage. typeofetinsuffisent pour valider des champs simples.- Une type guard
v is Userréutilise la logique proprement.
⚠️ Pièges à éviter
Caster sans vérifier : (data as User) ne vérifie rien au runtime. Une API
malveillante ou instable cassera votre code plus loin. Validez d'abord.
Oublier data !== null : en JavaScript, typeof null === "object". Sans ce test,
vous risquez d'accéder aux clés d'une valeur nulle.
Critères de réussite
-
parseUseraccepte ununknown. - Elle renvoie un objet
{ id, nom }valide. - Elle renvoie
nullsi un champ manque ou est du mauvais type.
Pour aller plus loin
Relisez Asynchrone typé et Utility types et type guards avant le quiz.
Quiz du chapitre
TypeScript
Terminez le quiz du chapitre pour le marquer comme complété.
Atelier — Typer un client API
Convertir un script JavaScript non typé en TypeScript strict, puis typer complètement un client d'API (réponse, erreurs, pagination) avec des type guards.
Synthèse TypeScript
Récapitulatif des acquis du chapitre : typage statique, interfaces, unions, utility types, type guards et asynchrone typé.