Why generic interfaces matter in Typescript - See It in Action

Why generic interfaces matter

📖 Scenario: Imagine you run a small library. You want to keep track of different types of items like books and magazines. Each item has a title and an ID, but other details differ. You want a way to describe these items clearly in your program so you can manage them easily.

🎯 Goal: You will create a generic interface in TypeScript that can describe any library item type. Then you will use it to make specific types for books and magazines. This helps you write clear and reusable code.

📋 What You'll Learn

Create a generic interface called LibraryItem with a type parameter T.

The interface must have properties id (number), title (string), and details of type T.

Create a type BookDetails with properties author (string) and pages (number).

Create a type MagazineDetails with properties issue (number) and month (string).

Create a variable myBook of type LibraryItem<BookDetails> with example values.

Create a variable myMagazine of type LibraryItem<MagazineDetails> with example values.

Print myBook and myMagazine to the console.

💡 Why This Matters

🌍 Real World

Libraries, stores, or any inventory system often have many item types with shared and unique details. Generic interfaces help manage these cleanly.

💼 Career

Understanding generics is important for writing flexible and maintainable TypeScript code, a skill valued in many software development jobs.

1

Create the generic interface LibraryItem

Create a generic interface called LibraryItem with a type parameter T. It should have three properties: id of type number, title of type string, and details of type T.

Typescript

# Your code here

Need a hint?

Use interface LibraryItem<T> and define the three properties inside.

2

Create types for book and magazine details

Create a type called BookDetails with properties author (string) and pages (number). Also create a type called MagazineDetails with properties issue (number) and month (string).

Typescript

interface LibraryItem {
    id: number;
    title: string;
    details: T;
}
# Your code here

Need a hint?

Use type BookDetails = { author: string; pages: number; } and similarly for MagazineDetails.

3

Create variables using the generic interface

Create a variable called myBook of type LibraryItem<BookDetails> with id 1, title "The TypeScript Guide", and details with author "Jane Doe" and pages 250. Also create a variable called myMagazine of type LibraryItem<MagazineDetails> with id 2, title "Tech Monthly", and details with issue 45 and month "June".

Typescript

interface LibraryItem {
    id: number;
    title: string;
    details: T;
}
type BookDetails = {
    author: string;
    pages: number;
};
type MagazineDetails = {
    issue: number;
    month: string;
};
# Your code here

Need a hint?

Use const myBook: LibraryItem<BookDetails> = { ... } and fill in the properties exactly.

4

Print the variables to the console

Write two console.log statements to print myBook and myMagazine to the console.

Typescript

interface LibraryItem {
    id: number;
    title: string;
    details: T;
}
type BookDetails = {
    author: string;
    pages: number;
};
type MagazineDetails = {
    issue: number;
    month: string;
};

const myBook: LibraryItem = {
    id: 1,
    title: "The TypeScript Guide",
    details: {
        author: "Jane Doe",
        pages: 250
    }
};

const myMagazine: LibraryItem = {
    id: 2,
    title: "Tech Monthly",
    details: {
        issue: 45,
        month: "June"
    }
};
# Your code here

Need a hint?

Use console.log(myBook) and console.log(myMagazine) to show the objects.