Objetos e interfaces

Describe la forma de tus objetos con tipos precisos y luego hazlos reutilizables con interfaces.

8 min · 3 preguntas

En JavaScript, un objeto agrupa varias informaciones relacionadas como pares clave-valor, como una ficha: un libro tiene un título y un número de páginas. En TypeScript, puedes describir la forma exacta de un objeto: qué propiedades contiene y de qué tipo es cada una.

const book: { title: string; pages: number } = {
  title: "The Little Prince",
  pages: 96,
};

console.log(book.title); // "The Little Prince"

Escribir la forma cada vez se vuelve rápidamente repetitivo. Una interfaz le da un nombre a esa forma, para que puedas reutilizarla en todas partes. La declaras con la palabra clave interface, seguida de un nombre (en mayúscula por convención) y luego la lista de propiedades y sus tipos.

interface Recipe {
  name: string;
  servings: number;
  isVegetarian: boolean;
}

const pancakes: Recipe = {
  name: "Pancakes",
  servings: 4,
  isVegetarian: true,
};

Todas las propiedades de una interfaz son obligatorias por defecto: olvidar servings provocaría un error. Para hacer que una propiedad sea opcional, añade un signo de interrogación ? justo después de su nombre. El objeto puede entonces crearse con o sin esa propiedad.

interface Contact {
  name: string;
  phone: string;
  email?: string; // optional thanks to the ?
}

const alice: Contact = {
  name: "Alice",
  phone: "0601020304",
}; // allowed: email can be omitted

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Para qué sirve una interfaz en TypeScript?
   • Para describir la forma de un objeto y reutilizarla
   • Para crear una página web
   • Para ejecutar una función más rápido
   • Para almacenar datos en un servidor
2. ¿Qué significa el signo de interrogación en email?: string?
   • La propiedad email es obligatoria
   • La propiedad email es opcional
   • La propiedad email siempre está vacía
3. A un objeto tipado como Recipe le falta la propiedad name. ¿Qué ocurre?
   • TypeScript informa de un error antes de la ejecución
   • El programa se bloquea sin aviso en tiempo de ejecución
   • TypeScript añade la propiedad automáticamente