TypeScriptLeçon 5 sur 16

Objets et interfaces

Une interface décrit la forme d'un objet : ses champs et leurs types. Tout objet déclaré avec ce type doit la respecter.

L’essentiel

interface User { id: number; name: string } : un nom et une liste de champs.
Un ? rend un champ optionnel : email?: string.
extends ajoute des champs à une interface existante.
Si un champ obligatoire manque, TypeScript indique lequel.

Exemple

interface User {  id: number;  name: string;  email?: string; // optional property} interface Admin extends User {  permissions: string[];} const anna: User = { id: 1, name: "Anna" };const ben: Admin = { id: 2, name: "Ben", email: "ben@example.com", permissions: ["edit"] };// const ghost: User = { id: 3 }; // error: property 'name' is missing function contact(user: User): string {  return user.email ?? "no email";} console.log(`${anna.name}: ${contact(anna)}`);console.log(`${ben.name}: ${contact(ben)}, can ${ben.permissions.join(", ")}`);

Admin reprend tous les champs de User et ajoute permissions. Un objet sans name échoue à la vérification, et un email absent est remplacé par un texte grâce à ??.

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.

Complétez CartItem avec quantity et un gift optionnel, faites renvoyer à lineTotal le prix multiplié par la quantité, puis affichez « Mug: 16 (gift) » et « Tea: 15 ».

interface Product {  title: string;  price: number;} // TODO: add quantity (number) and an optional gift flag (boolean)interface CartItem extends Product {} function lineTotal(item: CartItem): number {  // TODO: return price multiplied by quantity  return item.price;} // TODO: the mug gets quantity: 2 and gift: true, the tea gets quantity: 3const items: CartItem[] = [  { title: "Mug", price: 8 },  { title: "Tea", price: 5 },]; for (const item of items) {  // TODO: add " (gift)" at the end when item.gift is true  console.log(`${item.title}: ${lineTotal(item)}`);}

interface Product {
  title: string;
  price: number;
}

// TODO: add quantity (number) and an optional gift flag (boolean)
interface CartItem extends Product {}

function lineTotal(item: CartItem): number {
  // TODO: return price multiplied by quantity
  return item.price;
}

// TODO: the mug gets quantity: 2 and gift: true, the tea gets quantity: 3
const items: CartItem[] = [
  { title: "Mug", price: 8 },
  { title: "Tea", price: 5 },
];

for (const item of items) {
  // TODO: add " (gift)" at the end when item.gift is true
  console.log(`${item.title}: ${lineTotal(item)}`);
}

Sortie

Ce que le programme affiche apparaîtra ici.