tsconfig.json Deep Dive

// tsconfig.json
{
  "compilerOptions": {
    // Language / Type Checking
    "target": "ES2022",
    "lib": ["ES2022", "DOM"],
    "strict": true,                       // Enables all strict checks
    "noUncheckedIndexedAccess": true,     // index[key] is T | undefined
    "noImplicitReturns": true,            // All code paths must return
    "noImplicitOverride": true,           // Must use override keyword
    "exactOptionalPropertyTypes": true,   // ? vs | undefined distinction
    "noPropertyAccessFromIndexSignature": true,

    // Module
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,

    // Output
    "outDir": "./dist",
    "rootDir": "./src",
    "declaration": true,                  // Emit .d.ts files
    "declarationMap": true,               // Source maps for .d.ts
    "sourceMap": true,

    // Path aliases
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@utils/*": ["./src/utils/*"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

// Each of these is enabled by "strict": true

// 1. noImplicitAny  -  must annotate parameters
// function greet(name) {} // Error without annotation
function greet(name: string) { return `Hello ${name}`; }

// 2. strictNullChecks  -  null and undefined are not assignable to other types
let x: string;
// x = null; // Error

// 3. strictFunctionTypes  -  function parameters are checked contravariantly
type F = (value: string) => void;
// const f: F = (value: string | number) => {}; // Error (stricter parameter)

// 4. strictPropertyInitialization  -  class properties must be initialized
class Service {
  url: string; // Error without initializer or constructor assignment

  // Fix 1: initialize inline
  // url: string = '';

  // Fix 2: initialize in constructor
  constructor(url: string) {
    this.url = url;
  }
}

// 5. noImplicitThis  -  'this' in functions must be explicitly typed
function getLabel(this: { label: string }): string {
  return this.label; // OK  -  this is typed
}

const obj = { label: 'Hello', getLabel };
console.log(obj.getLabel()); // "Hello"

// tsconfig.json with path aliases
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*":            ["./src/*"],
      "@components/*":  ["./src/components/*"],
      "@hooks/*":       ["./src/hooks/*"],
      "@types/*":       ["./src/types/*"]
    }
  }
}

// Without aliases (relative hell):
// import { Button } from '../../../components/ui/Button';
// import { useAuth } from '../../hooks/useAuth';

// With aliases (clean and refactor-proof):
// import { Button } from '@components/ui/Button';
// import { useAuth } from '@hooks/useAuth';

// IMPORTANT: tsconfig paths are TypeScript-only
// Your bundler (Vite, webpack, Next.js) also needs to know about them:

// vite.config.ts
import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
});