Dark/Light Mode
  • About Us
  • Write for us
  • Privacy Policy
  • Contact Us
Codemeals
  • Angular
  • Javascript
  • React
  • Node
  • Flutter
  • Our Apps
No Result
View All Result
Codemeals
No Result
View All Result
Home Angular

Introduction to the typeof Type Guard in TypeScript

Muhammad Mubeen by Muhammad Mubeen
November 4, 2019
in Angular, Javascript, Node, react, TypeScript
2 min read
395 4
549
SHARES
2.5k
VIEWS
Share on FacebookShare on Twitter

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 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.

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)
Share220Tweet137Share55
Muhammad Mubeen

Muhammad Mubeen

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

Leave a Reply Cancel reply

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

Trending

Learn Git – Complete Git Tutorial for Beginners
Git

Learn Git – Complete Git Tutorial for Beginners

2 days ago
59
Getting Started With Vue.js
Javascript

Cool Vue.js Libraries List

1 week ago
2.5k
Getting Started With Vue.js
Javascript

Getting Started With Vue.js

2 weeks ago
120
Generating App Icons in Flutter
Flutter

Generating App Icons in Flutter

3 weeks ago
54
Integrate Firebase with React & Redux | Building a TODO List
Firebase

Integrate Firebase with React & Redux | Building a TODO List

3 weeks ago
108

Codemeals

codemeals is born out of a love for the web platform and Open Source software. The goal is to try and make it easy and quick to understand things that are otherwise daunting to untrained eyes.

Follow Us

Recent Posts

Learn Git – Complete Git Tutorial for Beginners

Learn Git – Complete Git Tutorial for Beginners

December 5, 2019
Getting Started With Vue.js

Cool Vue.js Libraries List

December 2, 2019

Categories

  • Angular
  • Firebase
  • Flutter
  • Git
  • Graphql
  • HTML
  • Ionic
  • iOS Development
  • Javascript
  • Meteor
  • Node
  • Python
  • react
  • Ruby
  • TypeScript
  • Vue
  • Webpack
  • About Us
  • Write for us
  • Privacy Policy
  • Contact Us

© 2019 Codemeals.com, All Rights Reserved.

No Result
View All Result
  • Home
  • Angular
  • Javascript
  • react
  • Node
  • Python
  • Ruby
  • Ionic
  • Flutter
  • Our Apps

© 2019 Codemeals.com, All Rights Reserved.

Login to your account below

Forgotten Password?

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In