How TypeScript is Transpiled to JavaScript

March 30, 2023

How is typescript transpiled to javascript ?

TypeScript is a superset of JavaScript, which means that any valid JavaScript code is also valid TypeScript code. TypeScript adds additional features to JavaScript, such as static typing, interfaces, and classes.

When you write TypeScript code, you typically write it in a .ts file. To transpile TypeScript code to JavaScript, you use the TypeScript compiler (tsc), which is installed as an npm package. The tsc command takes a .ts file as input and outputs a corresponding .js file. For example, to transpile a file named app.ts, you would run the following command:

tsc app.ts

The TypeScript compiler checks the code for syntax and type errors, and generates a corresponding JavaScript file that is equivalent to the TypeScript code.

The generated JavaScript code contains all of the functionality of the original TypeScript code, but with a few differences. For example, TypeScript includes type annotations, which are not valid JavaScript syntax. To make the code valid JavaScript, the TypeScript compiler removes these type annotations during the transpilation process. Here's an example:

typescript

function greet(name: string): void {
  console.log(`Hello, ${name}!`);
}

This TypeScript code defines a function that takes a string parameter named name and returns void. After transpilation, the generated JavaScript code would look like this:

javascript

function greet(name) {
  console.log(`Hello, ${name}!`);
}

As you can see, the type annotation : string has been removed from the parameter, and the void return type has been omitted.

In addition to removing type annotations, the TypeScript compiler may also generate additional JavaScript code to support TypeScript features. For example, if you define a class in TypeScript, the compiler generates JavaScript code to create the class constructor, methods, and properties. Here's an example:

typescript

class Person {
  constructor(public name: string, private age: number) {}

  sayHello(): void {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

This TypeScript code defines a class named Person that has a constructor with two parameters (a string named name and a number named age) and a method named sayHello that logs a message to the console. After transpilation, the generated JavaScript code would look like this:

javascript

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

As you can see, the constructor parameters have been assigned to instance properties, and the public and private access modifiers have been removed.

Once you have transpiled your TypeScript code to JavaScript, you can run the JavaScript code in any environment that supports JavaScript. For example, you could run the code in a web browser or in Node.js.

Here's a Markdown code block that summarizes the steps:

# Transpiling TypeScript to JavaScript

1. Write TypeScript code in a `.ts` file.
2. Use the TypeScript compiler (`tsc`) to transpile the TypeScript code to JavaScript.
3. The generated JavaScript code will be equivalent to the TypeScript code, but with type annotations removed