Project: Generic Inventory Ite

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

Welcome to your first TypeScript project! You're about to build a generic inventory management system that demonstrates the real-world power of generics. This project will show you how generics can create flexible, reusable code that works with different types of data while maintaining full type safety.

The foundation of any inventory system is defining what an inventory item looks like. In a traditional approach, you might create separate interfaces for books, electronics, clothing, and other product types. But with generics, you can create one flexible structure that adapts to any type of product details.

Your first task is to create a generic interface called InventoryItem<T>. This interface will represent the common structure that all inventory items share: they need an id for identification, a quantity to track stock levels, and a details property that can hold any type of product-specific information.

The magic happens with the generic type parameter T. This allows the details property to be completely flexible - it could be book information, electronic specifications, or any other product data - while the id and quantity remain consistently typed as numbers across all inventory items.

Challenge

Easy

Create a generic interface named InventoryItem that represents the structure of any inventory item in your management system.

The interface should:

Use a generic type parameter T
Have an id property of type number
Have a quantity property of type number
Have a details property of type T

Create the following objects using your generic interface:

bookItem of type InventoryItem<{ title: string; author: string }> with:
- id: 1
- quantity: 5
- details: { title: "TypeScript Guide", author: "John Doe" }
electronicItem of type InventoryItem<{ brand: string; model: string }> with:
- id: 2
- quantity: 3
- details: { brand: "TechCorp", model: "X200" }
clothingItem of type InventoryItem<{ size: string; color: string }> with:
- id: 3
- quantity: 10
- details: { size: "M", color: "Blue" }

Print the following outputs:

Print bookItem.id
Print bookItem.quantity
Print bookItem.details.title
Print bookItem.details.author
Print electronicItem.details.brand
Print electronicItem.details.model
Print clothingItem.details.size
Print clothingItem.details.color

Try it yourself

// TODO: Write your code here
// Create the InventoryItem interface and the required objects

// Print the required outputs
console.log(bookItem.id);
console.log(bookItem.quantity);
console.log(bookItem.details.title);
console.log(bookItem.details.author);
console.log(electronicItem.details.brand);
console.log(electronicItem.details.model);
console.log(clothingItem.details.size);
console.log(clothingItem.details.color);