Extensión de interfaces y tipos
Parte de la sección Introducción a TypeScript del Journey de JavaScript de Coddy. Lección 42 de 73.
En lugar de duplicar código, TypeScript proporciona mecanismos potentes para construir nuevos tipos basados en los existentes a través de la herencia.
Para las interfaces, puedes usar la palabra clave extends para crear una nueva interfaz que herede todas las propiedades de una interfaz base:
interface Vehicle {
brand: string;
year: number;
}
interface Car extends Vehicle {
doors: number;
}
// Car ahora tiene: brand, year, y doorsPara los alias de tipo, se logra el mismo resultado utilizando tipos de intersección con el operador &:
type Vehicle = {
brand: string;
year: number;
};
type Car = Vehicle & {
doors: number;
};
// Car tiene las mismas propiedades que el ejemplo de la interfazAmbos enfoques crean nuevos tipos que contienen todas las propiedades del tipo base más cualquier propiedad adicional que definas. Esto promueve la reutilización de código y ayuda a mantener la consistencia a través de tipos relacionados en tu aplicación.
Desafío
FácilCrea una interfaz base llamada Employee con las siguientes propiedades:
idde tiponumbernamede tipostringdepartmentde tipostring
Crea una interfaz llamada Manager que extienda Employee y añada las siguientes propiedades:
teamSizede tiponumberbudgetde tiponumber
Crea un alias de tipo llamado Contact con las siguientes propiedades:
emailde tipostringphonede tipostring
Crea un alias de tipo llamado Developer mediante tipos de intersección que combine Employee y Contact, y añada las siguientes propiedades:
programmingLanguagesde tipostring[]yearsExperiencede tiponumber
Usando tus interfaces y tipos, crea las siguientes variables:
- Crea una variable llamada
teamLeadde tipoManagercon id101, nombre"Alice Johnson", departamento"Engineering", teamSize8y presupuesto250000 - Crea una variable llamada
softwareDevde tipoDevelopercon id102, nombre"Bob Smith", departamento"Engineering", email"bob.smith@company.com", teléfono"555-0123", programmingLanguages["TypeScript", "Python", "Java"]y yearsExperience5
Crea una función llamada getManagerSummary que acepte un parámetro de tipo Manager y devuelva un string con el formato "[name] manages [teamSize] people with a budget of $[budget]".
Crea una función llamada getDeveloperSkills que acepte un parámetro de tipo Developer y devuelva un string con el formato "[name] knows [programmingLanguages joined with ', '] ([yearsExperience] years experience)".
Imprime los siguientes resultados en líneas separadas:
- Llama a
getManagerSummaryconteamLeade imprime el resultado - Llama a
getDeveloperSkillsconsoftwareDeve imprime el resultado - Imprime el departamento de
teamLead - Imprime el email de
softwareDev
Pruébalo tú mismo
// TODO: Escribe tu código aquí
// Crear la interfaz Employee
// Crear la interfaz Manager que extiende de Employee
// Crear el alias de tipo Contact
// Crear el alias de tipo Developer usando tipos de intersección
// Crear la variable teamLead de tipo Manager
// Crear la variable softwareDev de tipo Developer
// Crear la función getManagerSummary
// Crear la función getDeveloperSkills
// Imprimir 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