Challenge - 5 Problems
Generic Class Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ Predict Output
intermediate2:00remaining
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());Attempts:
2 left
💡 Hint
Look at the constraint
T extends HasName and what property Person has.✗ Incorrect
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
intermediate2:00remaining
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);Attempts:
2 left
💡 Hint
Check if
Car has the required name property.✗ Incorrect
The generic constraint requires the type to have a
name property. Car only has model, so TypeScript will give a compilation error.🔧 Debug
advanced2:00remaining
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();Attempts:
2 left
💡 Hint
Consider the value of
name and what toUpperCase() expects.✗ Incorrect
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
advanced2:00remaining
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);
}
}Attempts:
2 left
💡 Hint
TypeScript uses a specific keyword for generic constraints.
✗ Incorrect
The correct syntax for generic constraints in TypeScript is
extends. The original code misses the extends keyword, causing a syntax error.🚀 Application
expert2:00remaining
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);Attempts:
2 left
💡 Hint
Count how many objects have
status exactly equal to 'active'.✗ Incorrect
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.