Generic conditional constraints in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of generic function with conditional constraint

What is the output of this TypeScript code when calling processValue(10)?

Typescript

function processValue<T extends number | string>(value: T): string {
  if (typeof value === 'number') {
    return `Number: ${value * 2}`;
  } else {
    return `String: ${value.toUpperCase()}`;
  }
}

console.log(processValue(10));

A "String: 10"

B TypeError at runtime

C "Number: 20"

D Compilation error due to generic constraint

💡 Hint

Check how the function handles numbers differently from strings.

The generic type T is constrained to number or string. When the input is a number, the function doubles it and returns a string with prefix 'Number: '. For 10, it returns 'Number: 20'.

❓ Predict Output

intermediate

Result of generic function with conditional type check

What will be logged when calling formatValue('hello') in this TypeScript code?

Typescript

function formatValue<T extends string | boolean>(input: T): string {
  return typeof input === 'string' ? input.toUpperCase() : input ? 'TRUE' : 'FALSE';
}

console.log(formatValue('hello'));

A Compilation error due to generic constraint

B "HELLO"

C "TRUE"

D "hello"

💡 Hint

Look at how the function treats strings differently from booleans.

The function converts strings to uppercase. Since 'hello' is a string, it returns 'HELLO'.

🔧 Debug

advanced

Identify the error in generic conditional constraint usage

What error does this TypeScript code produce?

Typescript

function getLength<T>(item: T): number {
  if (item.length) {
    return item.length;
  }
  return 0;
}

getLength(123);

A Compilation error: Generic constraint missing

B Returns 0 without error

C Runtime error: Cannot read property 'length' of undefined

D Compilation error: Property 'length' does not exist on type 'T'.

💡 Hint

Check if the generic type T is constrained to have a length property.

The function tries to access 'length' on a generic type T without constraining T to types that have 'length'. This causes a compilation error.

📝 Syntax

advanced

Which option correctly defines a generic function with conditional constraint?

Which of the following TypeScript function signatures correctly constrain generic type T to types that have a 'length' property?

A function example<T extends { length: number }>(arg: T): number;

B function example<T>(arg: T extends { length: number } ? T : never): number;

C function example<T>(arg: T): T extends { length: number } ? number : never;

D function example<T extends length>(arg: T): number;

💡 Hint

Look for correct syntax for generic constraints in TypeScript.

Option A uses the correct syntax to constrain T to types with a length property. Options B and C misuse conditional types in parameters or return types. Option A uses an invalid constraint 'length'.

🚀 Application

expert

Determine the output of a complex generic conditional type function

Given the following TypeScript code, what is the output of describeValue([1, 2, 3])?

Typescript

function describeValue<T>(value: T): string {
  type HasLength = T extends { length: number } ? true : false;
  if ((value as any).length !== undefined) {
    return `Length is ${(value as any).length}`;
  } else {
    return 'No length property';
  }
}

console.log(describeValue([1, 2, 3]));

A "Length is 3"

B "No length property"

C Compilation error due to conditional type misuse

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

💡 Hint

Arrays have a length property. The function uses a type alias but checks length at runtime.

The function checks if value has a length property at runtime by casting to any. The array [1,2,3] has length 3, so it returns 'Length is 3'.