Compiling TypeScript

TypeScript cannot be run directly in the browser. It needs to be compiled into regular JavaScript first. This is because browsers only understand JavaScript, not TypeScript. You can use the official TypeScript compiler (tsc), or you may use other tools or compilers that work with TypeScript. In many modern frameworks, the compilation process is automated for you.

To start using TypeScript on your machine, you first need to install it:

npm install -g typescript

Once TypeScript is installed, you can compile a .ts (TypeScript) file into a .js (JavaScript) file. For example, to compile a file named your-file.ts, you can run:

tsc your-file.ts

This will generate a JavaScript file called your-file.js that can be executed in the browser or any JavaScript environment.

TypeScript Compiler Options

The TypeScript compiler (tsc) has many options that let you control the output of the compilation process. Instead of typing out long command-line options every time you compile, it’s common to use a tsconfig.json file in your project. This file contains all the configuration settings for TypeScript, like which files to include and how to treat them. This is especially useful in larger projects or when working with teams, as it ensures everyone uses the same settings.

In most projects, you don’t need to worry about manually setting compiler options every time, as the tsconfig.json file will handle it for you.

tsconfig.json

To create a tsconfig.json file, you can run the following command in your project directory:

tsc --init

This will create a tsconfig.json file with default settings.

Here’s an example of what a simple tsconfig.json might look like:

{
  "compilerOptions": {
    "target": "es2022",       // JavaScript version to output
    "module": "NodeNext",     // Module system to use
    "outDir": "dist",         // Output directory
    "esModuleInterop": true,  // Allow default import of non-ES modules
    "strict": true,           // Enable all strict type-checking options
    "lib": ["es2022", "dom"]  // Built-in types to include
  },
  "include": ["src/**/*.ts"], // Files to include in the compilation
  "exclude": ["node_modules"] // Folders to exclude from the compilation
}

Once the tsconfig.json file is set up, you can simply run tsc without any arguments, and the compiler will use the settings defined in the file.

tsc

TypeScript disappears after compilation

Once TypeScript is compiled into JavaScript, TypeScript disappears. This means that all the type annotations you write (like string, number, etc.) will not exist in the JavaScript code. For example, this TypeScript code:

let name: string = 'Michele';

After compiling, will become:

let name = 'Michele';

As you can see, the type annotation : string is removed in the compiled JavaScript code. TypeScript exists only to help you, the developer, write better and safer code. Once the code is compiled, only the JavaScript remains.

However, there are a few exceptions to this rule, such as enums (which we’ll cover later).