Skip to main content

tsconfig.json

The tsconfig.json file in TypeScript allows you to specify the root level files and the compiler options that you require to compile your project. By configuring tsconfig.json, you can control how your TypeScript project behaves, making it easier to work with complex codebases.

Basic Configuration​

target​

The target option in the TypeScript configuration specifies the ECMAScript target version. The compiler will output code to run on this ECMAScript version.

{
  "compilerOptions": {
    "target": "es5"
  }
}

In the above snippet, the target is set to es5. The TypeScript compiler will thus produce JavaScript compatible with ECMAScript 5.

module​

The module option determines the module code generation method.

{
  "compilerOptions": {
    "module": "commonjs"
  }
}

Here, the compiler will generate modules following the CommonJS pattern, suitable for usage in Node.js applications.

outDir​

The outDir option tells TypeScript to put the compiled files into a specified directory.

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

This tells TypeScript to put all compiled JavaScript files in a directory named dist.

rootDir​

The rootDir option informs the compiler where the root directory of the source files is located.

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

In this example, all TypeScript source files are located in the src directory.

strict​

The strict option enables a wide range of type checking behavior to ensure that you catch more bugs upfront.

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

Enabling this option turns on a suite of strictness checks in the TypeScript compiler, providing enhanced type safety.

Compiler Options​

lib​

The lib option specifies library files to be included in the compilation. It allows developers to choose JavaScript language features they can use based on their target environments.

{
  "compilerOptions": {
    "lib": ["es6", "dom"]
  }
}

The code above will only include typings for ECMAScript 6 and DOM APIs.

jsx​

The jsx option provides support for JSX syntax, a syntax extension for JavaScript commonly used with React.

{
  "compilerOptions": {
    "jsx": "react"
  }
}

This configuration allows using JSX syntax in TypeScript files and emits React-compatible JavaScript code.

sourceMap​

The sourceMap option generates corresponding .map files along with the compiled JavaScript files.

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

By setting this to true, source map files are generated to aid debugging by linking the generated JavaScript code back to the original TypeScript source.

declaration​

The declaration option tells TypeScript to generate corresponding .d.ts files along with the compiled JavaScript files.

{
  "compilerOptions": {
    "declaration": true
  }
}

This helps in publishing your types if you are creating a library, or working in a project where types are important.

Module Resolution​

baseUrl​

The baseUrl option is used to resolve non-relative module names.

{
  "compilerOptions": {
    "baseUrl": "./"
  }
}

Setting baseUrl to ./ tells TypeScript to start module resolution from the current directory.

paths​

The paths option, used in tandem with baseUrl, allows you to set up custom paths to your modules.

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "*": ["src/*"]
    }
  }
}

In this configuration, all modules are resolved relative to the src directory.

esModuleInterop​

The esModuleInterop option allows default imports from modules with no default export.

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

This is to support interoperability between CommonJS and ES Modules.

Using tsconfig in Tools​

Visual Studio Code​

Visual Studio Code uses the TypeScript configuration file to provide a consistent development environment. This includes features such as IntelliSense, refactoring tools, and type checking. 

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "jsx": "react"
  }
}

In the above configuration, Visual Studio Code would leverage these settings to provide code completion, warnings, and refactorings.

TypeScript CLI​

The TypeScript command line interface (CLI) uses tsconfig.json for its configuration. You can compile TypeScript using the tsc command.

tsc --project ./tsconfig.json

With the --project flag, the CLI knows to use your tsconfig.json for its configuration when compiling your TypeScript code. This helps to ensure consistency in your project and to enforce the standards you've defined.