How to fix 'noUncheckedIndexedAccess' requires 'strictNullChecks' in TypeScript

The simplest fix is to enable strictNullChecks in your tsconfig.json file. This is required for noUncheckedIndexedAccess to work properly:

{
  "compilerOptions": {
    "strictNullChecks": true,
    "noUncheckedIndexedAccess": true
  }
}

If you're using the strict flag (which includes strictNullChecks), make sure it's enabled:

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true
  }
}

After making this change, restart your TypeScript server in your IDE:
- VS Code: Press Cmd/Ctrl + Shift + P, then type "TypeScript: Restart TS Server"
- Other IDEs: Restart the IDE or rebuild the project

Test the fix by running:

npx tsc --noEmit

If you cannot enable strictNullChecks (e.g., legacy codebase compatibility), disable noUncheckedIndexedAccess:

{
  "compilerOptions": {
    "strictNullChecks": false,
    "noUncheckedIndexedAccess": false
  }
}

Or remove the noUncheckedIndexedAccess option entirely (defaults to false):

{
  "compilerOptions": {
    "strictNullChecks": false
    // noUncheckedIndexedAccess is not specified (defaults to false)
  }
}

Note: Disabling noUncheckedIndexedAccess means TypeScript won't add undefined to indexed property accesses, which could hide potential runtime errors. Consider whether your project can migrate to strictNullChecks: true instead.

If you're using strict: true, you cannot disable strictNullChecks individually. The strict flag bundles multiple strictness options including strictNullChecks.

TypeScript projects can have multiple tsconfig.json files (e.g., base config extended by others). Check all relevant files:

1. Look for extends:

{
  "extends": "./tsconfig.base.json"
}

2. Check the base file for strictNullChecks and noUncheckedIndexedAccess settings.

3. Look for tsconfig.json in parent directories - TypeScript searches up the directory tree.

4. **Check for tsconfig.*.json files** (e.g., tsconfig.build.json, tsconfig.test.json).

Example of resolving conflicts:

// tsconfig.base.json
{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true
  }
}

// tsconfig.json (extends base)
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    // No need to repeat - inherits from base
  }
}

If a child config overrides parent settings, ensure consistency:

// WRONG - child disables strictNullChecks while parent enables noUncheckedIndexedAccess
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "strictNullChecks": false  // Conflict!
  }
}

The noUncheckedIndexedAccess option was introduced in TypeScript 4.1. Ensure you're using a compatible version:

# Check TypeScript version
npx tsc --version

# Update TypeScript if needed
npm install typescript@latest --save-dev
# or for a specific version
npm install [email protected] --save-dev

Version requirements:
- TypeScript 4.1+: noUncheckedIndexedAccess option available
- TypeScript 4.0+: strictNullChecks fully stable
- Older versions: Consider upgrading for better type safety

If you're using an older TypeScript version that doesn't support noUncheckedIndexedAccess, you'll get a different error. Update your package.json:

{
  "devDependencies": {
    "typescript": "^5.0.0"
  }
}

After updating, delete node_modules and reinstall:

rm -rf node_modules
npm install

Some build tools and frameworks have their own TypeScript configuration that might conflict:

Create React App (CRA):
CRA hides tsconfig.json. Eject or use [email protected]+ which includes TypeScript 4.x support.

Next.js:
Next.js has its own TypeScript configuration. Check next.config.js and ensure compatibility:

// next.config.js
module.exports = {
  typescript: {
    // Next.js ignores tsconfig.json errors by default in dev
    ignoreBuildErrors: false, // Set to true only for temporary workarounds
  }
}

Angular:
Angular uses tsconfig.json but may have additional constraints in angular.json:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "tsConfig": "tsconfig.app.json"
          }
        }
      }
    }
  }
}

Vite / Rollup / Webpack:
These tools use tsconfig.json directly. Ensure your build script references the correct config:

# Example build command
npx tsc -p tsconfig.build.json

If using a monorepo (TurboRepo, Nx, Lerna), check each package's tsconfig.json for consistency.

If you enable strictNullChecks, you may need to fix type errors in your code:

Common fixes for strictNullChecks errors:

1. Add null checks for potentially undefined values:

// Before: Error with strictNullChecks
const value = obj["key"]; // string | undefined
console.log(value.length); // Error: Object is possibly 'undefined'

// After: Add null check
const value = obj["key"];
if (value !== undefined) {
  console.log(value.length); // OK
}

2. Use optional chaining (?.):

const length = obj["key"]?.length; // number | undefined

3. Provide default values:

const value = obj["key"] ?? "default"; // string

4. Use type assertions when you're sure:

const value = obj["key"] as string; // Only if you're certain

5. Update function signatures:

// Before
function getName(id: string): string {
  return data[id]; // Might return undefined
}

// After
function getName(id: string): string | undefined {
  return data[id]; // Explicit return type
}

Run TypeScript in strict mode to find all issues:

npx tsc --strict --noEmit

Consider incremental migration by enabling strictNullChecks in specific files first using // @ts-strict comments.