Menu
Coddy logo textTech

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 doors

Para 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 interfaz

Ambos 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.

challenge icon

Desafío

Fácil

Crea una interfaz base llamada Employee con las siguientes propiedades:

  • id de tipo number
  • name de tipo string
  • department de tipo string

Crea una interfaz llamada Manager que extienda Employee y añada las siguientes propiedades:

  • teamSize de tipo number
  • budget de tipo number

Crea un alias de tipo llamado Contact con las siguientes propiedades:

  • email de tipo string
  • phone de tipo string

Crea un alias de tipo llamado Developer mediante tipos de intersección que combine Employee y Contact, y añada las siguientes propiedades:

  • programmingLanguages de tipo string[]
  • yearsExperience de tipo number

Usando tus interfaces y tipos, crea las siguientes variables:

  • Crea una variable llamada teamLead de tipo Manager con id 101, nombre "Alice Johnson", departamento "Engineering", teamSize 8 y presupuesto 250000
  • Crea una variable llamada softwareDev de tipo Developer con id 102, nombre "Bob Smith", departamento "Engineering", email "bob.smith@company.com", teléfono "555-0123", programmingLanguages ["TypeScript", "Python", "Java"] y yearsExperience 5

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 getManagerSummary con teamLead e imprime el resultado
  • Llama a getDeveloperSkills con softwareDev e 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 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