Optimize tsconfig for Modern Projects

Beginner8 minTrending

Configure tsconfig.json with the best compiler options for modern TypeScript projects targeting Node.js, React, or library development.

Prerequisites

-TypeScript 5.0+ installed

Steps

Generate a starting tsconfig

Use tsc --init to create a tsconfig.json with all options documented.

$ npx tsc --init

Apply modern recommended settings

Set the target, module, and resolution options for a modern Node.js or Next.js project.

$ cat > tsconfig.json << 'EOF' { "compilerOptions": { "target": "ES2022", "lib": ["ES2022", "DOM", "DOM.Iterable"], "module": "ESNext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "strict": true, "noUncheckedIndexedAccess": true, "noEmit": true, "jsx": "react-jsx", "incremental": true, "skipLibCheck": true, "paths": { "@/*": ["./src/*"] } }, "include": ["src", "next-env.d.ts"], "exclude": ["node_modules", "dist"] } EOF

Use moduleResolution: 'bundler' for projects bundled with Vite, Webpack, or Next.js. Use 'nodenext' for pure Node.js projects.

Enable stricter optional checks

Add extra type safety options that go beyond strict: true.

$ echo 'Add these to compilerOptions for maximum safety:' && echo ' "noUncheckedIndexedAccess": true' && echo ' "exactOptionalPropertyTypes": true' && echo ' "noPropertyAccessFromIndexSignature": true'

Verify the configuration

Run the compiler to check for any configuration issues.

$ npx tsc --noEmit --pretty

Full Script

full-script.sh

#!/bin/bash
# TypeScript Config Optimization
set -euo pipefail

echo "=== TypeScript Version ==="
npx tsc --version

echo ""
echo "=== Recommended tsconfig.json ==="
cat << 'EOF'
{
  "compilerOptions": {
    // Language & Environment
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx",

    // Modules
    "module": "ESNext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,

    // Strictness
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,

    // Output
    "noEmit": true,
    "incremental": true,

    // Interop
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,

    // Paths
    "baseUrl": ".",
    "paths": { "@/*": ["./src/*"] }
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}
EOF

echo ""
echo "=== Verifying config ==="
npx tsc --noEmit

FAQ

Discussion

Loading comments...

#!/bin/bash # TypeScript Config Optimization set -euo pipefail echo "=== TypeScript Version ===" npx tsc --version echo "" echo "=== Recommended tsconfig.json ===" cat << 'EOF' { "compilerOptions": { // Language & Environment "target": "ES2022", "lib": ["ES2022", "DOM", "DOM.Iterable"], "jsx": "react-jsx", // Modules "module": "ESNext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, // Strictness "strict": true, "noUncheckedIndexedAccess": true, "noImplicitOverride": true, // Output "noEmit": true, "incremental": true, // Interop "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, // Paths "baseUrl": ".", "paths": { "@/*": ["./src/*"] } }, "include": ["src"], "exclude": ["node_modules", "dist"] } EOF echo "" echo "=== Verifying config ===" npx tsc --noEmit