Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How TypeScript Compilation Works?
The popular programming language TypeScript has been widely adopted by developers in recent years. It is a superset of JavaScript that enhances the language with static typing and other features to make complicated application development simpler and error-prone. However, TypeScript code must be compiled into JavaScript because it cannot be performed directly in a browser or server. Any developer using TypeScript must comprehend how TypeScript compilation operates.
There are multiple processes in the TypeScript compilation process, including parsing, type-checking, outputting JavaScript, bundling, and execution. The TypeScript compiler parses the code during the parsing phase and creates an abstract syntax tree model of the code. In the type-checking stage, the code is examined to determine the kinds of variables, functions, and expressions and to look for type mistakes. The compiler subsequently converts the TypeScript code into JavaScript code, which may be packaged using a program like Webpack or Rollup. Eventually, just like other JavaScript code, the code included in the bundle is run in a browser or on a server.
Users can compile TypeScript code in several methods, such as using the TypeScript compiler command-line interface (CLI), a build tool, or a code editor with TypeScript support. Understanding how TypeScript compilation functions is a crucial component of comprehending the language. Developers creating complicated apps frequently choose TypeScript because of its robust capabilities and simplicity.
Steps of TypeScript Compilation
A superset of JavaScript called TypeScript gives the language additional capabilities like static typing. To run in a browser or on a server, TypeScript code must be translated into JavaScript.
The process of type script compilation is as follows −
Parsing − The code is parsed by the TypeScript compiler, which creates an abstract syntax tree (AST) model of it.
Type-checking − The compiler examines the code to determine the types of variables, functions, and expressions. Additionally, it looks for type mistakes like assigning a text to a variable holding a number.
Generating JavaScript − The compiler produces JavaScript code after the TypeScript code has been type-checked. Type annotations have been removed from the generated JavaScript code, and other TypeScript-specific features have been converted into JavaScript equivalents. This created JavaScript code is equivalent to the original TypeScript code.
Bundling − To minimize HTTP requests and prepare the resulting JavaScript code for production, the code can be packed using a program like Webpack or Rollup.
Execution − The packaged JavaScript code is subsequently run in a browser or server like any other JavaScript code.
The TypeScript compiler command-line interface (CLI) and build tools with integrated TypeScript support are two methods for compiling TypeScript.
Example
In this example, we will use TypeScript to multiply two numbers. We will first create the typescript file and declare the variables with their respective types, and then we will declare a function that will multiply two numbers and give the answer in the console. The typescript code will then be compiled, and we will get the javascript code that we can easily run in the browsers.
let number1: number = 10
let number2: number = 20
function multiply(num1: number, num2: number) {
let ans: number = num1 * num2
return ans
}
let answer = multiply(number1, number2)
console.log(answer)
On compiling, it will generate the following JavaScript code −
var number1 = 10;
var number2 = 20;
function multiply(num1, num2) {
var ans = num1 * num2;
return ans;
}
var answer = multiply(number1, number2);
console.log(answer);
Example 2
In this example, we will use TypeScript and compile it into JavaScript code. We are taking an array of objects, looping them, and printing each value one by one. Firstly we declare the variables and their types. Then we declare a for loop and loop it through the array and console logging each item of the array.
let arr: { name: String; email: String }[] = [
{
name: 'ABC',
email: 'abc@abc.com',
},{
name: 'XYZ',
email: 'xyz@xyz.com',
},{
name: 'MNO',
email: 'mno@mno.com',
},{
name: 'PQR',
email: 'pqr@pqr.com',
},
]
for (let i = 0; i < arr.length; i++) {
console.log('Name: ' + arr[i].name + ' Email: ' + arr[i].email)
}
On compiling, it will generate the following JavaScript code −
var arr = [
{
name: 'ABC',
email: 'abc@abc.com'
},{
name: 'XYZ',
email: 'xyz@xyz.com'
},{
name: 'MNO',
email: 'mno@mno.com'
},{
name: 'PQR',
email: 'pqr@pqr.com'
},
];
for (var i = 0; i < arr.length; i++) {
console.log('Name: ' + arr[i].name + ' Email: ' + arr[i].email);
}
2K+ Views
