TypeScript is a very mighty superset of JavaScript, which adds static typing to the language and allows developers to catch errors early on as well as write more maintainable code. This being said a TypeScript type system erases type information at compile time (or during the compilation), a phenomenon otherwise called “type erasure”.

Understanding what happens at runtime with your code to type erasure is pivotal for TypeScript developers because this knowledge has far-reaching consequences both for architecture design decisions and application performance optimization strategies.

High-Level Language

Javascript is a high-level language. High-level languages are created for people and not machines, so they make it easier to read and write programs by abstracting away from the details of machine code and hardware interaction. For developers, they provide constructs and syntax that are similar to natural language.

Compiling

In software development, compilation is the task of translating high-level language source code into machine code that can be run directly by a computer’s CPU. But in TypeScript, the word “compilation” is sometimes used in a less strict sense.

The course of it, TypeScript compiler reads the code, looks for type errors and converts TypeScript code into JavaScript equivalent or similar to JavaScript so that browsers or other JavaScript environments can execute it.

After the type checking is complete, the compiler does type erasure. That’s right, all of these types you’ve been writing in TypeScript, they’re gone. The reason for this is simple: JavaScript doesn’t know what to do with them.

Transpiling

Transpilation is a type of compilation that translates source-code written in one language into another equivalent source-code language, e.g. in TypeScript, transpiling means converting TypeScript code to JavaScript code. This way allows developers use some features of TypeScript like static typing when working with JavaScript environments.

To be more specific, during transpilation (the process of converting TypeScript into JavaScript), any type annotations such as: string or interface definitions are taken out. Why? Because unlike TypeScript which has static typing and determines variable types before running a program, JavaScript does not care about such things until runtime.

Type Erasure

In TypeScript, type erasure is when type annotations are stripped out while compiling so that only the JavaScript code remains for execution at runtime.

Consequently, during compilation into JavaScript there’s no type information left because everything is in terms of plain old data types such as numbers or booleans etc there are no longer any references back to those static typing features from within our compiled output (which will be executed by machines).

Example: To demonstrate the type erasure.

// TypeScript code
function greet(name: string): void {
    console.log("Hello, " + name.toUpperCase());
}
greet("World");

Output:

Hello, WORLD

Example: To demonstrate the compilation after above TypeScript code have been converted to the JavaScript.

// Compiled JavaScript code
function greet(name) {
    console.log("Hello, " + name.toUpperCase());
}

greet("World");

Output:

Hello, WORLD

As you can see the type annotation: string is removed in the compiled JavaScript code.

Consequences and Implications:

• Runtime Behavior: TypeScript type information is erased while code compilation. Now there is not any kind of type check in new generated JavaScript code. This implies that errors related to types which could have been detected at compile time in TypeScript might only show up as runtime errors which is made by JavaScript. So developers need to be careful with this difference between the behavior of code during compilation and when it’s executed.
• Performance: If one wants runtime type checks on TypeScript, they would have to incur extra costs since the only possible time for type checking in TypeScript is at compile-time. But during compilation, typescript removes all type annotations and therefore there is no runtime performance cost for type annotations.
• Library and Framework Interoperability: The actual design goal of implementing TypeScript is to work well with existing JavaScript libraries and frameworks. Type erasure means that TypeScript code can be used with JavaScript code side by side without running into any kind of compatibility issue. But it should be noted that when external JavaScript libraries are used in a TypeScript project, developers may come across some type-related problems.
• Debugging: Type erasure can make debugging TypeScript applications very difficult. If the types are not visible during the runtime it may required to spend more time for debugging run-time errors which was caused by mismatched types.
• Type Guards and Type Predicates: Type-guards and type-predicates are examples of mechanisms provided by TypeScript to deal with type-erasure and performing runtime type checks. Within a block of code type-guards allow narrowing down the variable’s type whereas functions returning a boolean indicating if an object is of a specific kind are known as type predicates. These features enable stronger writing skills among developers who code in TypeScript by making them more secure against errors which might occur because of wrongly anticipated types.