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:
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 string, number, boolean, symbol 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.
