TypeScript — typeof Type Operator: Explained with Examples

Introduction – Understanding typeof in TypeScript

In TypeScript, the typeof operator is more than just a runtime tool — it can also be used in type positions to infer or reference the type of a value. This enables strong typing based on existing variables or constants, ensuring type safety without code duplication.

In this guide, you’ll learn:

• What the typeof operator does in a type context
• Difference between JavaScript typeof and TypeScript typeof
• Use cases with variables, functions, arrays, and type aliases
• How typeof works with keyof and indexed types

What Is typeof in TypeScript?

In JavaScript, typeof is used at runtime to check the type of a value.

console.log(typeof "hello"); // "string"

In TypeScript, typeof is also used at compile time to get the type of a variable, constant, or function — not just its runtime type.

let user = { name: "Alice", age: 30 };
type User = typeof user;
// Equivalent to: { name: string; age: number }

Basic Syntax of typeof Type Operator

type NewType = typeof someVariable;

This copies the type definition from the variable into the type NewType.

Examples: typeof in Action

Example 1: Typing Based on Variable

const point = { x: 10, y: 20 };
type Point = typeof point;
// Point is now: { x: number; y: number }

Example 2: Use with Functions

function greet(name: string) {
  return `Hello, ${name}`;
}

type GreetFn = typeof greet;
// GreetFn is (name: string) => string

Example 3: typeof with Arrays

const roles = ["admin", "user", "guest"] as const;
type Role = typeof roles[number];
// Role = "admin" | "user" | "guest"

typeof + keyof: Dynamic Type Utilities

const settings = {
  theme: "dark",
  notifications: true,
};

type Settings = typeof settings;
type SettingsKeys = keyof typeof settings;
// "theme" | "notifications"

This combo allows powerful manipulation of types at scale.

Practical Use Cases

Common Mistakes

Using typeof on a type instead of a value

type Person = { name: string };
//  Error: Cannot use 'typeof' with a type
type T = typeof Person;

Instead:

const person = { name: "Alice" };
type T = typeof person;

typeof with Modules or Imported Data

import config from "./config.json";

type ConfigType = typeof config;

This ensures your type stays synchronized with dynamic data.

Summary – Recap & Next Steps

The typeof operator in TypeScript allows you to extract types from values and functions, promoting DRY (Don’t Repeat Yourself) principles and maintainability.

Key Takeaways:

• Use typeof to derive a type from a runtime value
• Combine with keyof, in, ReturnType, Parameters for advanced utilities
• Enables safer, scalable typing for functions, objects, arrays, and constants

Real-world relevance:
Perfect for large projects needing robust type consistency, especially in libraries and shared modules.

FAQs

What’s the difference between JS and TS typeof?

JavaScript’s typeof runs at runtime and returns strings. TypeScript’s typeof in type positions refers to the type of a value at compile time.

Can I use typeof on a function?

Yes, you can extract the function signature:

function add(a: number, b: number): number {
  return a + b;
}

type AddType = typeof add; // (a: number, b: number) => number

How do I combine typeof with literal types?

Use as const:

const roles = ["admin", "editor"] as const;
type Role = typeof roles[number]; // "admin" | "editor"