Why advanced generics matter in Typescript - See It in Action

Why advanced generics matter

📖 Scenario: Imagine you are building a simple library system. You want to keep track of books and users, but you want your code to be flexible so it can work with different types of items and users in the future.

🎯 Goal: Build a TypeScript program that uses advanced generics to create a flexible library system. You will create a generic function that can handle different types of items and users, showing why advanced generics help write reusable and safe code.

📋 What You'll Learn

Create a generic interface called LibraryItem with a property id of type T

Create a generic interface called User with a property userId of type U

Create a generic function called checkoutItem that takes a LibraryItem and a User and returns a string message

Use advanced generics to ensure the function works with any types for id and userId

Print the result of calling checkoutItem with a book and a user

💡 Why This Matters

🌍 Real World

Advanced generics let developers write code that works with many data types without repeating code. This is useful in libraries, frameworks, and large applications.

💼 Career

Understanding advanced generics is important for TypeScript developers to build scalable and maintainable codebases that handle diverse data safely.

1

Create generic interfaces for library items and users

Create a generic interface called LibraryItem with a property id of type T. Also create a generic interface called User with a property userId of type U.

Typescript

// Your code here

Need a hint?

Use interface keyword and generic type parameters <T> and <U>.

2

Create a generic function to checkout items

Create a generic function called checkoutItem with type parameters T and U. It should take two parameters: item of type LibraryItem<T> and user of type User<U>. The function should return a string.

Typescript

interface LibraryItem {
  id: T;
}

interface User {
  userId: U;
}

// Your code here

Need a hint?

Use generic type parameters <T, U> and template strings for the return.

3

Create example book and user objects

Create a constant book of type LibraryItem<number> with id 101. Create a constant user of type User<string> with userId 'user123'.

Typescript

interface LibraryItem {
  id: T;
}

interface User {
  userId: U;
}

function checkoutItem(item: LibraryItem, user: User): string {
  return `User ${user.userId} checked out item ${item.id}`;
}

// Your code here

Need a hint?

Use const and specify the generic types explicitly.

4

Call the function and print the result

Call the function checkoutItem with book and user as arguments. Print the returned string using console.log.

Typescript

interface LibraryItem {
  id: T;
}

interface User {
  userId: U;
}

function checkoutItem(item: LibraryItem, user: User): string {
  return `User ${user.userId} checked out item ${item.id}`;
}

const book: LibraryItem = { id: 101 };
const user: User = { userId: 'user123' };

// Your code here

Need a hint?

Use console.log(checkoutItem(book, user)) to print the message.