TypeScript typeof operator

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.

Understanding typeof in TypeScript

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.

Basic usage of typeof

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

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 with different data structures

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

TypeScript typeof array

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

let numberArray = [1, 2, 3]

type ArrayType = typeof numberArray // 'number[]'

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

TypeScript typeof object

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.

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.

Advanced use cases of typeof

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

Using keyof typeof

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.

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:

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.