tsconfig Compiler Flags

Dialing the compiler's strictness.

TypeScript3 min readConcept 47 of 54

The Rulebook

The tsconfig.json file is the heart of a TypeScript project. It tells the compiler how strict to be and how to emit JavaScript.

The most important flag is "strict": true, which enables a suite of type-checking rules that make TypeScript actually useful.

The Billion Dollar Mistake

Without strict mode, TypeScript allows variables to be null or undefined implicitly. This means you might try to call .toUpperCase() on an undefined string, causing a runtime crash.

By enabling strictNullChecks (which is included in strict), the compiler forces you to handle the null case before accessing properties.

Syntax

json // tsconfig.json { "compilerOptions": { "target": "ES2022", "module": "ESNext", "strict": true, "exactOptionalPropertyTypes": true, "noImplicitAny": true } }

Try it

Toggle the strictNullChecks flag in the virtual tsconfig.json and watch how the compiler instantly reacts to unsafe code.

tsconfig.json
function printName(name: string | null) {
console.log(name.toUpperCase());
}

// Attempting to call with null
printName(null);
TypeScript Compiler
No errors! Looks good to me.
Runtime (Execution)
TypeError: Cannot read properties of null (reading 'toUpperCase')
This crash happens regardless of strict mode if null is passed!

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What happens if strictNullChecks is FALSE?

Remember this

  • Always turn on "strict": true for new projects.
  • strictNullChecks forces you to handle null/undefined cases.
  • noImplicitAny forces you to explicitly type arguments.
  • tsconfig.json defines the rules of engagement between you and the compiler.

Done with this concept?

Mark it complete to track your progress. No login needed.