Generic class with constraints in Typescript - Mini Project: Build & Apply

Generic class with constraints

📖 Scenario: You are building a simple system to store and display information about different items. Each item must have a name property as a string. You want to create a generic class that can work with any item type, but only if it has a name property.

🎯 Goal: Create a generic class called ItemHolder that only accepts types with a name property of type string. Then, use this class to store an item and display its name.

📋 What You'll Learn

Create an interface called Named with a name property of type string

Create a generic class called ItemHolder with a type parameter constrained to Named

Add a constructor to ItemHolder that accepts an item of the generic type

Add a method getName that returns the name of the stored item

Create an object with a name property and use ItemHolder to hold it

Print the name of the stored item using the getName method

💡 Why This Matters

🌍 Real World

Generic classes with constraints help create reusable and safe code components that work with many types but enforce required properties.

💼 Career

Understanding generics and constraints is important for writing flexible and type-safe code in TypeScript, a skill valued in many software development roles.

1

Create the Named interface

Create an interface called Named with a single property name of type string.

Typescript

// Your code here

Hint

Use the interface keyword and define name: string inside.

2

Create the generic class ItemHolder with constraint

Create a generic class called ItemHolder with a type parameter T constrained to Named. Add a constructor that accepts a parameter item of type T and stores it in a public property called item.

Typescript

interface Named {
  name: string;
}

// Your code here

Hint

Use class ItemHolder<T extends Named> and a constructor with public item: T.

3

Add the getName method

Inside the ItemHolder class, add a method called getName that returns the name property of the stored item.

Typescript

interface Named {
  name: string;
}

class ItemHolder {
  constructor(public item: T) {}

  // Your code here
}

Hint

Define getName() that returns this.item.name.

4

Create an item and print its name

Create a constant called myItem with a name property set to "Book". Then create an instance of ItemHolder called holder using myItem. Finally, print the result of holder.getName().

Typescript

interface Named {
  name: string;
}

class ItemHolder {
  constructor(public item: T) {}

  getName(): string {
    return this.item.name;
  }
}

// Your code here

Hint

Define myItem with name: "Book", create holder with new ItemHolder(myItem), then print holder.getName().

Practice

1. What is the main purpose of using constraints in a generic class in TypeScript?

easy

A. To ensure the generic type has specific properties or methods

B. To make the class run faster

C. To allow any type without restrictions

D. To convert the generic type to a string

Solution

1. Step 1: Understand generic constraints

   Constraints limit the types that can be used with a generic to those having certain properties or methods.

2. Step 2: Identify the purpose of constraints

   This ensures the generic class can safely use those properties or methods without errors.

3. Final Answer:

   To ensure the generic type has specific properties or methods -> Option A

4. Quick Check:

   Constraints = limit types by properties/methods [OK]

Hint: Constraints limit types to those with needed features [OK]

Common Mistakes:

• Thinking constraints improve performance
• Believing constraints allow any type
• Confusing constraints with type conversion

2. Which of the following is the correct syntax to declare a generic class with a constraint that T must have a 'length' property?

easy

A. class Box {}

B. class Box {}

C. class Box {}

D. class Box {}

Solution

1. Step 1: Recall TypeScript generic constraint syntax

   TypeScript uses extends keyword to constrain generics.

2. Step 2: Match syntax for property constraint

   To require a property, use an object type with that property, e.g., { length: number }.

3. Final Answer:

   class Box<T extends { length: number }> {} -> Option D

4. Quick Check:

   Generic constraints use extends with type shape [OK]

Hint: Use 'extends' with object type for constraints [OK]

Common Mistakes:

• Using 'where' or 'with' keywords (not valid in TypeScript)
• Using colon ':' instead of 'extends'
• Omitting the property type in constraint

3. What will be the output of the following TypeScript code?

class Container<T extends { name: string }> {
  item: T;
  constructor(item: T) {
    this.item = item;
  }
  getName() {
    return this.item.name;
  }
}

const obj = { name: 'Box', size: 10 };
const c = new Container(obj);
console.log(c.getName());

medium

A. undefined

B. 'Box'

C. Error: Property 'name' does not exist

D. null

Solution

1. Step 1: Analyze the generic constraint and object

   The class requires T to have a 'name' string property. The object has 'name' and 'size', so it fits.

2. Step 2: Understand method getName()

   It returns this.item.name, which is 'Box' from the object.

3. Final Answer:

   'Box' -> Option B

4. Quick Check:

   Accessing constrained property returns 'Box' [OK]

Hint: Check if object matches constraint properties [OK]

Common Mistakes:

• Assuming extra properties cause errors
• Thinking output is undefined if extra props exist
• Confusing runtime errors with compile-time checks

4. Identify the error in this TypeScript generic class declaration:

class DataHolder<T extends number | string> {
  value: T;
  constructor(value: T) {
    this.value = value;
  }
  printValue() {
    console.log(this.value.toFixed(2));
  }
}

medium

A. toFixed is not available on string type

B. Generic constraint syntax is incorrect

C. Missing return type for printValue method

D. Constructor parameter type mismatch

Solution

1. Step 1: Check the generic constraint

   T can be number or string, so value can be either type.

2. Step 2: Analyze method printValue()

   It calls toFixed(2), which exists on number but not on string. TypeScript will produce a compile-time error because toFixed is not available on all possible types for T.

3. Final Answer:

   toFixed is not available on string type -> Option A

4. Quick Check:

   Method uses number-only function on union type [OK]

Hint: Check method compatibility with all constraint types [OK]

Common Mistakes:

• Ignoring union type method availability
• Thinking constraint syntax is wrong
• Assuming missing return type causes error here

5. You want to create a generic class KeyValueStore that only accepts types with a key property of type string and a value property of any type. Which of the following is the correct way to declare this class?

hard

A. class KeyValueStore<T with key: string, value: any> { constructor(public item: T) {} }

B. class KeyValueStore<T> where T has key: string, value: any { constructor(public item: T) {} }

C. class KeyValueStore<T extends { key: string; value: any }> { constructor(public item: T) {} }

D. class KeyValueStore<T: { key: string; value: any }> { constructor(public item: T) {} }

Solution

1. Step 1: Recall TypeScript generic constraint syntax

   Use extends with an object type to constrain T to have specific properties.

2. Step 2: Match the required properties

   The constraint must require key: string and value: any properties.

3. Step 3: Verify constructor syntax

   The constructor correctly accepts an item of type T and assigns it.

4. Final Answer:

   class KeyValueStore<T extends { key: string; value: any }> { constructor(public item: T) {} } -> Option C

5. Quick Check:

   Use extends with object type for property constraints [OK]

Hint: Use 'extends' with object type for property constraints [OK]

Common Mistakes:

• Using 'where' or 'with' keywords (not valid in TypeScript)
• Using colon ':' instead of 'extends'
• Omitting property types in constraint