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.

Practice

1. What does type erasure mean in TypeScript?

easy

A. TypeScript removes all type information when compiling to JavaScript.

B. TypeScript keeps all type information in the final JavaScript code.

C. TypeScript converts types into runtime checks automatically.

D. TypeScript adds extra type annotations in the JavaScript output.

Solution

1. Step 1: Understand TypeScript compilation

   TypeScript compiles to JavaScript by removing all type annotations and interfaces.

2. Step 2: Define type erasure meaning

   This removal of type info is called type erasure, meaning types exist only during development, not at runtime.

3. Final Answer:

   TypeScript removes all type information when compiling to JavaScript. -> Option A

4. Quick Check:

   Type erasure = types removed at compile time [OK]

Hint: Remember: TypeScript types vanish in JavaScript output [OK]

Common Mistakes:

• Thinking types exist at runtime
• Believing TypeScript adds runtime type checks
• Confusing type erasure with type inference

2. Which of the following is the correct way to check a variable's type at runtime in TypeScript?

easy

A. Using typeof operator in JavaScript code.

B. Using TypeScript type annotations like string in if statements.

C. Using TypeScript interfaces to check types at runtime.

D. Using instanceof with TypeScript types.

Solution

1. Step 1: Recall type erasure effect

   TypeScript types do not exist at runtime, so you cannot use them in runtime checks.

2. Step 2: Identify runtime type check method

   JavaScript's typeof operator works at runtime to check primitive types like string or number.

3. Final Answer:

   Using typeof operator in JavaScript code. -> Option A

4. Quick Check:

   Runtime type check = typeof operator [OK]

Hint: Use JavaScript's typeof for runtime type checks [OK]

Common Mistakes:

• Trying to use TypeScript types at runtime
• Using interfaces for runtime checks
• Confusing instanceof with TypeScript types

3. What will be the output of this TypeScript code after compilation and running in JavaScript?

function isString(value: any): boolean {
  return typeof value === 'string';
}

console.log(isString(123));
console.log(isString('hello'));

medium

A. true\ntrue

B. false\nfalse

C. false\ntrue

D. TypeError at runtime

Solution

1. Step 1: Understand the function logic

   The function returns true if the input's JavaScript type is 'string', false otherwise.

2. Step 2: Evaluate the calls

   For 123, typeof is 'number', so returns false. For 'hello', typeof is 'string', so returns true.

3. Final Answer:

   false\ntrue -> Option C

4. Quick Check:

   typeof 123 = number (false), typeof 'hello' = string (true) [OK]

Hint: Check typeof results for each input value [OK]

Common Mistakes:

• Assuming TypeScript types affect runtime
• Expecting true for number input
• Confusing output order

4. Identify the error in this TypeScript code that tries to check if value is a number at runtime:

function checkNumber(value: any): boolean {
  if (value instanceof number) {
    return true;
  }
  return false;
}

medium

A. The function should use typeof value === 'number' instead.

B. The function should use value.constructor === Number.

C. The function is correct and will return true for numbers.

D. Using instanceof with a primitive type causes a runtime error.

Solution

1. Step 1: Understand instanceof usage

   instanceof works with objects, not primitive types like number.

2. Step 2: Identify error cause

   Using value instanceof number causes a runtime error because number is not a constructor function.

3. Final Answer:

   Using instanceof with a primitive type causes a runtime error. -> Option D

4. Quick Check:

   instanceof with primitives = error [OK]

Hint: Use typeof for primitives, not instanceof [OK]

Common Mistakes:

• Using instanceof with primitive types
• Thinking instanceof works like typeof
• Ignoring runtime errors from wrong instanceof usage

5. Given that TypeScript types are erased at runtime, how can you safely handle different input types in a function that accepts string | number and returns their length or value doubled?

function process(input: string | number) {
  // What is the best way to handle types here?
}

hard

A. Rely on TypeScript types only and assume input is always correct at runtime.

B. Use JavaScript runtime checks like typeof to distinguish types and process accordingly.

C. Use instanceof to check if input is a string or number.

D. Convert input to string and always return its length.

Solution

1. Step 1: Recall type erasure impact

   TypeScript types do not exist at runtime, so runtime checks must use JavaScript operators.

2. Step 2: Choose correct runtime check

   Using typeof lets you detect if input is 'string' or 'number' and handle each case safely.

3. Step 3: Avoid incorrect methods

   Relying only on TypeScript types or using instanceof with primitives is unsafe or incorrect.

4. Final Answer:

   Use JavaScript runtime checks like typeof to distinguish types and process accordingly. -> Option B

5. Quick Check:

   Runtime type safety = typeof checks [OK]

Hint: Always check types at runtime with typeof for unions [OK]

Common Mistakes:

• Assuming TypeScript types exist at runtime
• Using instanceof with primitives
• Ignoring runtime type checks