Validating types – type guards – TypeScript Patterns for Angular

Now that we know the TypeScript inference mechanism, we can understand another feature present in it, type guards. Let’s consider these in the following example:
function getDiscount(value: string | number) {
  if (typeof value === “number”) {
    return value;
  } else {
    return parseInt(value);
  }
}

In this function, we can receive a value that can be of the primitive types string or number.

As they are primitive types, we can use the typeof function to define whether the variable is numeric; otherwise, it is a string and we must convert it to numeric.

The TypeScript transpiler can interpret the context of this conditional and within each one, it treats the value as a number or string, including in VS Code’s autocomplete.

Figure 3.3 – Inside the conditional TypeScript, which recognizes the variable as a number

The VS Code plugin in the figure is running the transpiler in the background and identifies that the variable inside the if statement can only be a number.

Figure 3.4 – Inside the conditional else TypeScript, which recognizes the variable as a string

As they are primitive types, we can use the typeof function to define whether the variable is numeric; otherwise, it is a string, and we must convert it to numeric.

For more complex data types such as objects, this guard using the typeof function is not possible because it will always recognize the variable of the object type. However, we can create our own custom type guard functions:
interface Person {
  socialSecurityNumber: number;
  name: string;
}
interface Company {
  corporateNumber: number;
  name: string;
}
type Client = Person | Company;
function isPerson(client: Client): client is Person {
  return (client as Person).socialSecurityNumber !== undefined;
}
function getID(client: Client) {
  if (isPerson(client)) {
    return client.socialSecurityNumber;
  } else {
    return client.corporateNumber;
  }
}

Here we have two interfaces, Person and Company, and we create a type called Client. For each type of object that follows the interfaces, we have an id type socialSecurityNumber for people and corporateNumber for companies.

To carry out the guard type, we created the isPerson function. The difference regarding this function is that we put the client is Person expression in the definition of the return of the function.

In it, we define the rule to consider an object as a person and use it in the getID function. Not only do we have a function that checks the object at runtime, but in this way, the TypeScript transpiler checks at compile time whether the operation has reported an error.