Checking for `null` and `undefined` in TypeScript: Techniques and Features

Introduction

In TypeScript, a statically typed superset of JavaScript, handling null and undefined values is crucial to avoid runtime errors. Despite its strong typing, TypeScript inherits some quirks from JavaScript concerning these special values. This tutorial explores how you can effectively check for null and undefined in TypeScript using various techniques.

Understanding null and undefined

Before diving into checks, it’s important to understand what null and undefined represent:

• null: An intentional absence of any object value. It indicates that a variable is deliberately set to have no value.
• undefined: Indicates that a variable has been declared but has not yet been assigned a value.

Checking for Both null and undefined

Loose Equality Check

You can use the loose equality operator (==) to check if a variable is either null or undefined. This works because both null and undefined are loosely equal:

let a: number;
let b: number = null;

function check(x, name) {
    if (x == null) {
        console.log(`${name} is either null or undefined`);
    }
}

check(a); // Output: "a is either null or undefined"
check(b); // Output: "b is either null or undefined"

Strict Equality Check

If you want to distinguish between null and undefined, use the strict equality operator (===):

if (x === null) {
    console.log(`${name} is explicitly set to null`);
}

if (typeof x === 'undefined') {
    console.log(`${name} is undefined`);
}

Using TypeScript 3.7 Features

TypeScript 3.7 introduced two powerful features for handling null and undefined: Optional Chaining and Nullish Coalescing.

Optional Chaining (?.)

This feature allows you to safely access deeply nested properties without explicitly checking each level for existence:

let x = foo?.bar.baz();

In the above example, if foo or foo.bar is null or undefined, the expression short-circuits and returns undefined.

Nullish Coalescing (??)

This operator provides a default value when dealing with null or undefined:

let x = foo ?? bar();

Here, if foo is null or undefined, x will be assigned the result of bar().

Best Practices

1. Use Loose Equality for Simplicity: When you need to check both null and undefined without distinction, use == null.

2. Prefer Strict Checks When Necessary: If you need specific handling for either null or undefined, use strict equality checks.

3. Leverage Optional Chaining and Nullish Coalescing: These features can simplify your code by reducing the need for verbose conditional logic.

4. Understand JavaScript Quirks: Remember that TypeScript extends JavaScript, so many of its rules apply here as well.

Conclusion

Handling null and undefined in TypeScript is straightforward with the right techniques. By using loose equality checks, strict checks, optional chaining, and nullish coalescing, you can write robust code that gracefully handles these special values. Embrace these features to enhance your TypeScript programming skills.