Understanding TypeScript's Strict Null Checks: A Beginner's Guide

When working with TypeScript, you might encounter errors related to "null" or "undefined" values. These errors often happen because JavaScript allows variables to be null or undefined by default, which can lead to unexpected problems during runtime. To help prevent these issues, TypeScript includes a feature called "strict null checks." In this guide, we will explain what strict null checks are, why they matter, and how to work with them.

By default, TypeScript allows a variable declared as a type like `string` to also be null or undefined. This can cause confusion and bugs, as you might try to use the variable without checking if it's actually holding a value. Enabling strict null checks changes this behavior. It forces you to explicitly handle the cases where a variable might be null or undefined.

Let's see an example without strict null checks enabled:

let name: string = null;  // No error by default

console.log(name.toUpperCase());  // Runtime error: Cannot read property 'toUpperCase' of null

If strict null checks are enabled in your `tsconfig.json` (`"strictNullChecks": true`), the above code will produce a compile-time error, helping you catch potential problems early.

With strict null checks, if you want a variable to hold either a string or null, you must specify it explicitly using a union type:

let name: string | null = null;

if (name !== null) {
  // TypeScript now knows 'name' is not null here
  console.log(name.toUpperCase());
} else {
  console.log('Name is null');
}

This ensures you check for null (or undefined) before using the variable, preventing unexpected runtime errors.

Similarly, you might want to allow undefined values, which is common in optional function parameters:

function greet(name?: string) {
  if (name !== undefined) {
    console.log(`Hello, ${name.toUpperCase()}!`);
  } else {
    console.log('Hello, guest!');
  }
}

greet('Alice');  // Output: Hello, ALICE!
greet();        // Output: Hello, guest!

In summary, enabling strict null checks helps you write safer code by forcing you to consider cases where values could be null or undefined. You can enable it by setting the following in your `tsconfig.json` file:

{
  "compilerOptions": {
    "strictNullChecks": true
  }
}

Strict null checks are part of the broader `strict` mode in TypeScript, which is recommended for most projects to catch potential errors early and improve code quality.