Javatpoint Logo
Javatpoint Logo

Components of TypeScript

The TypeScript language is internally divided into three main layers. Each of these layers is divided into sublayers or components. In the following diagram, we can see the three layers and each of their internal components. The three layers are:

  1. Language
  2. The TypeScript Compiler
  3. The TypeScript Language Services
Components of TypeScript

1. Language

It features the TypeScript language elements. It comprises elements like syntax, keywords, and type annotations.

2. The TypeScript Compiler

The TypeScript compiler (tsc) transform the code written in TypeScript equivalent to its JavaScript code. It also performs the parsing, type checking of our TypeScript code to JavaScript code.

Components of TypeScript

Browser doesn't support the execution of TypeScript code directly. So the program written in TypeScript must be re-written in JavaScript equivalent code which supports the execution of code in the browser directly. To perform this, TypeScript comes with TypeScript compiler named "tsc." The current version of TypeScript compiler supports ES5, by default. It compiles the source code in any module like ES6, SystemJS, AMD, etc.

We can install the TypeScript compiler by locally, globally, or both with any npm package. Then we can compile the TypeScript file by running tsc command on the command line.

Example:

Compiler Configuration

The TypeScript compiler configuration is given in tsconfig.json and looks like the following:

Declaration file

When we compile the TypeScript source code, then it gives an option to generate a declaration file with the extension .d.ts. This file works as an interface to the components in the compiled JavaScript. If a file has an extension .d.ts then each root level definition must have the declare keyword prefixed to it. It makes clear that there will be no code emitted by TypeScript which ensures that the declared item will exist at runtime. The declaration file provides IntelliSense for JavaScript libraries like jQuery.

3. The TypeScript Language Services

The language service provides information which helps editors and other tools to give better assistance features such as automated refactoring and IntelliSense. It exposes an additional layer around the core-compiler pipeline. It supports the common typical editor operations like code formatting and outlining, colorization, statement completion, signature help, etc.





Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


B.Tech / MCA