Skip to main content

The Typescript Compiler

The Typescript Compiler

The TypeScript compiler is a powerful tool in the TypeScript ecosystem that converts your TypeScript code into JavaScript, which can be understood and executed by web browsers. This article will cover the essentials of the TypeScript compiler to help beginners understand its purpose, how it works, and how to use it effectively.

What is the TypeScript Compiler?​

The TypeScript compiler, also known as tsc, is at the heart of TypeScript. It's a source-to-source compiler that transforms TypeScript, a statically typed superset of JavaScript, into plain JavaScript that can be run in any browser or Node.js environment. The TypeScript compiler also checks your code for errors during the compilation process, making it easier to catch and fix bugs before runtime.

Installing the TypeScript Compiler​

Before you can compile any TypeScript code, you need to install the TypeScript compiler. You can install it globally on your machine using the Node Package Manager (npm), which comes with Node.js. Here's how to install it:

npm install -g typescript

This command installs the TypeScript compiler globally on your machine, meaning it can be accessed from any directory.

Compiling TypeScript into JavaScript​

Once installed, you can compile TypeScript files into JavaScript using the tsc command followed by the name of the file you want to compile:

tsc yourFile.ts

This command generates a JavaScript file with the same name in the same directory:

yourFile.js

You can now run this JavaScript file in any JavaScript environment.

Compiler Options​

The TypeScript compiler comes with a set of options that give you control over the compilation process. These options can be set in a special file named tsconfig.json in the root directory of your TypeScript project:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Here's a brief description of some common compiler options:

  • target: Specifies the JavaScript version to compile your TypeScript code into. The default is ES3.
  • module: Determines the module system to be used. The default is commonjs.
  • strict: Enables a wide range of type checking behavior to catch more errors during compilation.
  • outDir: Specifies the output directory for the compiled JavaScript files.

Watch Mode​

The TypeScript compiler features a 'watch mode' which automatically recompiles your TypeScript files whenever they are saved. This can be a huge time-saver during development. You can activate watch mode using the --watch (or -w) option:

tsc --watch

Conclusion​

Understanding the TypeScript compiler is a fundamental part of learning TypeScript. It not only translates your TypeScript code into JavaScript but also helps you catch errors early in the development process. With the right compiler options and the use of watch mode, the TypeScript compiler can enhance your development workflow and make you more productive.