Tag: custom type guards

If you enjoyed this story and find it helpful, feel free to like or share it with others who might benefit!

---

I’m a superhero with a unique ability: I can see through disguises. In the world of TypeScript, everything is an object, and sometimes these objects wear masks, pretending to be something they’re not. My mission is to unmask them and reveal their true identities. This is where my power, which I call a “custom type guard,” comes into play.

In this world, we have different creatures, like “Cats” and “Dogs,” each with distinct traits. A Cat might have a “meow” method, while a Dog might have a “bark” method. However, in this world, some creatures are sneaky and like to pretend they’re something they’re not. I need to ensure that if I’m talking to a Cat, it’s truly a Cat.

So, how do I use my superpower? Picture me holding a special magnifying glass that can reveal the truth. When a creature approaches me, I hold up my magnifying glass and look for specific traits. If I see a “meow” method, I proclaim, “Aha! This is indeed a Cat!” This process is my custom type guard in action.

To create one of these magnifying glasses, or custom type guards, I define a function. Let’s say I call it isCat. This function takes a creature as an argument and checks for the presence of the “meow” method. If it’s there, my magnifying glass glows, confirming the creature is a Cat. I can then confidently interact with it, knowing it won’t suddenly start barking like a Dog.

In this way, my custom type guards help me navigate this world with certainty, ensuring that I’m always aware of the true nature of the creatures I encounter. It’s a bit like being a detective with a supernatural tool, always ready to uncover the truth behind the mask.

---

Continuing from where I left off, my magnifying glass is actually a TypeScript function that acts as a custom type guard. Here’s how I craft it in code to ensure I’m dealing with a Cat and not a mysterious imposter:

interface Cat {
  meow: () => void;
}

interface Dog {
  bark: () => void;
}

// Here's my magnifying glass, or custom type guard function
function isCat(creature: any): creature is Cat {
  return (creature as Cat).meow !== undefined;
}

// Now, let's see it in action with some creatures
const unknownCreature1 = { meow: () => console.log("Meow!") };
const unknownCreature2 = { bark: () => console.log("Woof!") };

if (isCat(unknownCreature1)) {
  unknownCreature1.meow(); // Confidently call meow because I know it's a Cat
} else {
  console.log("This is not a Cat.");
}

if (isCat(unknownCreature2)) {
  unknownCreature2.meow(); // This won't run because it's not a Cat
} else {
  console.log("This is not a Cat.");
}

In this code, I create a function isCat that checks if the meow method is present, which is my way of exposing the true identity of the creature. This function returns a boolean, but it also informs TypeScript that if the function returns true, the type of the argument can safely be treated as a Cat.

Key Takeaways:

1. Custom Type Guards: They are functions that help TypeScript infer more specific types based on runtime checks. They use the syntax creature is Cat to refine types.
2. Type Safety: By using custom type guards, we can safely access properties or methods specific to a type without risking runtime errors.
3. Flexibility: Custom type guards provide flexibility in handling objects whose types may not be immediately apparent, especially in dynamic or loosely typed data scenarios.
4. Efficiency: They allow us to write code that’s both efficient and expressive, leveraging TypeScript’s type system to manage complex data interactions.