Understanding `keyof typeof` in TypeScript

By the end of this page, you will understand that typeof in TypeScript can refer to the type of a value, not JavaScript's runtime string result, and keyof extracts the property names from that type. Together, keyof typeof SomeValue turns an object-like value such as an enum or object literal into a union of its keys, like "white" | "black".

In TypeScript, typeof and keyof are both type operators, but they do different jobs.

• typeof value gets the TypeScript type of a value
• keyof SomeType gets a union of the property names of a type

The important point is that this is not the same as JavaScript runtime behavior.

typeof in JavaScript vs TypeScript

In JavaScript:

typeof ColorsEnum // "object"

That returns a runtime string.

In TypeScript type positions:

type T = typeof ColorsEnum;

This does not produce the string "object". Instead, it produces the type shape of the ColorsEnum value.

For this enum:

enum ColorsEnum {
  white = ,
  black = ,
}

Think of it like this:

• A value is a real object sitting on a table
• typeof is you looking at that object and writing down its shape
• keyof is then reading that written shape and listing its labels

For example, imagine a toolbox:

const tools = {
  hammer: 1,
  screwdriver: 2,
};

• typeof tools says: “This thing has drawers named hammer and screwdriver.”
• keyof typeof tools says: “Give me the drawer names only.”

Result:

"hammer" | "screwdriver"

So with keyof typeof, you are not asking JavaScript what kind of thing something is at runtime. You are asking TypeScript to inspect a value's structure and turn its property names into a type.

Core syntax

type Keys = keyof typeof someValue;

This works when someValue is a value known to TypeScript, such as:

• an enum
• an object literal
• an imported constant object

Example with an enum

enum ColorsEnum {
  white = '#ffffff',
  black = '#000000',
}

type Colors = keyof typeof ColorsEnum;
// "white" | "black"

Explanation:

1. typeof ColorsEnum gets the type of the enum object
2. keyof extracts its keys
3. The final result is a union of enum member names

Example with an object

const config = {
  host: 'localhost',
  port: 3000,
  secure: true,
};

type  = keyof  config;

Consider this example:

enum ColorsEnum {
  white = '#ffffff',
  black = '#000000',
}

type EnumType = typeof ColorsEnum;
type ColorKeys = keyof EnumType;

Now walk through it.

Step 1: Define the enum

enum ColorsEnum {
  white = '#ffffff',
  black = '#000000',
}

At runtime, this creates an object-like value with properties:

• white
• black

Step 2: Apply typeof

type EnumType = typeof ColorsEnum;

TypeScript reads the value ColorsEnum and gets its type.

You can think of EnumType as roughly:

keyof typeof is common whenever you want to keep values and types in sync.

1. Enum key validation

enum Status {
  pending = 'PENDING',
  done = 'DONE',
}

type StatusKey = keyof typeof Status;

Useful when you want accepted strings to exactly match enum member names.

2. Configuration keys

const settings = {
  theme: 'dark',
  language: 'en',
  notifications: true,
};

type SettingKey = keyof typeof settings;

This helps when writing functions that receive a valid config key.

3. Form field names

const fields = {
  email: '',
  password: '',
  confirmPassword: '',
};

type FieldName = keyof typeof fields;

In real projects, developers often use keyof typeof to avoid repeating string unions manually.

Common pattern: derive types from constants

Instead of this:

type Theme = 'light' | 'dark';

const themes = {
  light: '#fff',
  dark: '#000',
};

developers often write:

const themes = {
  light: '#fff',
  dark: '#000',
};

type Theme = keyof typeof themes;

Now the keys and the type stay synchronized.

Guard clauses with known keys

const messages = {
  success: 'Saved',
  error: 'Failed',
};

type MessageKey = keyof typeof messages;

function getMessage(key: ) {
   messages[key];
}

Mistake 1: Confusing TypeScript typeof with JavaScript typeof

Broken expectation:

type T = typeof ColorsEnum;
// expecting "object"

Why it is wrong:

• In JavaScript expressions, typeof value returns a string like "object"
• In TypeScript type positions, typeof value returns the value's type

How to avoid it:

• Ask yourself whether you are in a runtime expression or a type annotation/type alias

Mistake 2: Using keyof directly on a value name

Broken code:

const user = {
  name: 'Ada',
  age: 30,
};

type UserKeys = keyof user;

Why it fails:

• keyof works on a type, not directly on a value

Related operators and patterns

keyof typeof vs manual union

Quick reference

Get keys from an enum or object

type Keys = keyof typeof someValue;

Example with enum

enum ColorsEnum {
  white = '#ffffff',
  black = '#000000',
}

type ColorKeys = keyof typeof ColorsEnum;
// "white" | "black"

Example with object

const config = {
  host: 'localhost',
  port: 3000,
};

type ConfigKeys = keyof typeof config;
// "host" | "port"

Get values instead of keys

type Values = (typeof someValue)[keyof typeof someValue];

Important rules

• keyof works on

What does keyof typeof mean in TypeScript?

It means: first get the type of a value using typeof, then get that type's property names using keyof.

Why does typeof not return "object" here?

Because in a type context, TypeScript's typeof is a type operator, not JavaScript's runtime operator. It returns the value's type shape, not a runtime string.

Does keyof typeof work only with enums?

No. It also works with object literals, imported constant objects, and other named values that TypeScript can inspect.

Does keyof typeof ColorsEnum give enum keys or enum values?

It gives the enum keys, such as "white" | "black", not the values like "#ffffff" | "#000000".

How do I get the values instead of the keys?

Use indexed access:

type ColorValues = (typeof ColorsEnum)[keyof typeof ColorsEnum];

• typeof in TypeScript — it gets the type of a value in type positions.
• keyof — it extracts property names from a type.
• indexed access types — useful for getting value types from keys.
• enums in TypeScript — enums are a common source for keyof typeof.
• as const — helps preserve exact literal values in objects.
• string literal unions — keyof typeof often produces these.
• mapped types — they often build on keyof.
• Record — often used together with key unions derived from keyof typeof.