How the typeof Operator works in TypeScript

How the typeof Operator works in TypeScript

Written by Johnny on Jul 2nd, 2022 ・ Views ・ Report Post

Johnny Visit User Profile
Table of contents

In Javascript, we already have a vanilla typeof operator which can be used to find the type of anything:

let x = "hello world";
console.log(typeof x); // Returns "string"

With TypeScript being a strongly typed language, typeof takes on a slightly different meaning. Although for all the basic Javascript types typeof functionality remains the same, it also gets some additional, useful features. Let's look at how typeof works in TypeScript.

How typeof works in TypeScript

The most basic application of typeof in TypeScript is the creation of new basic types. If we are defining our own custom types in TypeScript, we can use typeof to copy the type of an existing item. A simple example where we take a number, and create a custom type off the back of it looks like this:

let x = 1234;

// Custom type aNumber
type aNumber = typeof x;

This can be useful if variable types may vary, and we want to match a specific variable. It can also be useful when creating custom types that have many properties where the properties should match existing variable types:

let x = 1234;
let y = "string";

// Custom type aNumber
type myType = {
    name: typeof y,
    age: typeof x,
}

As you can see, typeof basically gives us a way to differentiate between the value and type of an existing object. It can also be combined with ReturnType quite intuitively, to get the returned value of a function, to ensure type consistency when expecting values from functions:

function myFunction(x: string, y: string) {
    return { 
        firstName: x,
        lastName: y
    }
}
type nameType = ReturnType<typeof myFunction>;

I have covered ReturnType in more detail in this article, so check that out if you want to learn more. Similarly, you can learn more about TypeScript here.

Comments (0)