Merging classes with interfaces in Typescript - Mini Project: Build & Apply

Merging classes with interfaces

📖 Scenario: Imagine you are building a simple app to manage a library. You want to create a class for books, but also add extra details like the author's name and the year published using interfaces.

🎯 Goal: Learn how to merge a class with interfaces in TypeScript to add extra properties and methods.

📋 What You'll Learn

Create a class called Book with a title property

Create an interface called AuthorInfo with an author property

Create an interface called PublicationInfo with a year property

Merge the Book class with both interfaces

Create an instance of Book with all properties and print its details

💡 Why This Matters

🌍 Real World

Merging classes with interfaces helps organize code by separating data structure (interfaces) from implementation (classes). This is common in apps managing complex data like books, users, or products.

💼 Career

Understanding how to merge classes with interfaces is important for TypeScript developers working on scalable, maintainable codebases in web development and software engineering.

1

Create the Book class

Create a class called Book with a constructor that takes a title string and stores it in a public property called title.

Typescript

class Book {
  // Your code here
}

Need a hint?

Use constructor(public title: string) {} to create the class with a public property.

2

Create interfaces AuthorInfo and PublicationInfo

Create two interfaces: AuthorInfo with a string property author, and PublicationInfo with a number property year.

Typescript

class Book {
  constructor(public title: string) {}
}

// Your code here

Need a hint?

Use interface AuthorInfo { author: string; } and similarly for PublicationInfo.

3

Merge Book class with interfaces

Merge the Book class with the interfaces AuthorInfo and PublicationInfo by declaring that Book implements both interfaces. Add public properties author and year to the class and set them in the constructor.

Typescript

class Book implements AuthorInfo, PublicationInfo {
  constructor(public title: string, public author: string, public year: number) {}
  // Your code here
}

interface AuthorInfo {
  author: string;
}

interface PublicationInfo {
  year: number;
}

Need a hint?

Use implements AuthorInfo, PublicationInfo after the class name and add the properties to the constructor.

4

Create an instance and print details

Create a variable called myBook that is a new Book with title 'The TypeScript Guide', author 'Jane Doe', and year 2024. Then print the string `${myBook.title} by ${myBook.author}, published in ${myBook.year}`.

Typescript

class Book implements AuthorInfo, PublicationInfo {
  constructor(public title: string, public author: string, public year: number) {}
}

interface AuthorInfo {
  author: string;
}

interface PublicationInfo {
  year: number;
}

// Your code here

Need a hint?

Create the instance with new Book(...) and use console.log with a template string to print.