TypeScript typeof operator

Kenny DuMez
Kenny DuMez
Graphite software engineer

In TypeScript, typeof is a powerful operator that can be used to grab the type of a variable, allowing developers to work with type information dynamically. This guide will explore the usage of typeof in TypeScript, demonstrating how it can be used with various data structures such as arrays and objects, and explaining advanced concepts like keyof typeof.

The typeof operator in TypeScript is similar to JavaScript's typeof, but with some unique features tailored for TypeScript's static type system. It is used to determine the type of a variable at compile time. This can be particularly useful for ensuring type safety in functions and when manipulating data structures.

Here’s a simple example demonstrating the use of typeof:

Terminal
let myNumber = 42
let myString = '42'
type NumberType = typeof myNumber // 'number'
type StringType = typeof myString // 'string'

In this example, typeof is used to fetch the type of the variables myNumber and myString, which are then used to define types NumberType and StringType, respectively.

typeof can be applied to more complex data structures, such as arrays and objects, to extract their types.

When used with an array, typeof will return the type of the elements inside the array along with an array indicator ([]).

Terminal
let numberArray = [1, 2, 3]
type ArrayType = typeof numberArray // 'number[]'

This indicates that numberArray is an array of numbers, and so ArrayType is number[].

typeof is also extremely useful when working with objects, especially when you need to create a type that conforms to an existing object's shape.

Terminal
let person = {
name: 'Alice',
age: 25
}
type PersonType = typeof person // { name: string; age: number; }

Here, PersonType is created using typeof person, resulting in a type definition that ensures any instance of PersonType will have a name of type string and an age of type number. This approach simplifies the process of ensuring type consistency across variables that are intended to hold similar data structures, reducing the risk of errors and enhancing code maintainability.

TypeScript allows the combination of typeof with other type operators like keyof to create more complex and powerful type definitions.

The combination of keyof and typeof provides a method to extract keys as literal types from an object, which can then be used to ensure accessed properties are type-safe.

Terminal
const config = {
width: 800,
height: 600,
title: 'My App'
}
type ConfigKeys = keyof typeof config // 'width' | 'height' | 'title'

In this example, ConfigKeys is a union type of the keys of config, thus it can only ever be 'width', 'height', or 'title'.

Practical application:

Combining typeof with keyof typeof can be particularly useful in scenarios such as function parameter validation:

Terminal
function getConfigValue(key: ConfigKeys): number | string {
return config[key]
}

This function is type-safe, meaning it can only accept arguments that are actual keys of config, and TypeScript will enforce this at compile time.

For further reading on the typeof operator, see the official TypeScript documentation.

Graphite
Git stacked on GitHub

Stacked pull requests are easier to read, easier to write, and easier to manage.
Teams that stack ship better software, faster.

Or install our CLI.
Product Screenshot 1
Product Screenshot 2