In-Depth Guide to tsconfig.json
The tsconfig.json file is the heart of a TypeScript project. It specifies the root files and the compiler options required to compile the project. Its presence in a directory indicates that the directory is the root of a TypeScript project.
1. Initialization
You can generate a tsconfig.json file with default settings and extensive comments by running:
tsc --init
2. Top-Level Properties
The file has several key top-level properties:
compilerOptions: The most important section, containing all the settings for the TypeScript compiler.include: An array of glob patterns specifying which files to include in the compilation. If not specified, it defaults to all TypeScript files (**/*) in the project directory.exclude: An array of glob patterns specifying which files to exclude from compilation.node_modulesis excluded by default.files: An array of file paths to explicitly include. This is less common thaninclude.extends: A path to another configuration file to inherit from.
3. Key compilerOptions
This section controls how TypeScript checks and emits your code.
A. Type Checking
These options are crucial for leveraging TypeScript's safety features.
"strict": true: Enables all strict type-checking options. It's highly recommended to keep this on. It includes:"noImplicitAny": true: Raise error on expressions and declarations with an impliedanytype."strictNullChecks": true: When true,nullandundefinedhave their own distinct types and you'll get a type error if you try to use them where a concrete value is expected."strictFunctionTypes": true: Enable strict checking of function types."strictPropertyInitialization": true: Ensure non-undefined class properties are initialized in the constructor.
B. Module-related Options
These define how modules are resolved and generated.
"module": "commonjs": Specifies the module system for the generated code.commonjs: For Node.js.es2015,es2020,esnext: For modern browsers that support ES modules.
"moduleResolution": "node": How the compiler looks for a module.nodeis the standard for most projects."rootDir": "./src": Specifies the root directory of input files. Only files under this directory are compiled."baseUrl": "./": Base directory to resolve non-absolute module names. Often used withpaths."paths": { "@/*": ["src/*"] }: Creates aliases for module paths. In this example,import MyComponent from '@/components/MyComponent'would resolve tosrc/components/MyComponent.ts.
C. Emit Options
These control the output of the compilation process.
"target": "es2016": The JavaScript language version for the emitted code.es2016is a safe default. Useesnextfor the latest features if your runtime supports them."outDir": "./dist": Redirect output structure to the specified directory. All compiled.jsfiles will go here."sourceMap": true: Generates corresponding.mapfiles, which allow debuggers to map the compiled JavaScript back to the original TypeScript source."declaration": true: Generates corresponding.d.tsfiles, which are type definition files. Essential if you are building a library."removeComments": true: Do not emit comments to output.
D. JavaScript Support
"allowJs": true: Allow JavaScript files to be compiled."checkJs": true: Report errors in.jsfiles. RequiresallowJs.
E. Interoperability
"esModuleInterop": true: Enables compatibility with different module systems (CommonJS vs. ES Modules). It fixes issues where you might have to doimport * as React from 'react'instead ofimport React from 'react'. Almost always recommended to betrue.
4. Extending Configuration
The extends property allows you to create a base configuration and then specialize it for different environments (e.g., one for production builds, one for tests).
tsconfig.base.json
{
"compilerOptions": {
"target": "es2020",
"module": "commonjs",
"strict": true,
"esModuleInterop": true
}
}
tsconfig.json
{
"extends": "./tsconfig.base.json",
"include": ["src/**/*"],
"exclude": ["node_modules", "tests"]
}
Example: tsconfig.json for a Node.js Project
{
"compilerOptions": {
/* Type Checking */
"strict": true,
/* Modules */
"module": "commonjs",
"rootDir": "./src",
"moduleResolution": "node",
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
},
/* Emit */
"outDir": "./dist",
"target": "es2020",
"sourceMap": true,
"removeComments": true,
/* Interop */
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
/* Completeness */
"skipLibCheck": true
},
"include": ["src/**/*.ts"],
"exclude": ["node_modules"]
}