Muhammad Sufiyan's Blog

Configuring and Using the TypeScript Compiler

Muhammad Sufiyan's photo
Muhammad Sufiyan
·

4 min read

The TypeScript compiler (tsc) is a powerful tool that compiles TypeScript code into JavaScript. This guide will cover how to use the compiler and configure it using the tsconfig.json file.

Basic Compilation

To compile a TypeScript file (app.ts) to JavaScript, use the following command:

tsc app.ts

This command compiles app.ts into app.js. However, running this command every time you make changes can be cumbersome. Instead, you can use watch mode to automatically compile the file whenever it changes:

tsc app.ts --watch
tsc app.ts -w

Compiling Multiple Files

If you have multiple TypeScript files in your project, you can compile all of them at once by running:

tsc -w
tsc --watch

Configuration with tsconfig.json

To configure TypeScript for your project, you need a tsconfig.json file. This file is created by initializing TypeScript in your project:

tsc --init

This command generates a tsconfig.json file with various configuration options. Let's dive into some of these options.

Exclude

The exclude option allows you to specify files or directories that should not be compiled.

{
  "exclude": ["node_modules", "dist"]
}

Pattern: *.dev.ts

When you use the *.dev.ts pattern in the exclude option, it tells the TypeScript compiler to exclude any files with the .dev.ts extension that are located in the root directory of your project.

Explanation:

  • The * character is a wildcard that matches any sequence of characters.

  • The *.dev.ts pattern matches any file with the .dev.ts extension in the root directory only.

Example:

  • file.dev.ts (in the root directory) will be excluded.

  • src/file.dev.ts will not be excluded.

  • test/file.dev.ts will not be excluded.

Pattern: **/*.dev.ts

When you use the **/*.dev.ts pattern, it tells the TypeScript compiler to exclude any files with the .dev.ts extension in any directory within the project, including subdirectories. Here’s how it works:

Explanation:

  • The ** character is a wildcard that matches any directory or subdirectory.

  • The **/*.dev.ts pattern matches any file with the .dev.ts extension in any directory or subdirectory.

Example:

  • file.dev.ts (in the root directory) will be excluded.

  • src/file.dev.ts will be excluded.

  • test/utils/file.dev.ts will be excluded.

Compiler Options

The compilerOptions section contains various settings that control the compilation process.

sourceMap

Generates source maps, which help with debugging by mapping the compiled JavaScript code back to the original TypeScript code.

{
  "compilerOptions": {
    "sourceMap": true
  }
}

outDir

Specifies the output directory for the compiled JavaScript files.

{
  "compilerOptions": {
    "outDir": "./dist"
  }
}

rootDir

Specifies the root directory of the TypeScript source files.

{
  "compilerOptions": {
    "rootDir": "./src"
  }
}

removeComments

Removes comments from the compiled JavaScript files.

{
  "compilerOptions": {
    "removeComments": true
  }
}

noEmitOnError

Prevents the compiler from emitting JavaScript files if there are any TypeScript compilation errors.

{
  "compilerOptions": {
    "noEmitOnError": true
  }
}

Strict Mode

The strict option enables all strict type-checking options.

{
  "compilerOptions": {
    "strict": true
  }
}

All Strict Options

  • strictNullChecks: Ensures that null and undefined are only assignable to void or their respective types.

  • strictPropertyInitialization: Ensures that class properties are initialized correctly.

  • strictBindCallApply: Ensures that bind, call, and apply methods are used correctly.

  • strictFunctionTypes: Ensures that function types are checked strictly.

  • strictTemplateStrings: Ensures that template strings are used correctly.

  • strictOptionalChaining: Ensures that optional chaining is used correctly.

noUnusedLocals

Reports errors on unused local variables.

{
  "compilerOptions": {
    "noUnusedLocals": true
  }
}

noUnusedParameters

Reports errors on unused parameters.

{
  "compilerOptions": {
    "noUnusedParameters": true
  }
}

noImplicitReturns

Ensures that all code paths in a function return a value.

{
  "compilerOptions": {
    "noImplicitReturns": true
  }
}

Debugger for Chrome Extension

The Debugger for Chrome extension allows you to debug your TypeScript code directly in Visual Studio Code using the Chrome browser.

Installation

  1. Install the Debugger for Chrome extension from the Visual Studio Code marketplace.

  2. Create a launch.json file in the .vscode folder in your project root.

Configuration

Add the following configuration to the launch.json file:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

This configuration launches Chrome and attaches the debugger to your local server running on http://localhost:3000.

Usage

  1. Open your TypeScript project in Visual Studio Code.

  2. Start your development server.

  3. Press F5 to start debugging.

  4. Set breakpoints in your TypeScript code.

  5. Use the Debugger for Chrome extension to step through your code and inspect variables.

This documentation covers the basics of configuring and using the TypeScript compiler, including how to use tsconfig.json to customize the compilation process. It also explains how to use the Debugger for Chrome extension to debug TypeScript code in Visual Studio Code.

JavaScriptTypeScript