Type erasure and its consequences in Typescript - Mini Project: Build & Apply

Understanding Type Erasure and Its Consequences in TypeScript

📖 Scenario: You are building a simple TypeScript program to understand how generic types behave at runtime. TypeScript removes type information when it compiles to JavaScript, which is called type erasure. This means types exist only during development and are not present when the code runs.

🎯 Goal: Learn how TypeScript's type erasure works by creating a generic function, adding a type variable, using the generic function, and then observing the output at runtime.

📋 What You'll Learn

Create a generic function with a type parameter

Add a variable to hold a value of the generic type

Call the generic function with a specific type

Print the result to observe type erasure effects

💡 Why This Matters

🌍 Real World

Understanding type erasure helps developers know why TypeScript types do not exist at runtime and how to write safer code that does not rely on runtime type information.

💼 Career

Many TypeScript developers need to understand type erasure to debug issues, write type-safe code, and integrate TypeScript with JavaScript libraries that do not have type information.

1

Create a generic function

Write a generic function called identity with a type parameter T that takes a parameter value of type T and returns it.

Typescript

function identity(value: T): T {
  // Your code here
}

Need a hint?

Use after the function name to declare a generic type parameter.

2

Add a variable with a generic type

Create a variable called myNumber of type number and assign it the value 42.

Typescript

function identity(value: T): T {
  return value;
}

// Your code here

Need a hint?

Use const myNumber: number = 42; to declare the variable.

3

Call the generic function with a specific type

Call the identity function with the type number and argument myNumber. Store the result in a variable called result.

Typescript

function identity(value: T): T {
  return value;
}

const myNumber: number = 42;

// Your code here

Need a hint?

Use identity(myNumber) to call the function with type number.

4

Print the result to observe type erasure

Write a console.log statement to print the value of result. Notice that the output is just the value without any type information.

Typescript

function identity(value: T): T {
  return value;
}

const myNumber: number = 42;

const result = identity(myNumber);

// Your code here

Need a hint?

Use console.log(result); to print the value.