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

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of generic function with extends constraint

What is the output of the following TypeScript code?

Typescript

function getLength<T extends { length: number }>(arg: T): number {
  return arg.length;
}

console.log(getLength('hello'));
console.log(getLength([1, 2, 3]));

A TypeError at runtime

B 5\n3

C hello\n[1,2,3]

D Compilation error

💡 Hint

Remember that both strings and arrays have a length property.

The function getLength accepts any argument with a length property. 'hello' has length 5, and the array has length 3, so the outputs are 5 and 3.

🧠 Conceptual

intermediate

Understanding extends in generic constraints

Which statement best describes the role of extends in the generic constraint T extends { length: number }?

A It restricts T to types that have a length property of type number.

B It makes T inherit properties from a class named length.

C It allows T to be any type without restrictions.

D It forces T to be exactly the type { length: number }.

💡 Hint

Think about what types can be passed to a function requiring a length property.

The extends keyword in generic constraints restricts the generic type to those that have at least the specified properties. Here, T must have a length property of type number.

🔧 Debug

advanced

Identify the error in generic constraint usage

What error does this TypeScript code produce?

Typescript

function copyFields<T, U extends T>(target: T, source: U): T {
  for (const id in source) {
    target[id] = source[id];
  }
  return target;
}

const x = { a: 1, b: 2 };
const y = { a: 1, b: 3, c: 4 };
copyFields(x, y);

A Error: Cannot assign to 'target[id]' because it is a constant.

B No error, code runs fine.

C Error: Type 'U' is not assignable to type 'T'.

D Error: Property 'c' does not exist on type 'T'.

💡 Hint

Check the properties of the objects and the generic constraints.

The function expects source (U) to extend target (T), but y has property 'c' which x does not. Assigning source[id] to target[id] causes an error because 'c' is not in T.

📝 Syntax

advanced

Correct generic constraint syntax

Which option correctly declares a generic function that accepts only objects with a name property of type string?

A function greet<T extends { name: string }>(obj: T): string { return `Hello, ${obj.name}`; }

B function greet<T>(obj: T extends { name: string }): string { return `Hello, ${obj.name}`; }

C function greet<T>(obj: T) where T has name: string { return `Hello, ${obj.name}`; }

D function greet<T: { name: string }>(obj: T): string { return `Hello, ${obj.name}`; }

💡 Hint

Remember the correct syntax for generic constraints in TypeScript.

Option A uses the correct syntax: T extends { name: string }. Other options use invalid or non-TypeScript syntax.

🚀 Application

expert

Determine the output of complex generic constraint usage

What is the output of this TypeScript code?

Typescript

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

const result = loggingIdentity({ length: 10, value: 3 });
console.log(result.value);

A Compilation error: Property 'value' does not exist on type 'T'.

B 10\nundefined

C 10\n3

D Runtime error: Cannot read property 'value' of undefined.

💡 Hint

Consider how TypeScript infers the type of the argument and the return value.

The argument has length and value properties, so T is inferred as { length: number; value: number }. The function logs 10, then returns the object, so result.value is 3.