TypeScriptLección 5 de 16

Objetos e interfaces

Una interfaz describe la forma de un objeto: qué campos tiene y de qué tipo son. Todo objeto declarado con ese tipo debe cumplirla.

Lo esencial

interface User { id: number; name: string } es un nombre y una lista de campos.
El signo ? hace opcional un campo: email?: string.
extends añade campos a una interfaz existente.
Si falta un campo obligatorio, TypeScript te dice cuál.

Ejemplo

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 recibe todos los campos de User y añade permissions. Un objeto sin name no pasa la comprobación, y un email ausente se sustituye por texto con ??.

Tarea

Cómo usar el editor⌘ Enter o Ctrl Enter ejecuta el código, ⇧ ⌘ Enter comprueba la tarea.Tab y Mayús Tab sangran la línea o la selección; Esc y luego Tab sale del editor.La comprobación compara lo que imprimió el programa con la tarea; los espacios al final de línea no cuentan.Tras dos comprobaciones fallidas puedes ver la solución. Tu código se guarda en este navegador.

Amplía CartItem con quantity y un gift opcional, haz que lineTotal devuelva precio por cantidad e imprime «Mug: 16 (gift)» y «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)}`);
}

Salida

Aquí aparecerá lo que imprima el programa.