TypeScriptLeçon 15 sur 16

async/await et Promise typées

Promise<T> est la promesse de livrer un peu plus tard une valeur de type T. await déballe cette valeur, et TypeScript connaît son type.

L’essentiel

Une fonction async renvoie toujours une Promise : async function load(): Promise<string>.
await fetchUser(1) a le type User, pas Promise<User>.
Promise.all attend plusieurs promesses et garde leurs types : [User, User].
Dans catch, l'erreur est unknown : vérifiez-la avec instanceof Error.

Exemple

interface User {  id: number;  name: string;} // A stand-in for a real API call: it answers with a ready Promisefunction fetchUser(id: number): Promise<User> {  return Promise.resolve({ id, name: id === 1 ? "Ada" : "Linus" });} async function greet(id: number): Promise<string> {  const user = await fetchUser(id); // user: User  return `Hi, ${user.name}`;} async function main(): Promise<void> {  console.log(await greet(1));  const [a, b] = await Promise.all([fetchUser(1), fetchUser(2)]); // [User, User]  console.log(`${a.name} & ${b.name}`);} main();

fetchUser remplace ici une vraie requête serveur, le résultat est donc toujours le même. Promise.all a renvoyé un tuple, et a.name comme b.name sont déjà des chaînes.

Exercice

Utiliser l’éditeur⌘ Entrée ou Ctrl Entrée lance le code, ⇧ ⌘ Entrée vérifie l’exercice.Tab et Maj Tab indentent la ligne ou la sélection ; Échap puis Tab quitte l’éditeur.La vérification compare ce que le programme a affiché à l’exercice ; les espaces en fin de ligne ne comptent pas.Après deux vérifications ratées, la solution s’ouvre. Votre code reste dans ce navigateur.

Faites rejeter par getPrice les articles inconnus avec une erreur, rendez total async pour additionner via Promise.all, et que main affiche « Order 1: 11 » et « Order 2 failed: No price for pizza ».

const PRICES: Record<string, number> = { tea: 3, cake: 5 }; // TODO: resolve with the price, or reject with// new Error(`No price for ${item}`) when the item is unknownfunction getPrice(item: string): Promise<number> {  return Promise.resolve(PRICES[item]);} // TODO: make it async and return Promise<number>:// await Promise.all(items.map(getPrice)) and add the prices upfunction total(items: string[]): number {  return items.length;} async function main(): Promise<void> {  console.log(`Order 1: ${total(["tea", "cake", "tea"])}`);  // TODO: try total(["tea", "pizza"]) and in catch print  // "Order 2 failed: <error message>"} main();

const PRICES: Record<string, number> = { tea: 3, cake: 5 };

// TODO: resolve with the price, or reject with
// new Error(`No price for ${item}`) when the item is unknown
function getPrice(item: string): Promise<number> {
  return Promise.resolve(PRICES[item]);
}

// TODO: make it async and return Promise<number>:
// await Promise.all(items.map(getPrice)) and add the prices up
function total(items: string[]): number {
  return items.length;
}

async function main(): Promise<void> {
  console.log(`Order 1: ${total(["tea", "cake", "tea"])}`);
  // TODO: try total(["tea", "pizza"]) and in catch print
  // "Order 2 failed: <error message>"
}

main();

Sortie

Ce que le programme affiche apparaîtra ici.