tsconfig, Strict Mode & Modules

tsconfig, Strict Mode & Modules

A properly configured tsconfig.json is the foundation of a safe TypeScript codebase.

Next.js tsconfig.json

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [{ "name": "next" }],
    "paths": { "@/*": ["./src/*"] }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

strict Mode

// strictNullChecks — null is separate
function getUser(id: string): User | null { return null }
const user = getUser('u1')
// user.name     // Error: user is possibly null
user?.name        // OK — optional chaining

// noImplicitAny — parameters must have types
// function process(data) { }  // Error: data has implicit any
function process(data: unknown) { }  // OK

Path Aliases

// Without alias — brittle relative imports
import { Button } from '../../../components/ui/Button'

// With "@/*": ["./src/*"]
import { Button } from '@/components/ui/Button'
import { COURSES } from '@/lib/courses'
import { cn } from '@/lib/utils'

Type Check Commands

# Check types without building
npx tsc --noEmit

# Watch mode
npx tsc --noEmit --watch

Empty output = no errors. Use in CI to gate deployments.