Checking the type of an object in Typescript: the type guards

Antoine Sauvage
Nov 22, 2018 · 2 min read

Coming from a JS background, checking the type of an object in Typescript is kind of obscure at first. We are used to if( {// exists here !} and this is not possible in Typescript…

In some cases, you can use type guards. You guessed, this is what this article is about :)

Image for post
Image for post
Typescript — vintage version (credits to, via Unsplash)

Type your function with is :

function typeGuard(toBeDetermined: any): toBeDetermined is Animal {} 

or the fat arrow version:

const tg = (tbd: any): tbd is Animal => {//return true if Animal}

Type checking

Our problem is classic in Typescript: an object type is undifferentiated, and we would like to differentiate the different cases. In the example below, we have two interfaces, Animal and Person:

Animal or Person ? Both have a name property…

If we want to print the name, it’s easy.

But if we want to print “cat”, “”dog” or “human”, it becomes more complicated… Below, both functions don’t work:

… but type is only in Animal

The first one because type is not defined, the second one because instanceof works with classes. And in our case, both Person and Animal are interfaces, and there is no way instanceof will work at runtime.

Solution: A type guard

Typescript allows us to create our own function, that it will understand, and will narrow the type in the following code (in terms of scope, of course)

A type guard is some expression that performs a runtime check that guarantees the type in some scope.


A wonderful object: a typeguard

The key here is the type of this function: toBeDetermined is Animal . Typescript understands that if we return true, the argument is an Animal. We can now use this variable:

It works ! Magic, right ?

Warning: a type guard can introduce errors

A type guard has to be correct, otherwise it can introduce errors. Consider the following gist:

The type guard is definitively wrong, and yet, Typescript is OK. But at runtime, undefined appear. And you see the too classic cannot read property 'alpha' of undefined coming…

Going further

If you want to learn more about typeguards, the official documentation can be a good starting point, although, as of today, it uses the good old Typescript 2.0’s typecast <>

If you want to write secure type guards, for example validating objects fetched from an API, you can check:

Now you know how to narrow a type of an object :). Hope it helped !


The French digital feight-forwarder

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store