Type erasure and its consequences in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of generic function with type erasure

What is the output of this TypeScript code after compilation and running in JavaScript?

Typescript

function identity<T>(arg: T): T {
  return arg;
}

const result = identity<number>(42);
console.log(typeof result);

A "T"

B "generic"

C "number"

D "undefined"

💡 Hint

Remember that TypeScript types are removed during compilation.

TypeScript removes all type information during compilation. The generic type T does not exist at runtime, so the typeof operator returns the JavaScript type of the value, which is "number".

🧠 Conceptual

intermediate

Effect of type erasure on runtime type checks

Which statement best describes the effect of TypeScript's type erasure on runtime type checks?

A TypeScript types are erased and cannot be used for runtime type checks.

B TypeScript converts types into JavaScript classes for runtime use.

C TypeScript automatically inserts runtime type checks based on types.

D TypeScript types are available at runtime for type checking.

💡 Hint

Think about what happens to types after compilation.

TypeScript removes all type annotations and interfaces during compilation, so no type information exists at runtime. Therefore, runtime type checks must be implemented manually if needed.

🔧 Debug

advanced

Why does this type guard fail at runtime?

Consider this TypeScript code snippet. Why does the type guard fail to distinguish types at runtime?

Typescript

interface Cat {
  meow(): void;
}
interface Dog {
  bark(): void;
}

function isCat(animal: Cat | Dog): animal is Cat {
  return (animal as Cat).meow !== undefined;
}

const pet = { bark: () => console.log('woof') };

if (isCat(pet)) {
  pet.meow();
} else {
  pet.bark();
}

A Because TypeScript types are erased, the property check is unreliable at runtime.

B Because the pet object does not have a meow property, the check always returns true.

C Because the type guard syntax is incorrect and causes a compile error.

D Because the pet object is missing the bark method, causing a runtime error.

💡 Hint

Check what happens to interfaces and type assertions at runtime.

TypeScript interfaces do not exist at runtime. The type assertion does not add properties. The check relies on property presence, which can be unreliable if the object shape is not guaranteed.

📝 Syntax

advanced

Identify the runtime error caused by type erasure

What runtime error will this TypeScript code produce after compilation and running in JavaScript?

Typescript

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

console.log(getLength<string>("hello"));

A ReferenceError: arg is not defined

B TypeError: Cannot read property 'length' of undefined

C SyntaxError: Unexpected token

D No error, outputs 5

💡 Hint

Consider what happens to the generic type and the argument passed.

The generic type T is erased, but the argument is a string which has a length property. So accessing length works and outputs 5.

🚀 Application

expert

How to preserve type information at runtime despite type erasure?

Which approach allows you to preserve and use type information at runtime in TypeScript despite type erasure?

A Rely on TypeScript's automatic runtime type preservation.

B Use decorators or explicit metadata reflection to store type info at runtime.

C Use only interfaces since they exist at runtime.

D Avoid generics to keep types at runtime.

💡 Hint

Think about ways to add metadata manually or with tools.

TypeScript erases types, but decorators and metadata reflection APIs can store type info explicitly for runtime use.

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