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álidoEl 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 lecturaPuedes 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.
Desafío
FácilCrea una interfaz llamada Book con las siguientes propiedades:
titlede tipostring(requerido)isbnde tipostring(readonly)subtitlede tipostring(opcional)pagesde tiponumber(requerido)publishedYearde tiponumber(readonly)genrede tipostring(opcional)
Crea una interfaz llamada Magazine con las siguientes propiedades:
namede tipostring(requerido)issueNumberde tiponumber(readonly)topicde tipostring(opcional)monthlySubscriptionde tipoboolean(requerido)
Usando tus interfaces, crea las siguientes variables:
- Crea una variable llamada
novelde tipoBookcon title"1984", isbn"978-0-452-28423-4", pages328, y publishedYear1949 - Crea una variable llamada
cookbookde tipoBookcon title"The Joy of Cooking", isbn"978-0-7432-4626-2", subtitle"All About Baking", pages1132, publishedYear2006, y genre"Cooking" - Crea una variable llamada
techMagde tipoMagazinecon name"Tech Today", issueNumber45, y monthlySubscriptiontrue - Crea una variable llamada
scienceMagde tipoMagazinecon name"Science Weekly", issueNumber12, topic"Climate Change", y monthlySubscriptionfalse
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
getBookDetailsconnovele imprime el resultado - Llama a
getBookDetailsconcookbooke imprime el resultado - Llama a
getMagazineInfocontechMage imprime el resultado - Llama a
getMagazineInfoconscienceMage imprime el resultado - Imprime el ISBN de
novel - Imprime el estado de suscripción de
techMag(la propiedadmonthlySubscription)
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 requeridosEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Introducción a TypeScript
1Primeros pasos con TS
¿Qué es TypeScript?¿Por qué usar TypeScript?Tu primer código en TypeScriptProceso de compilación y erroresResumen: Introducción a TS4Trabajando con funciones
Tipado de parámetros y valores de retornoTipado de funciones de flechaEl tipo de retorno 'void'Parámetros opcionales con '?'Valores de parámetros por defectoTipado de parámetros restDefinición de tipos de funcionesRepaso: Construcción de funciones tipadas2Tipos principales
Tipos básicos: str, num, booleanEl tipo 'any': Vía de escapeEl tipo 'unknown'Trabajando con 'null' y 'undef'Inferencia de tipos en acciónAnotaciones de tipo explícitasResumen: Práctica de tipos principales5Tipos: Alias, Uniones e Intersecciones
Alias de tipos para primitivosTipos de unión ('|')Trabajando con tipos de uniónTipos literalesTipos de intersección ('&')Combinando alias de tiposRepaso: Combinaciones de tipos avanzadas3Estructura de datos: Arrays y Tuplas
Arrays tipadosModificador 'readonly' para Arrays¿Qué es una Tupla?Declaración y acceso a TuplasDesestructuración de TuplasTuplas ReadonlyArrays tipados multidimensionalesOperador Spread con ArraysResumen: Arrays y Tuplas6Tipado de Objetos e Interfaces
Anotaciones de tipo de objeto en líneaAlias de tipo para objetosIntroducción a las interfacesInterfaces vs. Alias de tipoPropiedades opcionales y ReadonlyExtensión de interfaces y tiposAgregar métodos a interfacesRepaso: Definición de estructuras de objetosPractica por tu cuenta: Compilador de JavaScript online