I Smell Good!

2026-05-26

I smell good and I will tell you about it!

Written by: MackSix

smell

goofy

kitchen

Chapter 14: Configuring TypeScript – `tsconfig.json`

Your tsconfig.json controls how strict TS is and how it compiles. Here are the options that actually matter.

1. Recommended Base Config

Use this for most apps:

{
  "compilerOptions": {
    "skipLibCheck": true,
    "target": "es2022",
    "esModuleInterop": true,
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,
    "strict": true,
    "noUncheckedIndexedAccess": true,
    
    "module": "esnext",
    "moduleResolution": "bundler",
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": ["src"]
}

2. The Important Flags Explained

Flag	What it does	Why you want it
`strict: true`	Turns on all strict checks	Catches the most bugs. Always use.
`noUncheckedIndexedAccess: true`	`arr[0]` might be `undefined`	Forces you to handle missing array/object props
`skipLibCheck: true`	Don’t type-check `.d.ts` files	Faster compiles
`target: "es2022"`	What JS version to output	Use modern features, let your bundler handle old browsers
`module: "esnext"`	Use modern `import`/`export`	For Vite, Webpack, etc
`moduleResolution: "bundler"`	How imports resolve	Matches modern bundlers
`isolatedModules: true`	Each file must be safely compilable alone	Required for Babel, SWC, esbuild
`moduleDetection: "force"`	Treat all `.ts` files as modules	Avoids global scope bugs from Ch.13
`esModuleInterop: true`	Better CommonJS imports	Lets you `import React from "react"`
`allowJs: true`	Import `.js` files	For gradual TS migration
`resolveJsonModule: true`	`import data from "./data.json"`	Useful for configs

3. `strict` Mode = Bundle of Checks

strict: true turns on these all at once:

"noImplicitAny": true,              // Error if TS can’t infer type
"strictNullChecks": true,           // null/undefined only assignable to themselves
"strictFunctionTypes": true,        // Stricter function param checking
"strictBindCallApply": true,        // Types bind/call/apply properly
"strictPropertyInitialization": true, // Class props must be initialized
"noImplicitThis": true,             // Error on `this` with type `any`
"alwaysStrict": true                // Emit "use strict"

4. Common Project Structure

{
  "compilerOptions": {
    "outDir": "./dist",    // Compiled JS goes here
    "rootDir": "./src",    // Your TS source
    "baseUrl": ".",        // For path aliases
    "paths": {
      "@/*": ["src/*"]     // import { x } from "@/utils"
    }
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

Bottom line:

Start with strict: true + noUncheckedIndexedAccess: true – catches real bugs
moduleResolution: "bundler" + isolatedModules: true for modern tooling
moduleDetection: "force" prevents accidental globals
Most other options you can ignore unless you have a specific need

Copy the base config above and you’re good for 95% of projects.