Type erasure and its consequences in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a generic function that returns the input value.

Typescript

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

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

Anumber

Bany

CT

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using a fixed type like 'number' instead of the generic type parameter.

Using 'any' which loses type safety.

The generic type parameter T is used as the type of the input value, so the function returns the same type it receives.

2fill in blank

medium

Complete the code to create a generic array and push a value into it.

Typescript

let items: Array<[1]> = [];
items.push(42);

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

Astring

Bobject

Cboolean

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' or other types that don't match the pushed value.

Using 'object' which is too general.

The array is declared to hold number types, so pushing 42 (a number) is valid.

3fill in blank

hard

Fix the error in the function that tries to access a property of a generic type without constraints.

Typescript

function getLength<T>(arg: T): number {
  return arg.[1];
}

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

Alength

Bsize

Ccount

Dlength()

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'length()' as if it were a method.

Using 'size' or 'count' which are not standard properties on strings or arrays.

The property length is commonly used on arrays and strings. However, without constraints, TypeScript will error because T might not have length. The question asks to fix the error by choosing the property name, so 'length' is correct.

4fill in blank

hard

Fill both blanks to constrain the generic type to have a length property and return that length.

Typescript

function loggingIdentity<T extends [1]>(arg: T): number {
  return arg.[2];
}

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

A{ length: number }

Bstring

Clength

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' as a constraint which is too specific.

Using 'length()' as a method call.

The generic type T is constrained to types that have a length property of type number. Then the function returns arg.length.

5fill in blank

hard

Fill all three blanks to create a generic function that returns the keys of an object as an array of strings.

Typescript

function getObjectKeys<T extends object>(obj: T): Array<[1]> {
  return Object.[2](obj) as Array<[3]>;
}

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

Astring

Bkeys

Dvalues

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'values' instead of 'keys'.

Using 'number' instead of 'string' for the array type.

The function returns the keys of the object as an array of strings. Object.keys returns string[], so the generic type parameter is string and the method is keys.