Advanced Patterns

`typeof (Type Operator)`

The typeof type operator extracts the TypeScript type from a value-level variable or expression, bridging the value and type worlds.

Definition

TypeScript

const config = { host: "localhost", port: 3000 };
type Config = typeof config;
// { host: string; port: number }

Examples

Extracting Object Type

const defaults = {
  theme: "dark",
  language: "en",
  fontSize: 14,
  showSidebar: true,
} as const;

type Settings = typeof defaults;
// { readonly theme: "dark"; readonly language: "en"; ... }

function applySettings(settings: Partial<typeof defaults>) {
  return { ...defaults, ...settings };
}

Function Type Extraction

function createStore<T>(initial: T) {
  let state = initial;
  return {
    getState: () => state,
    setState: (next: T) => { state = next; },
  };
}

const store = createStore({ count: 0, name: "app" });
type Store = typeof store;
// { getState: () => { count: number; name: string }; setState: (next: ...) => void }

Enum-like Object Pattern

const STATUS = {
  Active: "ACTIVE",
  Inactive: "INACTIVE",
  Pending: "PENDING",
} as const;

type StatusValues = (typeof STATUS)[keyof typeof STATUS];
// "ACTIVE" | "INACTIVE" | "PENDING"

function setStatus(status: StatusValues) {
  console.log("Setting status to", status);
}

setStatus(STATUS.Active); // OK
// setStatus("UNKNOWN"); // Error

Common Use Cases

1Deriving types from constant objects and configurations
2Extracting types from function implementations
3Creating union types from object values (with as const)
4Typing variables based on existing values
5Bridging value-level and type-level worlds

Understanding typeof (Type Operator)

The typeof type operator in TypeScript extracts the type of a value-level expression. Unlike JavaScript's runtime typeof which returns strings like "string" or "object", TypeScript's typeof operates at the type level during compilation and produces full structural types.

This operator bridges TypeScript's two worlds: values and types. While you can always go from types to values (by declaring a variable with a type annotation), going from values to types requires typeof. This direction is especially important when you define data first and want to derive types from it.

The most common pattern is typeof with constant objects. When you define a configuration object with as const, typeof captures the full literal type including exact string values, readonly modifiers, and precise tuple types. This lets you define your "single source of truth" as a value and derive all related types from it.

typeof is essential for the "enum-like object" pattern. Instead of using TypeScript enums, many projects define plain objects with as const and extract value unions using (typeof OBJ)[keyof typeof OBJ]. This pattern is more flexible than enums, tree-shakeable, and produces real JavaScript values.

typeof also works with functions and classes. typeof myFunction gives you the function's full type signature, which you can then use with Parameters and ReturnType to extract argument and return types. typeof MyClass gives you the constructor type (not the instance type), which is needed for ConstructorParameters and InstanceType.

One limitation: typeof can only be used with identifiers and qualified names (like obj.prop), not arbitrary expressions. You cannot write typeof (a + b)—only typeof someVariable.

Related Types

keyof T

The keyof type operator produces a union of all known public property keys of a type, enabling type-safe property access patterns.

as const assertion

The as const assertion marks a value as deeply readonly with the most specific literal types possible, preventing type widening.

satisfies operator

The satisfies operator validates that a value matches a type without widening the value's inferred type, preserving literal types and specific structure.

ReturnType<T>

Extracts the return type of a function type T, enabling you to reuse a function's output type without manual duplication.

More Advanced Patterns

NoInfer<T>Mapped Types keyof T infer keyword satisfies operator as const assertion Branded Types

Explore TypeScript Types

Browse our complete reference of 30 TypeScript utility types with definitions, examples, and explanations.

Mapping Types Conditional Types String Types Object & Function Types Advanced Patterns