1. Introduction

In this tutorial, we aim to deepen your understanding of TypeScript's interfaces, focusing on how they can be extended and merged to create complex and reusable types.

By the end of this guide, you will:

• Understand how to extend interfaces in TypeScript
• Learn how to merge interfaces in TypeScript
• Gain practical knowledge through code examples

Prerequisites: This tutorial assumes that you have a basic understanding of TypeScript interfaces. Knowledge of object-oriented programming would be beneficial but not necessary.

2. Step-by-Step Guide

Extending Interfaces

In TypeScript, an interface can extend from another interface, creating a new interface that contains all the members of the base interface and additional members defined in the extending interface. This is useful when you want to create a sub-type of an existing interface type.

interface Shape {
  color: string;
}

interface Square extends Shape {
  sideLength: number;
}

let square = <Square>{};
square.color = "blue";
square.sideLength = 10;

In the above example, Square extends from Shape, and hence it has two properties - color from Shape and its own sideLength.

Merging Interfaces

TypeScript allows us to merge the structures of two interfaces into one. When two interfaces with the same name are defined, TypeScript merges them into a single interface that contains all the members of both interfaces.

interface Box {
  height: number;
  width: number;
}

interface Box {
  scale: number;
}

let box: Box = {height: 5, width: 6, scale: 0.5};

In the above example, two Box interfaces are defined. TypeScript merges them into a single Box interface that has three properties - height, width, and scale.

3. Code Examples

Extending Interfaces

// Defining the base interface
interface Vehicle {
  name: string;
  start(): void;
}

// Extending the base interface
interface Car extends Vehicle {
  drive(): void;
}

// Implementing the extended interface
let myCar: Car = {
  name: "Toyota",
  start: function() {
    console.log(this.name + " has started.");
  },
  drive: function() {
    console.log(this.name + " is driving.");
  }
};

myCar.start(); // Output: "Toyota has started."
myCar.drive(); // Output: "Toyota is driving."

Merging Interfaces

// First definition of the interface
interface Employee {
  name: string;
}

// Second definition of the interface
interface Employee {
  id: number;
}

// TypeScript merges the two definitions
let employee: Employee = {
  name: "John Doe",
  id: 123
};

console.log(employee); // Output: { name: 'John Doe', id: 123 }

4. Summary

In this tutorial, we've covered:

• How to extend an interface in TypeScript, which allows for creating a new interface that contains all the members of the base interface plus additional ones.
• How to merge interfaces in TypeScript, which results in a single interface that has all the members of the merged interfaces.

As next steps, you can explore other TypeScript features such as intersection types, type guards, and decorators. You can also delve into TypeScript's advanced types and utility types for more complex typing scenarios.

5. Practice Exercises

1. Exercise 1: Create a Person interface with properties name and age. Extend it to create an Employee interface with an additional salary property.

2. Exercise 2: Define two Product interfaces, one with a name property and another with a price property. Merge them and create a Product object.

Solutions:

1. Solution 1:

interface Person {
  name: string;
  age: number;
}

interface Employee extends Person {
  salary: number;
}

let employee: Employee = {
  name: "John Doe",
  age: 30,
  salary: 50000
};

1. Solution 2:

interface Product {
  name: string;
}

interface Product {
  price: number;
}

let product: Product = {
  name: "Apple",
  price: 1.5
};

Keep practicing with more complex scenarios and use cases to solidify your understanding of extending and merging interfaces in TypeScript.