TypeScript is a pretty slick language, especially when you dig into some of its more advanced features like type guards. If you want your code to be less error-prone and easier to read, type guards are a fantastic tool to have in your toolkit. While this might sound all high-tech, it’s easier to get the hang of than it seems.

Type guards help you narrow down the types of variables as you go, making sure you’re not working with unexpected data types. This is super handy when you’re dealing with unions, where a variable could be a string, number, object, or anything else.

So, what exactly are type guards? Simply put, they’re functions or expressions that check the type of a variable at runtime within a certain scope. Throw them in a conditional block and voilà, TypeScript can infer a more specific type based on what you checked.

One way to dip your toes into type guards is by using the typeof operator. This is one of the easiest and most common ways to do it. Here’s a quick example to show how it works:

function greet(name: string | number) {
    if (typeof name === 'string') {
        console.log(`Hello, ${name.toUpperCase()}`);
    } else {
        console.log(`Hello, ${name}`);
    }
}

greet('John'); // Output: "Hello, JOHN!"
greet(42); // Output: "Hello, 42!"

In this snippet, typeof helps TypeScript figure out that name is a string or number depending on the condition inside the if statement. It’s kind of like saying, “Hey TypeScript, if this variable’s data type matches what I’m checking, go ahead and assume it is that type.”

But typeof isn’t the only game in town. You’ve also got instanceof, which checks if an object belongs to a specific class or constructor function. This is great for scenarios where you have, say, cars and trucks and need to treat them differently.

Check this out:

class Car {
    make: string;
    model: string;
    constructor(make: string, model: string) {
        this.make = make;
        this.model = model;
    }
}

class Truck {
    make: string;
    model: string;
    constructor(make: string, model: string) {
        this.make = make;
        this.model = model;
    }
}

function describeVehicle(vehicle: Car | Truck) {
    if (vehicle instanceof Car) {
        console.log(`This is a car made by ${vehicle.make}, model: ${vehicle.model}`);
    } else {
        console.log(`This is a truck made by ${vehicle.make, model: ${vehicle.model}`);
    }
}

describeVehicle(new Car('Toyota', 'Corolla')); // Output: "This is a car made by Toyota, model: Corolla"
describeVehicle(new Truck('Ford', 'F-150')); // Output: "This is a truck made by Ford, model: F-150"

With instanceof, you narrow down the type of the object in a very specific manner, which is super useful if you’ve designed your code around classes.

Now, the real fun starts with custom type guards. These are user-defined functions, allowing you more flexibility than built-in type guards. They make your life easier by covering cases that built-ins can’t handle.

For example, consider this:

interface Necklace {
    kind: string;
    brand: string;
}

interface Bracelet {
    brand: string;
    year: number;
}

type Accessory = Necklace | Bracelet;

const isNecklace = (accessory: Accessory): accessory is Necklace => {
    return (accessory as Necklace).kind !== undefined;
};

const necklace: Accessory = { kind: "Choker", brand: "TASAKI" };
const bracelet: Accessory = { brand: "Cartier", year: 2021 };

console.log(isNecklace(bracelet)); // Output: false
console.log(isNecklace(necklace)); // Output: true

In this scenario, isNecklace is a custom type guard that helps you differentiate whether an accessory is a Necklace or not by checking the kind property. It’s a neat way to precisely control type narrowing.

Next up, we have something called equality narrowing. This happens when you compare a variable with an imprecise type to another variable with a precise type. If the comparison checks out, TypeScript refines the type of the imprecise variable.

Take a look:

function getValues(a: number | string, b: string) {
    if (a === b) {
        console.log(typeof a); // Output: string
    } else {
        console.log(typeof a); // Output: number or string
    }
}

getValues(10, '10'); // Output: number or string
getValues('10', '10'); // Output: string

Here, when a is compared to b and they match, TypeScript deduces that a must be a string since b is a string.

Type guards really shine when you use them inside conditional statements. They ensure that TypeScript understands what you’re working with, improving type safety and making your code easier to manage.

Here’s how that might look:

function getSmallPet(): Fish | Bird {
    // Assume this function returns either a Fish or a Bird
}

interface Fish {
    swim(): void;
}

interface Bird {
    fly(): void;
}

function isFish(pet: Fish | Bird): pet is Fish {
    return (pet as Fish).swim !== undefined;
}

let pet = getSmallPet();
if (isFish(pet)) {
    pet.swim(); // TypeScript knows pet is a Fish
} else {
    pet.fly(); // TypeScript knows pet is a Bird
}

In this case, isFish works as a type guard to determine whether the pet is a Fish or a Bird, making follow-up operations on the pet much safer.

You can also use type guards to filter arrays by ensuring that the resulting array contains only elements of a specific type:

const zoo: (Fish | Bird)[] = [getSmallPet(), getSmallPet(), getSmallPet()];
const underWater: Fish[] = zoo.filter(isFish);

Here, isFish does a great job in filtering the zoo array, leaving you with only the Fish elements in underWater.

TypeScript type guards are no doubt a powerful tool in making code safer and less error-prone. By leveraging built-in type guards like typeof and instanceof, or creating custom ones, you can precisely control the types of your variables. This lets you handle union types, conditional logic, and even array filtering with ease. So, if you’re looking to make your TypeScript code more robust and readable, getting cozy with type guards might just be your new best friend.