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:

Likewise, only number
methods are provided for the number
type in the else
block.
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 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.