Introduction to the typeof Type Guard in TypeScript

Alfred M. Adjei

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 if block 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 else block.

number methods

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}`)
 }
}

🐊 Alligator.io recommends

Our recommended TypeScript courses

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 string, number, boolean, symbol types. For more complex types, typeof may not be the right operator. And remember that typeof doesn’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.

That’s it. 😎👌

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#