Assertions de type

Fait partie de la section Introduction à TypeScript du Journey JavaScript de Coddy — leçon 68 sur 73.

Parfois, TypeScript n'a pas assez d'informations pour déterminer le type exact d'une valeur, mais vous, en tant que développeur, en savez plus sur ce qu'est réellement cette valeur. Les assertions de type vous permettent de dire à TypeScript « faites-moi confiance, je sais que cette valeur est de ce type spécifique ».

TypeScript propose deux syntaxes pour les assertions de type. La syntaxe as est l'approche la plus courante :

let data: unknown = '{"name": "John", "age": 30}';
let user = data as string;

Vous pouvez également utiliser la syntaxe avec chevrons, bien qu'elle soit moins courante dans le TypeScript moderne :

let data: unknown = '{"name": "John", "age": 30}';
let user = <string>data;

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Défi

Facile

Créez une fonction qui traite les données d'une simulation d'API externe. Vous travaillerez avec des valeurs de type unknown et utiliserez des assertions de type pour accéder en toute sécurité à leurs propriétés.

Créez une variable apiResponse de type unknown et affectez-lui la chaîne JSON suivante :

{"userId": 42, "username": "alice_dev", "isActive": true}

Créez une fonction nommée processUserData qui :

Prend un paramètre data de type unknown
Utilise une assertion de type pour traiter data comme une string
Analyse la chaîne JSON à l'aide de JSON.parse()
Utilise une autre assertion de type pour traiter le résultat analysé comme un objet avec les propriétés userId (number), username (string) et isActive (boolean)
Retourne une chaîne formatée : "User [userId]: [username] (Active: [isActive])"
A un type de retour explicite string

Créez des données de test supplémentaires :

Créez secondApiResponse de type unknown avec la chaîne JSON : {"userId": 15, "username": "bob_admin", "isActive": false}
Créez thirdApiResponse de type unknown avec la chaîne JSON : {"userId": 99, "username": "charlie_user", "isActive": true}

Testez votre fonction et affichez les sorties suivantes :

Appelez processUserData avec apiResponse et affichez le résultat
Appelez processUserData avec secondApiResponse et affichez le résultat
Appelez processUserData avec thirdApiResponse et affichez le résultat

Aide-mémoire

Les assertions de type vous permettent d'indiquer à TypeScript le type spécifique d'une valeur lorsque vous en savez plus que ce que TypeScript peut inférer.

Utilisez la syntaxe as (la plus courante) :

let data: unknown = '{"name": "John", "age": 30}';
let user = data as string;

Syntaxe alternative avec des chevrons :

let data: unknown = '{"name": "John", "age": 30}';
let user = <string>data;

Essayez vous-même

// Créer les variables de réponse de l'API
const apiResponse: unknown = '{"userId": 42, "username": "alice_dev", "isActive": true}';
const secondApiResponse: unknown = '{"userId": 15, "username": "bob_admin", "isActive": false}';
const thirdApiResponse: unknown = '{"userId": 99, "username": "charlie_user", "isActive": true}';

// TODO : Créer la fonction processUserData ici

// Tester la fonction et afficher les résultats
console.log(processUserData(apiResponse));
console.log(processUserData(secondApiResponse));
console.log(processUserData(thirdApiResponse));

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.