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.