DEV Community

Cover image for How the typeof Operator works in TypeScript
Johnny Simpson
Johnny Simpson

Posted on • Originally published at fjolt.com

How the typeof Operator works in TypeScript

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"
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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,
}
Enter fullscreen mode Exit fullscreen mode

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>;
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)