by Touhidur Zaman, Web Instructor, Job Placement Team, Programming Hero.

Introduction to TypeScript

What is TypeScript?

TypeScript is a powerful, open-source programming language that is built on JavaScript by adding optional static typing. In simple words, TypeScript is a syntactic superset of JavaScript.

TypeScript helps developers to specify the types of variables, function arguments, and return values, where types are determined at runtime (development environment). TypeScript checks for type-related errors while you're writing the code at runtime, reducing the chances of bugs. TypeScript is compiled into JavaScript, making it compatible with all JavaScript environments.

TypeScript vs JavaScript

TypeScript is known as an Object-oriented programming language, whereas JavaScript is a prototype-based language.
TypeScript has a feature known as Static typing, but JavaScript does not support this feature.

Feature	TypeScript	JavaScript
Typing	Provides static typing	Dynamically typed
Tooling	Comes with IDEs and code editors	Limited built-in tooling
Syntax	Similar to JavaScript, with additional features	Standard JavaScript syntax
Compatibility	Backward compatible with JavaScript	Cannot run TypeScript in JavaScript files
Debugging	Stronger typing can help identify errors	May require more debugging and testing

TypeScript Compilation

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.

TypeScript (.ts)
        ↓
TypeScript Compiler (tsc)
        ↓
JavaScript (.js)
        ↓
Browser / Node.js

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.