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(obj.property) {//obj.property 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 :)

Typescript — vintage version (credits to rawpixel.com, via Unsplash)

TL;DR/Reminder

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.

(source: http://www.typescriptlang.org/docs/handbook/advanced-types.html)

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 !

OVRSEA

The French digital feight-forwarder

Antoine Sauvage

Written by

OVRSEA

OVRSEA

The French digital feight-forwarder

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade