How TypeScript Compilation Works ?

In this article, we will try to understand how TypeScript compilation works (like how a TypeScript code or a program compiles and produces an output in the browser’s console). 

First of all, as we know that TypeScript is the superset language of JavaScript having some additional features including Types additions. We may also add data types along with the variable declarations, and return types along with the function declarations (or method declarations). TypeScript is also known as Optionally Statically Typed Language since it gives an option to the compiler to whether or not to include data types associated with the variables or it basically allows us to make the compiler unaware of the type of data or variable etc. TypeScript makes JavaScript type system easier to work with and also it reduces all the problems which we as users or developers face while working with JavaScript.

Let’s understand how TypeScript compilation works?

• Whenever any code is written using the TypeScript language is kept in a file that is named anything followed by a suffix containing “.ts” at the end.
• This suffix indicates to the compiler that the file has a program or a code that is written in TypeScript language and thus compiler takes care of that fact and accordingly compiles the code.
• When the compiler receives a file (“.ts” file), it firstly compiles the TypeScript program code in JavaScript itself.
• When the compiler does the above-mentioned process, it actually creates another file that is of JavaScript (has the suffix “.js”).
• Then after compiling the TypeScript code file into the JavaScript code file, it actually reads and interprets the JavaScript code.
• After interpreting the JavaScript code, the compiler compiles that code which thereafter produces the result.
• Thus, in comparison to the JavaScript compilation process, TypeScript compile takes more time to compile the TypeScript file first into the JavaScript and thereafter produces the result into the browser’s console.

Now that we have understood in detail the compilation of TypeScript let us understand all the facts using a coding example which is listed below:

Example: In this example, we will first create a TypeScript file (with suffix being kept as “.ts”) containing some logic or results which we need to output in the browser’s console.

Javascript

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

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

The above code snippet when the compiler receives makes that TypeScript code converted into the following JavaScript code (file name is of “.js” itself):-

Javascript

var displayData = function (id, name, field) {
    return (id + " - " + name + " - " + field);
};

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

Output: The output of both the code snippet would remain the same which is thus illustrated below.

1 - Aman - CSE