Introduction to the typeof Type Guard in TypeScript

550
SHARES
2.5k
VIEWS

In certain cases we’d like to act differently on a passed-in argument depending on it’s type. This is where the typeof guard comes into play.

Say we have an employeeInfo function that accepts either a number or a string using a union type. Depending on the type of argument, we console.log an output:

function employeeInfo(info: string | number) {
 if(typeof info === "string") {
   console.log(`Employee is in the ${info} department`)
 } else { 
  console.log(`Employee has badge number ${info}`)
 }
}

By using typeof info === "string", TypeScript is aware that, info in the ifblock can only be a string therefore provides us with only string methods through IntelliSense, as can be seen from the screenshot below:

string methods screenshot

Likewise, only number methods are provided for the number type in the elseblock.

Let’s call toUpperCase() on info when it is a string type.

Our function will now look like this:

function employeeInfo(info: string | number) {
 if(typeof info === "string") {
   console.log(`Employee is in the ${info.toUpperCase()} department`)
 } else { 
  console.log(`Employee has badge number ${info}`)
 }
}

Now let’s test our function:

employeeInfo("marketing"); // Employee is in the MARKETING department
employeeInfo(444); // Employee has badge number 444

typeof works with only stringnumberbooleansymbol types. For more complex types, typeof may not be the right operator. And remember that typeofdoesn’t just act as a type guard in TypeScript, as it’s also a built-in JavaScript operator, so it can also be used with vanilla JavaScript, just without the added IntelliSense.

Muhammad Mubeen

Muhammad Mubeen

Mubeen is a full-stack web & mobile app developer who is very proficient in MEAN.js, Vue, Python, Ionic 4, Flutter, Firebase, ROR, and PHP. He has created multiple mobile and web applications. He is very passionate about sharing his knowledge.

Leave a Reply

Your email address will not be published. Required fields are marked *