How TypeScript Compilation Works?

TypeScript is a superset of JavaScript that adds type safety to your code. It compiles into plain JavaScript, allowing it to run in any JavaScript environment.

The TypeScript compiler (tsc) checks the code for errors and then converts it into JavaScript. During this process, all TypeScript-specific features like type annotations are removed, leaving behind clean JavaScript code.

Let's understand how TypeScript compilation works:

Steps of TypeScript Compilation

The TypeScript compilation process transforms your TypeScript code into executable JavaScript. Here’s how it works step by step:

• Parsing: The TypeScript compiler parses the code to create an Abstract Syntax Tree (AST). This tree represents the structure of your code in a way that the compiler can understand and manipulate.
• Type-Checking: The compiler examines the code to determine the types of variables, functions, and expressions. This step ensures type safety by catching type-related errors before the code is executed.
• Generating JavaScript: After type-checking, the compiler produces JavaScript code. During this phase, type annotations are removed, and TypeScript-specific features are converted into JavaScript equivalents.
• Bundling (Optional): To optimize performance, the generated JavaScript code can be bundled using tools like Webpack or Rollup. Bundling reduces the number of HTTP requests by combining multiple files into one.
• Execution: The final JavaScript code is executed in a browser or server environment.

Example

Here we are going to see a TypeScript code snippet and its corresponding compiled JavaScript output. This will help you understand how TypeScript's type annotations and features are translated into standard JavaScript.

TypeScript Code:

let displayData = (
    id: number, 
    name: string, 
    field: string) : string => {
          return (id + " - " + name + " - " + field);
}

console.log(displayData(1 , "Aman", "CSE"));

• In this Typescript Code we are defined
• Function Invocation: displayData(1, "Aman", "CSE") is called, and the result is logged to the console.

Compiled JavaScript Code:

After compiling the TypeScript code, the resulting JavaScript code is:

var displayData = function (id, name, field) {
    return id + " - " + name + " - " + field;
};
console.log(displayData(1, "Aman", "CSE"));

• Function Definition: The arrow function is converted to a regular function expression.
• Type Annotations: Type annotations are removed, as JavaScript doesn't support them.

Output:

1 - Aman - CSE

Basic Facts About TypeScript

Here are some basic facts about TypeScript:

• Superset of JavaScript: TypeScript is built on top of JavaScript. It adds static typing and other features, but any valid JavaScript code is also valid TypeScript code.
• Compilation to JavaScript: Browsers and Node.js can’t run TypeScript directly. It must be compiled (transpiled) into plain JavaScript before execution.
• Developer Tool: TypeScript helps catch errors early during development and improves code documentation with types, making it easier to maintain and understand.

TypeScript Compilation Flaws

While TypeScript offers significant advantages, it's important to be aware of its limitations, particularly concerning compilation:

• No Runtime Checks: TypeScript checks for errors only during compilation. Once it’s converted to JavaScript, those checks are gone. Runtime errors can still occur.
• Debugging Challenges: Errors in the compiled JavaScript might not directly match your original TypeScript code, making debugging trickier.
• Strictness: The strict type system can feel overly restrictive at times, requiring extra effort to satisfy the compiler even when your logic is correct.

amansingla

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• TypeScript
• JavaScript-Questions