In the sprawling universe of TypeScript, getting a grip on the different empty value types—null, undefined, and void—is super important. They’re like those tricky puzzles that catch even seasoned developers off guard, especially if you’re coming from JavaScript. Just when you think you’ve got a handle on things, one tiny detail can spin your code into a different direction. Let’s dive in and unravel these types with a sprinkle of creativity and a touch of simplicity.

So, let’s get right into the basics of these misunderstood types.

Null and undefined are singleton types that denote different flavors of ‘nothingness’. Imagine null as an empty seat where a guest was definitely invited but decided not to show up. It’s intentional. Like when you’re expecting your favorite dish at a restaurant but they say they’re out of ingredients and serve a placeholder instead—a plate with a note saying “Sorry, maybe next time.” You get the drift.

For instance, take a function that’s supposed to divide one number by another. When the division can’t happen (like trying to divide by zero), instead of giving a result, it hands over an error message and a null for the result. Here’s how that could play out in code:

function divide(a: number, b: number) {
  if (b === 0) {
    return {
      error: 'Division by zero',
      result: null
    };
  } else {
    return {
      error: null,
      result: a / b
    };
  }
}

Now, stepping into the undefined territory is like walking into a room you thought was full of your friends, only to find it’s empty—but only because no one actually sent out the invites. That’s undefined—something that’s not initialized, just automatically set by TypeScript. It’s sort of like forgetting to water a plant you never planted.

Here’s a slice of life example where undefined might crop up:

let ratio: number | undefined;
if (ratio === undefined) {
  console.log('Someone forgot to assign a value.');
} else if (ratio === null) {
  console.log('Someone chose not to assign a value.');
}

Now, enter the hero feature of TypeScript—strictNullChecks. This little tool shakes things up by making sure that null and undefined can’t just sneak into any type willy-nilly. When you switch strictNullChecks on, you’ve effectively posted a no-entry sign, demanding these ninjas be explicitly mentioned if invited.

Without the checks, TypeScript would let the bizarrely invalid let x: number = null; slide. But flip the switch, and boom, you get a polite, albeit firm, “No can do.” Now, to make that work, you’d have to spell it out like this:

let x: number | null;
x = null;

Let’s talk void. This one’s a different beast. Think of it as sending a letter with a return address but telling the recipient to ignore any responses. It signals that a function might return something, but whatever it is, nobody’s going to use it. Like getting a thank you note for something you didn’t do—appreciated but not required.

Consider a situation where a function reads a file and then asks a helper to do something with the title. The helper does its thing, but doesn’t need to return anything relevant:

const readFileTitle = (src: string, callback: (title: string) => void) => {
  // Implementation details
};

The irony here is if you do return something, TypeScript doesn’t create a fuss because void is pretty much telling the world that any reply is unimportant.

Let’s navigate through some scenarios to see how these play out in real life. Picture a function that’s off fetching user data from a database. If the user decides to play hide-and-seek (read: isn’t found), you return null. This way it’s clear that the absence of data was meant to be:

function getUserData(userId: number): { name: string; email: string } | null {
  const user = database.getUser(userId);
  if (!user) {
    return null;
  }
  return user;
}

const userData = getUserData(123);
if (userData === null) {
  console.log('User not found');
} else {
  console.log(userData.name, userData.email);
}

Flip to another setting where a variable proudly stands undefined, highlighting it never received a value assignment. Maybe the programmer got distracted, who knows?

let userName: string | undefined;
if (userName === undefined) {
  console.log('User name has not been initialized');
} else {
  console.log(userName);
}

With void, imagine a file reading function not caring about returns:

function readFile(src: string, callback: (title: string) => void) {
  // Read file and call callback with title
  callback('File Title');
}

readFile('path/to/file', (title) => {
  console.log(title);
  // No need to return anything here
});

To wrap it all up, mastering the fine lines between null, undefined, and void can turn code from fragile to robust, like a plant thriving under the right care and attention. By being intentional and enabling strict checks, there’s less room for bugs to nestle in. It’s about writing TypeScript that’s clear, sustainable, and as error-free as humanly possible. It might seem like taming an unruly beast at first, but once you get the hang of it, it’s like cruising through code with windows down, music up, and everything in its place.

---