Generic class with constraints in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a generic class with constraint

What is the output of this TypeScript code when creating an instance of Container with a Person object?

Typescript

interface HasName {
  name: string;
}

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

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

const person = new Person("Alice");
const container = new Container(person);
console.log(container.getName());

A undefined

B "Alice"

C TypeError at runtime

D Compilation error due to missing property

💡 Hint

Look at the constraint T extends HasName and what property Person has.

The generic class Container requires its type parameter to have a name property. The Person class has a name property, so it satisfies the constraint. The getName() method returns the name of the stored item, which is "Alice".

❓ Predict Output

intermediate

What error occurs with invalid generic type?

What error will this TypeScript code produce when trying to create a Container with a Car object?

Typescript

interface HasName {
  name: string;
}

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

class Car {
  model: string;
  constructor(model: string) {
    this.model = model;
  }
}

const car = new Car("Tesla");
const container = new Container(car);

A Compilation error: Type 'Car' does not satisfy the constraint 'HasName'.

B No error, but getName() returns undefined

C Output: "Tesla"

D Runtime error: Cannot read property 'name' of undefined

💡 Hint

Check if Car has the required name property.

The generic constraint requires the type to have a name property. Car only has model, so TypeScript will give a compilation error.

🔧 Debug

advanced

Why does this generic class cause a runtime error?

This TypeScript code compiles but throws an error at runtime. What causes the error?

Typescript

interface HasName {
  name: string;
}

class Container<T extends HasName> {
  private item: T;
  constructor(item: T) {
    this.item = item;
  }
  printName(): void {
    console.log(this.item.name.toUpperCase());
  }
}

const obj = { name: null };
const container = new Container(obj);
container.printName();

A Runtime error because 'name' is null and has no method 'toUpperCase()'.

B Compilation error because 'name' can be null.

C No error; prints 'NULL' as string.

D Runtime error because 'item' is undefined.

💡 Hint

Consider the value of name and what toUpperCase() expects.

The generic constraint only requires a name property, but does not guarantee it is a non-null string. Here, name is null, so calling toUpperCase() causes a runtime error.

📝 Syntax

advanced

Identify the syntax error in this generic class declaration

Which option correctly fixes the syntax error in this TypeScript generic class?

Typescript

interface HasId {
  id: number;
}

class Repository<T HasId> {
  private items: T[] = [];
  add(item: T): void {
    this.items.push(item);
  }
}

A Remove <code>HasId</code> constraint entirely

B Change <code>class Repository<T HasId></code> to <code>class Repository<T implements HasId></code>

C Change <code>T HasId</code> to <code>T extends HasId</code>

D Add colon: <code>class Repository<T: HasId></code>

💡 Hint

TypeScript uses a specific keyword for generic constraints.

The correct syntax for generic constraints in TypeScript is extends. The original code misses the extends keyword, causing a syntax error.

🚀 Application

expert

How many items are stored after filtering with generic constraint?

Given this generic class that filters items with a status property, how many items remain after filtering?

Typescript

interface HasStatus {
  status: string;
}

class Filterer<T extends HasStatus> {
  private items: T[];
  constructor(items: T[]) {
    this.items = items;
  }
  filterActive(): T[] {
    return this.items.filter(item => item.status === 'active');
  }
}

const data = [
  { status: 'active', id: 1 },
  { status: 'inactive', id: 2 },
  { status: 'active', id: 3 },
  { status: 'pending', id: 4 }
];

const filterer = new Filterer(data);
const activeItems = filterer.filterActive();
console.log(activeItems.length);

A 3

B 4

C 1

D 2

💡 Hint

Count how many objects have status exactly equal to 'active'.

Only two objects have status equal to 'active' (id 1 and id 3). The filter method returns those two items, so the length is 2.