Type erasure and its consequences in Typescript - Step-by-Step Execution

Concept Flow - Type erasure and its consequences

Write TypeScript code with types

↓

Compile to JavaScript

↓

Remove all type info (Type Erasure)

↓

Run JavaScript code without types

↓

Possible runtime issues if types were wrong

TypeScript removes all type information during compilation, producing plain JavaScript that runs without types, which can cause runtime errors if types were incorrect.

Execution Sample

Typescript

function add(a: number, b: number): number {
  return a + b;
}

const result = add(5, '10' as any);
console.log(result);

This code defines a typed function but calls it with a wrong type, which TypeScript allows at compile time if using 'any' or ignoring errors, but causes a runtime issue after type erasure.

Execution Table

Step	Code Line	TypeScript Check	Compiled JS Behavior	Runtime Result
1	function add(a: number, b: number): number { return a + b; }	Types OK for definition	Function compiled without types	Function ready
2	const result = add(5, '10');	Type error: Argument of type 'string' not assignable to parameter of type 'number'	No error, call proceeds	5 + '10' = '510' (string concatenation)
3	console.log(result);	N/A	Logs '510'	Output: 510 (unexpected string)

💡 TypeScript type errors do not stop JS compilation; runtime behavior may differ due to type erasure.

Variable Tracker

Variable	Start	After add(5, '10')	Final
a	undefined	5	5
b	undefined	'10'	'10'
result	undefined	'510'	'510'

Key Moments - 3 Insights

Why does TypeScript allow calling add(5, '10') even though '10' is a string?

TypeScript actually reports a type error at compile time (see execution_table step 2), but if you ignore or bypass it, the compiled JavaScript runs without types, causing unexpected results.

What happens to type information after TypeScript compiles to JavaScript?

All type information is removed (type erasure), so JavaScript runs without any type checks, which can lead to runtime errors or unexpected behavior if types were incorrect.

Why does the output show '510' instead of 15?

Because JavaScript adds a number and a string by converting the number to a string and concatenating, not by numeric addition, showing a consequence of type erasure.

Visual Quiz - 3 Questions

Look at the execution table at step 2. What does TypeScript report when calling add(5, '10')?

A Type error: Argument of type 'string' not assignable to parameter of type 'number'

B No error, call is valid

C Runtime error thrown

D Function returns undefined

💡 Hint

Check the 'TypeScript Check' column at step 2 in the execution table

According to the variable tracker, what is the value of 'result' after calling add(5, '10')?

A 15

B undefined

C '510'

D Error

💡 Hint

Look at the 'result' row in the variable tracker after the function call

If TypeScript did not erase types, what would happen at runtime when calling add(5, '10')?

A Function returns 15 number

B Runtime error due to type mismatch

C Function returns '510' string

D Function returns undefined

💡 Hint

Think about how type erasure removes type checks before runtime

Concept Snapshot

TypeScript uses types only at compile time.
During compilation, all types are removed (type erasure).
The output is plain JavaScript without type checks.
Wrong types can cause runtime errors or unexpected results.
Always fix type errors before running code.

Full Transcript

TypeScript code includes types to help catch errors early. When TypeScript compiles code, it removes all type information, a process called type erasure. This means the resulting JavaScript code runs without any type checks. For example, a function expecting numbers can be called with a string, which TypeScript warns about but still compiles. At runtime, JavaScript adds a number and a string by concatenation, not addition, causing unexpected results. This shows that type erasure can lead to runtime issues if type errors are ignored. It's important to fix type errors during development to avoid such problems.