Generic class with constraints in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a generic class in TypeScript?

A generic class is a class that can work with any data type specified when creating an instance. It uses type parameters to allow flexibility while keeping type safety.

intermediate

What does it mean to add constraints to a generic class?

Adding constraints means limiting the types that can be used with the generic class. This is done using the extends keyword to require the type to have certain properties or methods.

intermediate

How do you declare a generic class with a constraint that the type must have a <code>length</code> property?

You declare it like this: <pre>class MyClass&lt;T extends { length: number }&gt; { /* ... */ }</pre> This means <code>T</code> must have a <code>length</code> property of type <code>number</code>.

intermediate

Why use constraints in generic classes?

Constraints let you safely use properties or methods of the generic type inside the class, because you know those members exist. This prevents errors and improves code reliability.

beginner

Example: What will this code print?<br><pre>class Box&lt;T extends { name: string }&gt; {<br>  constructor(public content: T) {}<br>  printName() {<br>    console.log(this.content.name);<br>  }<br>}<br>const box = new Box({ name: 'Apple' });<br>box.printName();</pre>

It will print Apple because the content object has a name property with the value 'Apple'. The constraint ensures T has a name string.

What keyword is used to add constraints to a generic type in TypeScript?

A constrains

B implements

C extends

D restricts

The extends keyword is used to specify constraints on generic types in TypeScript.

Which of these is a valid generic class declaration with a constraint?

A class Data<T requires { id: number }> {}

B class Data<T extends { id: number }> {}

C class Data<T implements { id: number }> {}

D class Data<T restricts { id: number }> {}

Only extends is valid syntax for generic constraints in TypeScript.

Why might you add a constraint like T extends { length: number } to a generic class?

A To force <code>T</code> to be a string.

B To prevent <code>T</code> from having a <code>length</code> property.

C To make <code>T</code> only accept numbers.

D To ensure <code>T</code> has a <code>length</code> property so you can use it safely inside the class.

The constraint ensures the generic type has a length property, so the class can use it without errors.

What happens if you try to create an instance of a generic class with a type that does not meet the constraint?

A TypeScript will show a compile-time error.

B The code will run but throw a runtime error.

C The constraint is ignored and the code compiles.

D The generic type automatically changes to <code>any</code>.

TypeScript enforces constraints at compile time and will show an error if the type does not satisfy the constraint.

Which of these is NOT a benefit of using generic constraints?

A Forcing the generic type to be a specific concrete type

B Improved type safety

C Ability to use specific properties or methods of the generic type

D Preventing invalid types from being used

Constraints limit types but do not force a single concrete type; they allow any type that meets the condition.

Explain what a generic class with constraints is and why it is useful in TypeScript.

Think about how you tell TypeScript what kind of types are allowed for the generic.

Describe how you would write a generic class that only accepts types with a 'name' string property and how you would use it.

Focus on the constraint and accessing the 'name' property inside the class.

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