TypeScript Configuration

⚙️ TypeScript Configuration

The tsconfig.json file controls TypeScript compiler behavior and project settings. It defines compilation options, file inclusion patterns, and type checking rules. Proper configuration ensures optimal development experience and code quality for your project.


# Create tsconfig.json
tsc --init

Key Configuration Options

🎯

Target

JavaScript version to compile to

"target": "ES2020"

📦

Module

Module system to use

"module": "commonjs"

📁

Output Directory

Where compiled files go

"outDir": "./dist"

🔒

Strict Mode

Enable all strict type checks

"strict": true

🔹 Basic tsconfig.json

A simple configuration to get started:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

🔹 Compiler Options Explained

🔸 Target and Module

{
  "compilerOptions": {
    // JavaScript version to compile to
    "target": "ES2020",  // ES5, ES6, ES2015, ES2020, ESNext
    
    // Module system
    "module": "commonjs",  // commonjs, es2015, esnext, amd
    
    // Module resolution strategy
    "moduleResolution": "node"
  }
}

🔸 File and Directory Options

{
  "compilerOptions": {
    // Output directory for compiled files
    "outDir": "./dist",
    
    // Root directory of source files
    "rootDir": "./src",
    
    // Generate source maps for debugging
    "sourceMap": true,
    
    // Remove comments in output
    "removeComments": true
  }
}

🔸 Type Checking Options

{
  "compilerOptions": {
    // Enable all strict type checking
    "strict": true,
    
    // No implicit any types
    "noImplicitAny": true,
    
    // Strict null checks
    "strictNullChecks": true,
    
    // Strict function types
    "strictFunctionTypes": true,
    
    // No unused locals
    "noUnusedLocals": true,
    
    // No unused parameters
    "noUnusedParameters": true
  }
}

🔹 Include and Exclude

Control which files TypeScript compiles:

{
  "compilerOptions": {
    // ... options
  },
  
  // Files to include
  "include": [
    "src/**/*",
    "types/**/*"
  ],
  
  // Files to exclude
  "exclude": [
    "node_modules",
    "dist",
    "**/*.spec.ts",
    "**/*.test.ts"
  ]
}

🔹 Advanced Configuration

🔸 Path Mapping

Create shortcuts for imports:

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"],
      "@models/*": ["src/models/*"]
    }
  }
}

🔸 Usage Example

// Instead of:
import { Button } from '../../../components/Button';

// You can write:
import { Button } from '@components/Button';

🔹 Library and Declaration Files

{
  "compilerOptions": {
    // Include type definitions
    "lib": ["ES2020", "DOM"],
    
    // Generate .d.ts declaration files
    "declaration": true,
    
    // Output directory for declarations
    "declarationDir": "./types",
    
    // Allow JavaScript files
    "allowJs": true,
    
    // Check JavaScript files
    "checkJs": false
  }
}

🔹 Project References

For large projects with multiple packages:

{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "declarationMap": true
  },
  "references": [
    { "path": "../shared" },
    { "path": "../utils" }
  ]
}

🔹 Common Configuration Presets

🔸 Node.js Project

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["ES2020"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true
  }
}

🔸 React Project

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true
  }
}

🔸 Library Project

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "esnext",
    "declaration": true,
    "declarationMap": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

🔹 Extending Configurations

Reuse configurations across projects:

🔸 base-config.json

{
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

🔸 tsconfig.json

{
  "extends": "./base-config.json",
  "compilerOptions": {
    "target": "ES2020",
    "outDir": "./dist"
  }
}

🔹 Watch Mode Configuration

{
  "compilerOptions": {
    // ... other options
  },
  "watchOptions": {
    "watchFile": "useFsEvents",
    "watchDirectory": "useFsEvents",
    "fallbackPolling": "dynamicPriority",
    "synchronousWatchDirectory": true,
    "excludeDirectories": ["**/node_modules", "dist"]
  }
}