Mastering TypeScript's Strict Null Checks for Robust Error Handling

When writing JavaScript code, null and undefined values can often cause unexpected runtime errors. TypeScript addresses this problem by introducing strict null checks, which help catch potential issues during development before your code runs. In this article, we'll explore how to enable and master strict null checks to improve your error handling and write safer TypeScript code.

Strict null checks are controlled by a compiler option called `strictNullChecks`. When enabled, TypeScript treats `null` and `undefined` as distinct types, meaning you must explicitly handle these cases or risk compile-time errors.

To enable strict null checks, add or update the `tsconfig.json` file in your project with the following configuration:

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

Now let's see a simple example demonstrating the difference with and without strict null checks.

function greet(name: string) {
  console.log("Hello, " + name.toUpperCase());
}

greet(null); // Runtime error: Cannot read property 'toUpperCase' of null

With `strictNullChecks` enabled, TypeScript will not allow `null` to be passed as an argument to `greet()` because `name` is typed as `string` only. To properly handle nullable values, you can update the function parameter type:

function greet(name: string | null) {
  if (name) {
    console.log("Hello, " + name.toUpperCase());
  } else {
    console.log("Hello, guest!");
  }
}

greet(null); // Output: Hello, guest!

Here, the union type `string | null` instructs TypeScript that `name` can be either a string or null. The conditional check `if (name)` ensures that `name` is not null before calling `toUpperCase()`, preventing runtime errors.

You can also use the non-null assertion operator (`!`) if you are certain a value is not null or undefined, but be careful as this bypasses the safety check:

function greet(name: string | null) {
  console.log("Hello, " + name!.toUpperCase()); // Will throw if name is null
}

In summary, strict null checks help you write more robust TypeScript code by making you explicitly handle potentially null or undefined values, reducing the chance of unexpected runtime errors.

By enabling `strictNullChecks` and adjusting your code to accommodate nullability, you ensure safer and cleaner error handling that benefits your entire codebase.