Menu
Coddy logo textTech

Propiedades opcionales y Readonly

Parte de la sección Introducción a TypeScript del Journey de JavaScript de Coddy. Lección 41 de 73.

TypeScript proporciona dos modificadores potentes que te dan este control: el modificador de propiedad opcional y el modificador readonly.

El símbolo ? hace que una propiedad sea opcional, lo que significa que no tiene que estar presente al crear un objeto. Esto es útil para propiedades que podrían no ser siempre necesarias:

interface User {
  name: string;
  email?: string;  // Propiedad opcional
}

let user1: User = { name: "Alice" };  // Válido - email es opcional
let user2: User = { name: "Bob", email: "bob@example.com" };  // También válido

El modificador readonly evita que una propiedad sea cambiada después de que el objeto es creado. Esto es perfecto para propiedades que deben permanecer constantes, como los identificadores únicos:

interface Product {
  readonly id: number;  // No se puede cambiar después de la creación
  name: string;
}

let product: Product = { id: 1, name: "Laptop" };
product.name = "Gaming Laptop";  // Válido
// product.id = 2;  // Error: No se puede asignar a 'id' porque es de solo lectura

Puedes combinar ambos modificadores en la misma interfaz, y estos modificadores funcionan de manera idéntica tanto con interfaces como con alias de tipo, brindándote un control preciso sobre tus estructuras de objetos.

challenge icon

Desafío

Fácil

Crea una interfaz llamada Book con las siguientes propiedades:

  • title de tipo string (requerido)
  • isbn de tipo string (readonly)
  • subtitle de tipo string (opcional)
  • pages de tipo number (requerido)
  • publishedYear de tipo number (readonly)
  • genre de tipo string (opcional)

Crea una interfaz llamada Magazine con las siguientes propiedades:

  • name de tipo string (requerido)
  • issueNumber de tipo number (readonly)
  • topic de tipo string (opcional)
  • monthlySubscription de tipo boolean (requerido)

Usando tus interfaces, crea las siguientes variables:

  • Crea una variable llamada novel de tipo Book con title "1984", isbn "978-0-452-28423-4", pages 328, y publishedYear 1949
  • Crea una variable llamada cookbook de tipo Book con title "The Joy of Cooking", isbn "978-0-7432-4626-2", subtitle "All About Baking", pages 1132, publishedYear 2006, y genre "Cooking"
  • Crea una variable llamada techMag de tipo Magazine con name "Tech Today", issueNumber 45, y monthlySubscription true
  • Crea una variable llamada scienceMag de tipo Magazine con name "Science Weekly", issueNumber 12, topic "Climate Change", y monthlySubscription false

Crea una función llamada getBookDetails que acepte un parámetro de tipo Book y devuelva un string. La función debe devolver el título y las páginas del libro en el formato "[title] - [pages] pages".

Crea una función llamada getMagazineInfo que acepte un parámetro de tipo Magazine y devuelva un string. La función debe devolver el nombre y el número de edición de la revista en el formato "[name] Issue #[issueNumber]".

Imprime las siguientes salidas en líneas separadas:

  • Llama a getBookDetails con novel e imprime el resultado
  • Llama a getBookDetails con cookbook e imprime el resultado
  • Llama a getMagazineInfo con techMag e imprime el resultado
  • Llama a getMagazineInfo con scienceMag e imprime el resultado
  • Imprime el ISBN de novel
  • Imprime el estado de suscripción de techMag (la propiedad monthlySubscription)

Pruébalo tú mismo

// TODO: Escribe tu código aquí

// Crea la interfaz Book

// Crea la interfaz Magazine

// Crea las variables usando tus interfaces

// Crea la función getBookDetails

// Crea la función getMagazineInfo

// Imprime los resultados requeridos
quiz iconPonte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Todas las lecciones de Introducción a TypeScript

Practica por tu cuenta: Compilador de JavaScript online