How to Fix TypeScript Strict Null Check Errors with Examples

If you've recently started using TypeScript or enabled the strict mode, you might have come across errors related to strict null checks. These errors can seem confusing at first, but they are there to help you write safer, more predictable code. This tutorial will guide you step-by-step through what strict null checks mean, why they appear, and how to fix them with clear examples. Along the way, we'll touch on important concepts like optional chaining, type assertions, and type narrowing.

Strict null checks in TypeScript prevent variables with types like string or number from being assigned null or undefined unless explicitly allowed. When strict null checks are enabled, TypeScript forces you to handle cases where a value could be null or undefined, helping avoid runtime errors like 'cannot read property of null'. This is why you might see errors when accessing properties or calling functions on variables that TypeScript suspects could be null or undefined. Understanding and fixing these errors requires using type annotations and control flow techniques to assure TypeScript about the value's safety.

let username: string | null = null;

// Error: Object is possibly 'null'.
console.log(username.length);

// Fix 1: Check for null before using
if (username !== null) {
  console.log(username.length); // safe access
}

// Fix 2: Use optional chaining
console.log(username?.length);

// Fix 3: Use non-null assertion (only if sure it's not null)
console.log(username!.length);

To fix strict null check errors, you need to convince the TypeScript compiler that your variable is not null or undefined when you use it. Common strategies include adding explicit checks (like checking if a variable !== null), using optional chaining (like ?. to safely access properties), or using non-null assertions (the ! operator) when you are sure the value is not null. You can also annotate your variable types to allow null explicitly if needed. These techniques tie closely with type narrowing and type guards, which you can use to let TypeScript refine the type based on runtime checks.

A frequent mistake is ignoring strict null check errors by disabling strict mode or by overusing non-null assertions blindly. This can lead to runtime issues and defeats the purpose of strict typing. Another common error is assuming that a variable cannot be null without proper checks, especially when dealing with API data, DOM elements, or asynchronous values. To avoid these, always handle null or undefined explicitly and use utility features like optional chaining or type guards to make your code clearer and safer.

In summary, TypeScript strict null check errors are a helpful feature to catch potentially unsafe null or undefined values in your code. By using type annotations, conditional checks, optional chaining, and type narrowing techniques, you can fix these errors effectively. This practice helps reduce bugs and improves code quality. Getting comfortable with strict null checks will also strengthen your understanding of other TypeScript features like union types, type guards, and type assertions, which are essential for writing robust applications.