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.