How TypeScript works internally?

TypeScript is a strongly-typed programming language that builds upon the syntax of JavaScript. It was created by Microsoft and was released in 2012. TypeScript is designed to make large-scale JavaScript applications more manageable and easier to maintain by adding features such as type annotations, interfaces, and classes. In this article, we will explore how TypeScript works internally. We will look at its architecture, type-checking, and compilation process.

Overview of TypeScript

TypeScript adds new syntax features to JavaScript but also maintains compatibility with the existing JavaScript code. TypeScript source code is compiled into plain JavaScript code that can be run on any browser or JavaScript runtime.

TypeScript supports static typing, which means that variables, functions, and objects can have defined types at compile time. This allows for better code quality and fewer runtime errors. TypeScript also supports interfaces, which define contracts between objects and classes. Interfaces can help to make code more maintainable and easier to understand.

TypeScript also supports classes, which are a way to define object-oriented programming (OOP) concepts in JavaScript. Classes provide a way to encapsulate data and behavior and to create reusable components.

TypeScript uses the TypeScript Compiler (tsc) to convert TypeScript source code into JavaScript code. The TypeScript Compiler is a command-line tool that can be used to compile TypeScript code into JavaScript. The TypeScript Compiler also provides type checking, which helps to catch errors at compile time.

TypeScript Architecture

The TypeScript compiler is responsible for converting TypeScript code to JavaScript. It is written in TypeScript and runs on Node.js. The compiler is divided into three main parts −

• The Scanner − The scanner reads the source code and produces a stream of tokens. A token is a sequence of characters that represents a single element in the code, such as a keyword, variable name, or operator.

• The Parser − The parser takes the stream of tokens produced by the scanner and creates an abstract syntax tree (AST). The AST is a representation of the source code that is easier for the compiler to analyze.

• The Checker − The checker analyzes the AST and performs type checking. It checks that variables are used correctly and that function arguments match their expected types.

TypeScript Type Checking

TypeScript is a statically-typed language, which means that every variable and function parameter must have a type. The type of a variable determines what kind of data it can hold. For example, a variable of type number can only hold numerical values.

TypeScript uses a type system that is based on structural subtyping. This means that types are compared based on their structure rather than their name. If two types have the same structure, TypeScript considers them to be compatible, even if they have different names.

TypeScript also supports interfaces, which are used to define the structure of objects. An interface is a contract that specifies what properties an object must have. If an object satisfies the requirements of an interface, TypeScript considers it to be of that type.

How TypeScript Works Internally?

Following is the stepwise summary of the internal working of TypeScript −

Parsing

TypeScript starts by parsing the source code into an abstract syntax tree (AST). The AST represents the structure of the code in a way that is easier to analyze and transform. The TypeScript Compiler uses the TypeScript Compiler API to parse the code and generate the AST.

.

Type Checking

TypeScript uses a type system to check the types of variables, functions, and objects. This is done to ensure that the code is correct and to catch errors before the code is run. The type system is based on a combination of explicit type annotations and type inference.

Type annotations define the type of a variable, function parameter, or return value. For example, the following code declares a variable x of type number −

let x: number = 42;

Type inference is used to deduce the type of a variable based on its usage in the code. For example, the following code infers that x is of type number −

let x = 42;

TypeScript also supports structural typing, which means that types are based on their shape rather than their name. This allows for greater flexibility when working with objects and interfaces.

Transpiling

Once the code has been parsed and type-checked, it is transpiled into JavaScript. TypeScript is designed to be compatible with existing JavaScript code, so the transpiled code should be compatible with all major JavaScript runtimes.

TypeScript supports a variety of module systems, including CommonJS and ES6 modules. This allows code to be organized into reusable components shared between different parts of the application.

The various configuration options for the typescript compiler (tsc) are specified in tsconfig.json file.

Bundling

Bundling is a common practice in web development because it can reduce the number of requests made by a web application, improving performance. When TypeScript code is compiled into JavaScript, each module is translated into a separate file. If a web application or a Node.js application uses multiple modules, it would require multiple requests to load all the module files, impacting performance.

Bundling the JavaScript files generated by the TypeScript compiler using Webpack, Rollup, or Parcel can solve this problem by combining all the modules into a single file. This single file can then be loaded by the web browser or the Node.js environment, reducing the number of requests required to load the application.

Execution

The bundled JavaScript code can now be run on any browser or server in the Node.js environment, just like any other JavaScript code.

Conclusion

In conclusion, TypeScript is a powerful language that provides many features not available in JavaScript. Its architecture, type system, and compilation process make writing and maintaining large-scale applications easier. TypeScript constantly evolves and improves, with new features and updates regularly added. It is a popular choice for many developers, and its adoption is expected to grow.