How do I make Typescript understand a type guard on a property?

Are you tired of Typescript throwing errors at you because it doesn’t understand that type guard on your property? Well, you’re not alone! In this article, we’ll dive into the world of type guards and show you how to make Typescript understand them. So, buckle up and let’s get started!

What is a Type Guard?

A type guard is a function that checks if a value satisfies a certain condition, and if it does, it narrows the type of that value. In other words, it helps Typescript understand that a value is of a certain type, even if it’s not initially clear. Type guards are incredibly useful when working with complex data structures or APIs that return dynamic data.

An Example of a Type Guard

function isString(value: T): value is string {
  return typeof value === 'string';
}

In this example, the `isString` function takes in a value of type `T` and returns a boolean indicating whether the value is a string or not. The magic happens in the return type, where we use the `value is string` syntax to tell Typescript that if the function returns `true`, the value is definitely a string.

The Problem: Typescript Doesn’t Understand the Type Guard

Now, let’s say you have a property on an object, and you want to use a type guard to narrow the type of that property. Sounds simple, right? Well, it’s not. Typescript can be quite stubborn sometimes, and it might not understand the type guard even when you’re certain it should.

interface MyObject {
  prop: string | number;
}

const myObject: MyObject = {
  prop: 'hello',
};

function isStringProp(obj: MyObject): obj is { prop: string } {
  return typeof obj.prop === 'string';
}

if (isStringProp(myObject)) {
  // Typescript still thinks myObject.prop is string | number
  console.log(myObject.prop.toUpperCase()); // Error: Property 'toUpperCase' does not exist on type 'string | number'.
}

In this example, we’ve defined an interface `MyObject` with a property `prop` that can be either a string or a number. We’ve created an object `myObject` that satisfies this interface, and we’ve written a type guard `isStringProp` that checks if the `prop` property is a string. So far, so good. However, even when we use the type guard, Typescript still thinks `myObject.prop` is `string | number`. Why?

The Solution: Using the `as` Assertion

The key to making Typescript understand the type guard is to use the `as` assertion. The `as` assertion tells Typescript that we know more about the type of a value than it does, and we want to assert that it’s of a certain type.

if (isStringProp(myObject)) {
  const myObjectWithStringProp = myObject as { prop: string };
  console.log(myObjectWithStringProp.prop.toUpperCase()); // Okay!
}

By using the `as` assertion, we’re telling Typescript that we know `myObject` has a `prop` property that’s definitely a string. This allows us to narrow the type of `myObject` to `{ prop: string }`, and voilà! We can now access the `toUpperCase` method without any errors.

A More Advanced Example: Type Guards on Nested Properties

What if you have a deeply nested object, and you want to use a type guard on a property deep within that object?

interface NestedObject {
  nested: {
    prop: string | number;
  };
}

const nestedObject: NestedObject = {
  nested: {
    prop: 'hello',
  },
};

function isStringProp(obj: NestedObject): obj is { nested: { prop: string } } {
  return typeof obj.nested.prop === 'string';
}

if (isStringProp(nestedObject)) {
  const nestedObjectWithStringProp = nestedObject as { nested: { prop: string } };
  console.log(nestedObjectWithStringProp.nested.prop.toUpperCase()); // Okay!
}

In this example, we’ve defined an interface `NestedObject` with a nested property `nested` that has a property `prop` that can be either a string or a number. We’ve created an object `nestedObject` that satisfies this interface, and we’ve written a type guard `isStringProp` that checks if the `prop` property is a string. Using the `as` assertion, we can narrow the type of `nestedObject` to `{ nested: { prop: string } }`, and access the `toUpperCase` method without any errors.

Type Guards on Arrays

Type guards aren’t limited to objects and properties. You can also use them on arrays!

interface StringOrNumberArray {
  [index: number]: string | number;
}

const arrayOfStringsOrNumbers: StringOrNumberArray = ['hello', 42, 'world'];

function isStringArray(arr: StringOrNumberArray): arr is string[] {
  return arr.every((item) => typeof item === 'string');
}

if (isStringArray(arrayOfStringsOrNumbers)) {
  const stringArray = arrayOfStringsOrNumbers as string[];
  console.log(stringArray.map((item) => item.toUpperCase())); // Okay!
}

In this example, we’ve defined an interface `StringOrNumberArray` that represents an array of strings or numbers. We’ve created an array `arrayOfStringsOrNumbers` that satisfies this interface, and we’ve written a type guard `isStringArray` that checks if every element in the array is a string. Using the `as` assertion, we can narrow the type of `arrayOfStringsOrNumbers` to `string[]`, and use array methods like `map` without any errors.

Conclusion

Type guards are an incredibly powerful tool in Typescript, and they can be used to narrow the type of a value in a variety of situations. By using the `as` assertion, you can make Typescript understand type guards on properties, nested properties, and even arrays. Remember to always keep your type guards simple and clear, and don’t be afraid to use them to make your code more expressive and maintainable. Happy coding!

Scenario	Solution
Type guard on a property	Use the `as` assertion: `const myObjectWithStringProp = myObject as { prop: string };`
Type guard on a nested property	Use the `as` assertion: `const nestedObjectWithStringProp = nestedObject as { nested: { prop: string } };`
Type guard on an array	Use the `as` assertion: `const stringArray = arrayOfStringsOrNumbers as string[];`

The next time you’re struggling to make Typescript understand a type guard, remember to keep it simple, use the `as` assertion, and don’t be afraid to get creative!

Frequently Asked Question

TypeScript type guards on properties can be a bit finicky, but don’t worry, we’ve got you covered! Here are the top 5 questions and answers to help you make TypeScript understand a type guard on a property.