Typescript : Type guards simply explained.

Ricardo Paul — Sat, 11 Sep 2021 18:46:45 +0000

Today we're exploring a functionality in Typescript called type guards, if the name sounds strange to you,know however this is a technique that you probably have used in plain Javascript if you've been coding in that language for a while.

Type guards is a technique used in Typescript to get information about the type of a variable (to know what the type is) and this often happens within a conditional block like if/else. To achieve this, typescript makes use of some built-in javascript operators like typeof, instance of, the in operator which is used to determine if an object contains a property.

So this is enough theory already, let's go through some examples.
Oh just before, type guards mostly come to use when we're dealing with a function whose parameter has a union type as type annotation.
If you're not familiar with Union Types, you can take it literally as a union of types, e.g:
Type UnionOfTypes = string | number

Let's go through a failing code example to see where Type guards come in.

type StringOrNumber = string | number //our union type

function processAmount(amount: StringOrNumber){
    return amount + 10 //error
}

In the snippet above, our function processAmount() takes an argument amount which can be either a string or a number.
In the function body, we just assume that amount is a number and try to add 10 to it. The compiler gets confused, it cannot add 10 (number) to
amount (string | number) and thus signals us that there's an error:
Operator '+' cannot be applied to types 'StringOrNumber' and 'number'

Ok, so what are we doing wrong? Well, we are not narrowing the type of the argument amount. We need a way to tell the compiler that it should treat
our variable as a number and let us perform our operation. That's where type guards come in.

type StringOrNumber = string | number

function processAmount(amount: StringOrNumber){
    if(typeof amount === "number"){
        return amount + 10
    }
    return amount
}

This time, by using the typeof operator within a conditional block, we tell the typescript compiler to treat amount as a number within the scope and now our code can compile without errors.

That is Type guards in a nutshell, remember that there are other operators used to perform Type guards and narrowing in Typescript like instanceof and in. I'll cover these in a future blog post.

What problem does Typescript solve ?

Ricardo Paul — Sat, 04 Sep 2021 20:59:55 +0000

If you're thinking about learning Typescript but not sure about the values it brings to the table, or you're already learning it and need to understand better its purpose, here I try to give a brief overview about what Typescript is.

When we are writing javascript, or other dynamically typed languages, we have to keep information about the type of a variable in our head and hope that we use the value properly. Let's see a quick example.

Consider how many operations we can run on a message variable:

//we can try to get message length: 
message.length

//we may attempt to call message with an argument:
message("Hello World")

But wait, what is message exactly? What is the Type of the message variable? Is it a string? an array or a function? How do we even know message takes an argument and the argument is a string?

Well, in javascript, if we have doubts about the type - maybe we fail to remember it, maybe we are working with a codebase we're not quite familiar with yet - we basically rely on the Javascript runtime to throw a TypeError which will suggest to us that we were wrong about the type of the variable.

So you can imagine if message was declared as:

const message = “Typescript is fun”

the first line of code would work, but the second would throw a TypeError telling us message is not a function.

This is because javascript is a dynamically typed language, it checks the type of message at runtime (while the program is running) and thus cannot tell you if there's a problem with your code before you run it.

Now if you're working with a small codebase you may think that's not a problem not having everything typed, but things get messy pretty quickly with little bugs here and there as your codebase starts to become larger. It would be great if we could solve that problem. That's where typescript comes in.

static type checking
Typescript is a static type checker for javascript, it is called static because it runs before your code runs and it is a type checker because it tells you
ahead of time if there's something wrong with your code as it relates to how you attempt to use different types.
Coming back to our example earlier, when we tried to call message with an argument.

const message = “Typescript is fun”
message("Hello") //(Error) This expression is not callable.

Typescript would show a red squiggly line under message and would tell us
This expression is not callable. Type 'String' has no call signatures.
So we can infer from this message that our variable is not a function but a string, attempting to call it will break our program.

At a high level this is what Typescript does, it adds a type system to javascript to help us developers catch bugs in our program early on, in the example above we relied on Typescript Type Inference ability so we didn't have to explicitly tell typescript that message is a string, we'll learn more about explicit types in a later post and how typescript deals with them.

DEV Community: Ricardo Paul

Typescript : Type guards simply explained.

What problem does Typescript solve ?