null and undefined
📚 null and undefined in TypeScript TypeScript distinguishes between null (explicitly no value) and undefined (value was never set). With strict mode enabled, TypeScript warns you whenever you try to use a value that might be null or undefined without checking first. Two modern operators help handl…
Appy Says…
Null pointer exceptions are the most common runtime error in programming. TypeScript's strict null checks make them compile-time errors instead — catching the bug before your code runs.
How does TypeScript handle null and undefined?
With strictNullChecks: true (enabled by default in modern TypeScript), null and undefined are not assignable to other types unless explicitly included.
- •Without strict:
let name: string = null;— allowed (dangerous!) - •With strict:
let name: string = null;→ compile error - •Include null:
let name: string | null = null; - •
undefined: variable declared but not assigned - •
null: variable explicitly has no value - •Optional chaining:
user?.profile?.avatar— short-circuits on null/undefined - •Nullish coalescing:
user.name ?? 'Anonymous'— fallback when null OR undefined
Think of it like checking if a Minecraft slot is empty before using it
Before using an item in a Minecraft slot, you check if it's empty — otherwise the action fails. TypeScript strict null checks force you to make that check explicit in code. You can't use a nullable value without handling the empty case first.
How It Works
- •1. Enable strict mode in tsconfig:
"strict": true(includes strictNullChecks) - •2.
const user: User | null = getUser(); - •3.
user.name→ error: Object is possibly 'null' - •4. Fix with check:
if (user !== null) { user.name } - •5. Optional chain:
user?.name— returns string | undefined - •6. Non-null assertion:
user!.name— tells TS 'I guarantee this isn't null'
Real-World Examples
- •DOM query:
document.getElementById('app')returnsHTMLElement | null - •Array find:
arr.find(x => x.id === id)returnsT | undefined - •Optional config:
function init(config?: Config)— config is Config | undefined - •API response:
{ user: User | null }— user not found returns null
Key Facts
- •The billion dollar mistake: Tony Hoare (inventor of null) called null 'my billion-dollar mistake' due to the errors it causes
- •strictNullChecks is one of the most impactful TypeScript settings for catching real bugs
- •
undefinedmeans 'not assigned';nullmeans 'intentionally empty' — use consistently - •Optional chaining (?.) is a JavaScript feature since ES2020, not TypeScript-only
Watch Out!
The non-null assertion operator ! tells TypeScript to ignore null/undefined — but if you're wrong at runtime, you get an error TypeScript can't catch. Use it sparingly and only when you're certain. Prefer optional chaining or explicit null checks.
Remember
Strict null checks: null and undefined are separate types. Handle them with optional chaining ?., nullish coalescing ??, or explicit checks. Avoid ! unless you're certain.
What You Learned
- •TypeScript strict null checks: null/undefined are distinct types; must be explicitly handled
- •Optional chaining (?.) and nullish coalescing (??) are your main tools
- •Unlocks: eliminating null reference errors at compile time; safer DOM, API, and array operations
Key Facts
- →The billion dollar mistake: Tony Hoare (inventor of null) called null 'my billion-dollar mistake' due to the errors it causes
- →strictNullChecks is one of the most impactful TypeScript settings for catching real bugs
- →
undefinedmeans 'not assigned';nullmeans 'intentionally empty' — use consistently - →Optional chaining (?.) is a JavaScript feature since ES2020, not TypeScript-only
Real-World Examples
Remember
Strict null checks: null and undefined are separate types. Handle them with optional chaining ?., nullish coalescing ??, or explicit checks. Avoid ! unless you're certain.
Quick Quiz
?? returns right side when?