TypeScript Configuration
Introduction
The tsconfig.json
file is the heart of every TypeScript project.
It tells the TypeScript compiler how to process your code, which files to include, and which features to enable or disable.
A well-configured tsconfig.json
ensures a smooth developer experience and reliable builds.
Key Concepts & Explanations
- compilerOptions: Controls how TypeScript compiles your code (e.g., target, module, strictness).
- include: Files or folders to include in the compilation.
- exclude: Files or folders to exclude.
- files: Explicit list of files to include (rarely used with
include
). - extends: Inherit options from another config file.
- references: Enable project references for monorepos or multi-package setups.
Step-by-Step Examples
Minimal tsconfig.json
{
"compilerOptions": {
"target": "es6",
"module": "commonjs"
},
"include": ["src/**/*"]
}
Advanced tsconfig.json
{
"compilerOptions": {
"target": "es2020",
"module": "esnext",
"strict": true,
"baseUrl": ".",
"paths": {
"@app/*": ["src/app/*"]
},
"outDir": "dist",
"esModuleInterop": true
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
To generate a tsconfig.json
file, run:
tsc --init
Real-World Scenarios
- Monorepo: Use
references
andextends
to share settings across packages. - Library: Set
declaration
andoutDir
for type definitions. - App: Use
strict
andesModuleInterop
for best compatibility.
Common Pitfalls & Troubleshooting
- Misconfigured
include
/exclude
can cause files to be missed or included unexpectedly. - Paths not resolving? Check
baseUrl
andpaths
settings. - Type errors after changing
strict
? Review your code for type safety.
Best Practices
- Always enable
strict
for safer code. - Use
extends
to avoid duplicating config in monorepos or multiple projects. - Do not commit build output folders (like
dist
) to version control.