Extending Interfaces and Types

Part of the Introduction To TypeScript section of Coddy's JavaScript journey — lesson 42 of 73.

Instead of duplicating code, TypeScript provides powerful mechanisms to build new types based on existing ones through inheritance.

For interfaces, you can use the extends keyword to create a new interface that inherits all properties from a base interface:

interface Vehicle {
  brand: string;
  year: number;
}

interface Car extends Vehicle {
  doors: number;
}

// Car now has: brand, year, and doors

For type aliases, you achieve the same result using intersection types with the & operator:

type Vehicle = {
  brand: string;
  year: number;
};

type Car = Vehicle & {
  doors: number;
};

// Car has the same properties as the interface example

Both approaches create new types that contain all the properties from the base type plus any additional properties you define. This promotes code reusability and helps maintain consistency across related types in your application.

Challenge

Easy

Create a base interface named Employee with the following properties:

id of type number
name of type string
department of type string

Create an interface named Manager that extends Employee and adds the following properties:

teamSize of type number
budget of type number

Create a type alias named Contact with the following properties:

email of type string
phone of type string

Create a type alias named Developer using intersection types that combines Employee and Contact, and adds the following properties:

programmingLanguages of type string[]
yearsExperience of type number

Using your interfaces and types, create the following variables:

Create a variable named teamLead of type Manager with id 101, name "Alice Johnson", department "Engineering", teamSize 8, and budget 250000
Create a variable named softwareDev of type Developer with id 102, name "Bob Smith", department "Engineering", email "bob.smith@company.com", phone "555-0123", programmingLanguages ["TypeScript", "Python", "Java"], and yearsExperience 5

Create a function named getManagerSummary that accepts a parameter of type Manager and returns a string in the format "[name] manages [teamSize] people with a budget of $[budget]".

Create a function named getDeveloperSkills that accepts a parameter of type Developer and returns a string in the format "[name] knows [programmingLanguages joined with ', '] ([yearsExperience] years experience)".

Print the following outputs on separate lines:

Call getManagerSummary with teamLead and print the result
Call getDeveloperSkills with softwareDev and print the result
Print the department of teamLead
Print the email of softwareDev

Try it yourself

// TODO: Write your code here

// Create the Employee interface

// Create the Manager interface that extends Employee

// Create the Contact type alias

// Create the Developer type alias using intersection types

// Create the teamLead variable of type Manager

// Create the softwareDev variable of type Developer

// Create the getManagerSummary function

// Create the getDeveloperSkills function

// Print the required outputs

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

All lessons in Introduction To TypeScript

3Data Structure: Arrays & Tuple

Typed Arrays 'readonly' Modifier for Arrays What is a Tuple?Declaring and Accessing Tuples Destructuring Tuples Readonly Tuples Multi-dimensional Typed Arrays Spread Operator with Arrays Recap: Arrays and Tuples

6Typing Objects and Interfaces

Inline Object Type Annotations Type Aliases for Objects Introduction to Interfaces Interfaces vs. Type Aliases Optional & Readonly PropsExtending Interfaces and TypesAdding Methods to Interfaces Recap: Defining Object Shapes

9Generics: A First Look

The Problem Generics Solve Creating Generic Identity Func Using a Generic Function Generic Arrays Generic Interfaces Recap: Generic Function Prac