Combinando alias de tipos
Parte de la sección Introducción a TypeScript del Journey de JavaScript de Coddy. Lección 35 de 73.
Uno de los aspectos más potentes de los alias de tipo es su capacidad para ser combinados y reutilizados para crear definiciones de tipos más sofisticadas. En lugar de definir tipos complejos desde cero cada vez, puedes construirlos componiendo alias de tipo más pequeños y enfocados entre sí.
Este enfoque promueve la reutilización de código y hace que tus definiciones de tipos sean más fáciles de mantener. Cuando necesites actualizar un tipo base, todos los tipos compuestos que lo utilizan heredan automáticamente los cambios:
type Email = string;
type Phone = number;
type Contact = {
name: string;
email: Email;
phone: Phone;
};También puedes combinar alias de tipos dentro de tipos de unión para crear estructuras de datos flexibles. Esto es particularmente útil cuando una propiedad de un objeto puede aceptar diferentes formatos:
type ContactMethod = Email | Phone;
type User = {
id: number;
preferredContact: ContactMethod;
};Este enfoque compositivo hace que tu código sea más expresivo y más fácil de entender. En lugar de ver tipos genéricos como string o number, otros desarrolladores entienden inmediatamente el propósito previsto a través de nombres de tipos significativos como Email y Phone.
Desafío
FácilCrea un alias de tipo llamado Username para el tipo string.
Crea un alias de tipo llamado UserAge para el tipo number.
Crea un alias de tipo llamado ContactMethod que combine Username y UserAge usando un tipo de unión.
Crea un alias de tipo llamado UserProfile para un objeto con las siguientes propiedades:
idde tiponumberdisplayNamede tipoUsernamepreferredContactde tipoContactMethod
Crea un alias de tipo llamado AdminProfile que combine UserProfile con un tipo de objeto adicional que contenga una propiedad permissions de tipo string usando tipos de intersección.
Ahora crea las siguientes variables:
- Crea una variable llamada
regularUserde tipoUserProfilecon id1, displayName"john_doe", y preferredContact"john_doe" - Crea una variable llamada
systemAdminde tipoAdminProfilecon id2, displayName"admin", preferredContact25, y permissions"full_access"
Crea una función llamada getContactInfo que acepte un parámetro llamado contact de tipo ContactMethod y devuelva un string. Usa un protector de tipo (type guard) para verificar el tipo y devolver:
- Si es un string:
"Contact: [contact]" - Si es un número:
"Age: [contact]"
Imprime las siguientes salidas en líneas separadas:
- Llama a
getContactInfoconregularUser.preferredContacte imprime el resultado - Llama a
getContactInfoconsystemAdmin.preferredContacte imprime el resultado - Imprime
systemAdmin.permissions
Pruébalo tú mismo
// TODO: Escribe tu código aquí
// Crea alias de tipo para Username, UserAge, ContactMethod, UserProfile y AdminProfile
// Crea las variables regularUser y systemAdmin
// Crea la función getContactInfo
// Imprime las salidas requeridasEsta 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 TuplasPractica por tu cuenta: Compilador de JavaScript online