Generic constraints with extends in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a generic function with a constraint that the type must extend an object.

Typescript

function identity<T [1] object>(arg: T): T {
  return arg;
}

Drag options to blanks, or click blank then click option'

Aconforms

Bimplements

Cinherits

Dextends

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'implements' instead of 'extends' for generic constraints.

Using 'inherits' or 'conforms' which are not valid TypeScript keywords.

The keyword extends is used in TypeScript to constrain a generic type parameter to types that satisfy the given constraint, such as object.

2fill in blank

medium

Complete the code to constrain the generic type to have a 'length' property.

Typescript

function logLength<T [1] { length: number }>(arg: T): T {
  console.log(arg.length);
  return arg;
}

Drag options to blanks, or click blank then click option'

Aextends

Bimplements

Cinherits

Dconforms

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'implements' instead of 'extends' for generic constraints.

Trying to use 'interface' keyword here.

The extends keyword is used to constrain the generic type T to types that have a length property of type number.

3fill in blank

hard

Fix the error in the generic function declaration by completing the constraint.

Typescript

function getProperty<T, K [1] keyof T>(obj: T, key: K) {
  return obj[key];
}

Drag options to blanks, or click blank then click option'

Ainherits

Bimplements

Cextends

Dconforms

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'implements' instead of 'extends'.

Omitting the constraint entirely.

The generic type K must be constrained to keys of T using extends keyof T.

4fill in blank

hard

Fill both blanks to create a generic function that accepts an array of items extending a base interface.

Typescript

interface Base {
  id: number;
}

function processItems<T [1] Base>(items: T[2]) {
  items.forEach(item => console.log(item.id));
}

Drag options to blanks, or click blank then click option'

Aextends

Bimplements

C[]

DArray<T>

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'implements' instead of 'extends'.

Using 'Array' in the wrong blank.

The generic type T extends Base, and the parameter items is an array of T using [] syntax.

5fill in blank

hard

Fill all three blanks to define a generic class with a constraint and a method using the generic type.

Typescript

class Container<T [1] { name: string }> {
  private value: T;
  constructor(value: T) {
    this.value = value;
  }
  getName(): [2] {
    return this.value[3];
  }
}

Drag options to blanks, or click blank then click option'

Aextends

BT

C.name

Dimplements

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'implements' instead of 'extends'.

Returning the whole value instead of value.name.

Incorrect return type.

The generic type T extends an object with a name property. The method getName returns the name property of value.