Generic class with constraints in Typescript

Introduction

Generic classes let you write flexible code that works with many types. Constraints make sure the types used have certain features, so your code stays safe and clear.

When you want a class to work with different types but need those types to have specific properties or methods.

When you create reusable data structures like containers or wrappers that should only accept certain kinds of objects.

When you want to avoid errors by restricting what types can be used with your generic class.

When you want to write clear code that tells others what kind of types your class expects.

Syntax

Typescript

class ClassName<T extends Constraint> {
  // class body using T
}

T is a placeholder for a type you specify later.

extends Constraint means T must have the features defined by Constraint.

Examples

This class only accepts types that have a name property.

Typescript

interface HasName {
  name: string;
}

class PersonHolder<T extends HasName> {
  constructor(public person: T) {}
  greet() {
    console.log(`Hello, ${this.person.name}!`);
  }
}

This class only accepts number or string types.

Typescript

class Container<T extends number | string> {
  value: T;
  constructor(value: T) {
    this.value = value;
  }
  show() {
    console.log(`Value is: ${this.value}`);
  }
}

Sample Program

This program defines a generic class that only accepts types with a length property. It then creates instances with an array and a string, both of which have length.

Typescript

interface HasLength {
  length: number;
}

class LengthPrinter<T extends HasLength> {
  constructor(private item: T) {}
  printLength() {
    console.log(`Length is: ${this.item.length}`);
  }
}

const arr = new LengthPrinter([1, 2, 3]);
arr.printLength();

const str = new LengthPrinter('hello');
str.printLength();

Important Notes

Constraints help catch mistakes early by limiting what types can be used.

You can use interfaces or union types as constraints.

If you try to use a type without the required features, TypeScript will show an error.

Summary

Generic classes let you write flexible, reusable code.

Constraints ensure the generic types have needed properties or methods.

This keeps your code safe and easier to understand.

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