keyof & typeof

Types made from names and from values

JavaScript can already tell you two things about an object while the page runs: what kind of value a property holds, and which property names the object has (the Checking types and Object.keys, values, entries lessons cover these):

const cart = { items: ["Tea"], total: 3 };
console.log(typeof cart.total);
console.log(Object.keys(cart));

Line 1 makes a cart with a list of items and a total. Line 2 prints number, the kind of value in cart.total. Line 3 prints the cart's property names, [ 'items', 'total' ].

TypeScript lets you ask the same two questions while you write the code, and get types as answers:

• typeof in a type gives the type of a value: "whatever type cart has".
• keyof gives the property names of a type, as a union of texts, "this name or that one" (the Union types lesson covers |).

1const cart = { items: ["Tea"], total: 3 };2 3type Cart = typeof cart;4//   ^?5type CartKey = keyof Cart;6//   ^?7const key: CartKey = "total";8console.log(key, cart[key]);

Line 1 is the same cart. Line 3 makes a type called Cart from the value: typeof cart. The query on line 4 shows what TypeScript worked out: items is a string[] and total is a number. You never wrote that type; it came from the value.

Line 5 makes CartKey from that type with keyof Cart, and the query on line 6 shows "items" | "total": one of the two names. Line 7 uses it for a variable, and line 8 reads cart[key] and prints total 3.

keyof: a type's property names

You used keyof in the Generic constraints lesson, inside K extends keyof T. It works on its own too. Put keyof before an object type, and you get the names of its properties. Here is a settings page's type:

1type Settings = { theme: string; fontSize: number; showTips: boolean };2 3type SettingName = keyof Settings;4//   ^?5let field: SettingName = "fontSize";6field = "theme";7console.log(field);

Line 1 describes three settings. Line 3 makes SettingName with keyof Settings. The query on line 4 shows type SettingName = keyof Settings: when a type has a name, TypeScript keeps writing the short form. It means "theme" | "fontSize" | "showTips", one of those three names, as text. Line 5 and line 6 store two of them, and line 7 prints theme.

Any other text is an error, on purpose here:

1type Settings = { theme: string; fontSize: number; showTips: boolean };2 3let field: keyof Settings = "fontSize";4field = "colour";

Line 4 stores "colour". TypeScript says Type '"colour"' is not assignable to type 'keyof Settings', which means "colour is not one of the names in Settings". The names are exact, so "fontsize" with a small s is an error too, and TypeScript adds Did you mean '"fontSize"'?

keyof works on any object type, not only ones with plain names. Press the buttons to change the type after keyof, and watch the answer on line 2:

1type Keys = keyof { id: number; name: string };2//   ^?

A few of these are worth remembering. A property marked ? or readonly still has a name. A type that accepts any text as a key (an index signature, which the Index signatures lesson covers) gives string | number. An empty type gives never, the type with no values. And a union of two object types gives only the names both have:

The table below collects what keyof gives. Read each row as: the kind of type, an example, and the names you get.

typeof: the type of a value

Often the value comes first: a cart object, a coupon code, the shop's name. In a type, typeof followed by a variable's name gives that variable's type, the same type TypeScript shows when you hover over it:

1const cart = { items: ["Tea"], total: 3 };2let coupon = "SAVE5";3const shop = "Tea House";4 5type Cart = typeof cart;6//   ^?7type Coupon = typeof coupon;8//   ^?9type Shop = typeof shop;10//   ^?

Lines 1 to 3 make three values. The query on line 6 shows the cart's object type. The query on line 8 shows string for the coupon: it's made with let, so it could hold any text later. The query on line 10 shows "Tea House": a const can never change, so its type is that exact text (the Literal types lesson covers this). typeof copies whatever type the value already has.

A function is a value too, so typeof gives you its type. That's handy when another function takes one like it:

1function formatPrice(price: number) {2  return `$${price.toFixed(2)}`;3}4 5type Formatter = typeof formatPrice;6//   ^?7function showPrices(prices: number[], format: Formatter) {8  console.log(prices.map(format).join(", "));9}10showPrices([3, 4.5], formatPrice);

Lines 1 to 3 make formatPrice, which turns a number into a price text. Line 5 copies its type, and the query on line 6 shows (price: number) => string: it takes a number and gives back a string. Line 7 says showPrices takes a list of prices and a function of that type. Line 10 passes formatPrice itself and prints $3.00, $4.50.

typeof only takes a name, or a name followed by dots. Type after typeof on line 6 and watch the answer on line 7:

1const cart = { items: ["Tea"], total: 3 };2function formatPrice(price: number) {3  return `$${price.toFixed(2)}`;4}5 6type Looked = typeof cart;7//   ^?

Names and properties work. formatPrice(3) doesn't: typeof in a type never runs anything, so it can't call a function. A property that doesn't exist is an error, and so is a value written out, like "Tea".

JavaScript has its own typeof, which you met at the start. The word is the same; where you write it decides which one you get:

1const total = 3;2 3const kind = typeof total;4//    ^?5type Total = typeof total;6//   ^?7console.log(kind);

Line 3 is normal code: const kind = … runs with the page. So it's JavaScript's typeof, and the query on line 4 shows it gives one of eight texts, like "number" or "string". Line 5 is a type, after type Total =. So it's TypeScript's typeof, and the query on line 6 shows the type 3. Line 7 prints number.

The rule: wherever a type goes, like after type X = or after the : that gives a variable its type, typeof is TypeScript's. In normal code, it's JavaScript's, and it runs. The JavaScript one is also how you check a value in an if (the Narrowing lesson covers that).

keyof typeof: the names of a value's properties

A list of page routes is a value. To get its names, you might reach for keyof straight away. That's an error, on purpose here:

1const routes = { home: "/", cart: "/cart", profile: "/me" };2 3type RouteName = keyof routes;

TypeScript says 'routes' refers to a value, but is being used as a type here. Did you mean 'typeof routes'?. keyof takes a type, and routes is a value that exists while the page runs. The message already says the fix:

1const routes = { home: "/", cart: "/cart", profile: "/me" };2 3type RouteName = keyof typeof routes;4//   ^?5function go(name: RouteName) {6  console.log(`Going to ${routes[name]}`);7}8go("cart");

Read line 3 from the right. typeof routes is the object's type, and keyof takes its names. The query on line 4 shows "home" | "cart" | "profile". Lines 5 to 7 make go, which accepts only those names, and line 8 prints Going to /cart.

The routes are written once, in the object. Add a checkout route on line 1, and RouteName includes it with no other change.

typeof with as const

typeof copies the type TypeScript gave the value. For an object, each property gets a general type like string, because properties can be changed later. as const after the value says it will never change (the as const & satisfies lesson covers it). Press the buttons to add it and take it away:

1const routes = { home: "/", cart: "/cart", profile: "/me" };2 3type Routes = typeof routes;4//   ^?5routes.home = "/start";6console.log(routes.home);

Without as const, the query on line 4 shows home: string, and line 5 may change it. With it, every property keeps its exact text and becomes readonly, so line 5 is marked. The keys are the same either way: keyof typeof routes is "home" | "cart" | "profile" in both.

Notice the output: both versions print /start. as const is a type, so it only makes TypeScript complain; it doesn't stop the change while the page runs. To stop that too, freeze the object (the Immutability lesson covers Object.freeze).

Lists work the same way:

1const sizes = ["S", "M", "L"];2const fixedSizes = ["S", "M", "L"] as const;3 4type Sizes = typeof sizes;5//   ^?6type FixedSizes = typeof fixedSizes;7//   ^?

Line 1 is a plain list, and the query on line 5 shows string[], a list of any texts. Line 2 adds as const, and the query on line 7 shows readonly ["S", "M", "L"]: exactly three items, in that order, that can't change. The next lesson turns that into the type "S" | "M" | "L".

A get function that only takes real keys

A settings page needs a function that reads one setting by its name. In JavaScript, you'd write settings[key] with any text. In TypeScript, that's an error, on purpose here:

1const settings = { theme: "light", fontSize: 16, showTips: true };2 3function getSetting(key: string) {4  return settings[key];5}6console.log(getSetting("fontSize"));

Line 3 says key is any text. Line 4 reads settings[key], and TypeScript says Element implicitly has an 'any' type because expression of type 'string' can't be used to index type …. In plain words: the settings only have three names, so "any text" might not be one of them, and TypeScript can't tell what you'd get back. The code still runs and prints 16, but a typo would quietly give undefined.

1const settings = { theme: "light", fontSize: 16, showTips: true };2 3function getSetting(key: keyof typeof settings) {4  return settings[key];5}6const size = getSetting("fontSize");7//    ^?8console.log(size);

Line 3 types key with keyof typeof settings, so the error is gone and a typo gets marked. But the query on line 7 shows string | number | boolean: the function doesn't know which name you passed, so the result could be any setting's type.

The Generic constraints lesson fixed this with two type parameters: T for the object and K extends keyof T for the key, so K is the exact name you pass. The result, obj[key], then has the type of that one property, which TypeScript writes T[K] (the next lesson covers that form). Press the buttons to try different calls on line 6:

1function get<T, K extends keyof T>(obj: T, key: K) {2  return obj[key];3}4 5const settings = { theme: "light", fontSize: 16, showTips: true };6const value = get(settings, "fontSize");7//    ^?8console.log(value);

Each call gets the exact type of its key, a wrong key is marked before the code runs, and the same get works for a user or any other object. keyof decides which keys are allowed; typeof is only needed when you start from a value rather than a type.

Feature flags from one object

Many apps turn features on and off with feature flags: a small object of names and true-or-false values. Write the object once, and let every type come from it:

1const flags = { darkMode: true, newCheckout: false, chatHelp: true };2 3type FlagName = keyof typeof flags;4//   ^?5function isOn(name: FlagName) {6  return flags[name];7}8 9console.log(isOn("newCheckout"));10console.log(isOn("darkMode"));

Line 1 is the flags object. Line 3 reads its names, and the query on line 4 shows "darkMode" | "newCheckout" | "chatHelp". Lines 5 to 7 make isOn, which only takes those names. Line 9 prints false and line 10 prints true.

When the team adds a flag, they add one line to the object, and isOn accepts the new name. When they remove one, every call that still uses its name is marked. A typo like isOn("darkmode") is marked straight away instead of quietly reading undefined, which would turn the feature off.

Common mix-ups

JavaScript's Object.keys gives you an object's names while the page runs. You might expect its type to be the same union as keyof. It isn't, and this loop gets an error, on purpose here:

1const flags = { darkMode: true, newCheckout: false };2 3const names = Object.keys(flags);4//    ^?5for (const name of names) {6  console.log(name, flags[name]);7}

The query on line 4 shows const names: string[]. So on line 6, name is any text, and flags[name] gets the same error as the loose getSetting. Why? TypeScript checks shapes, not exact objects: an object with extra properties still fits a type (the Structural typing lesson covers this). So Object.keys might return names the type doesn't list, and TypeScript only promises string[]. The code itself runs fine and prints both flags. Exercise 6 fixes it.

• "keyof Cart gives the types of the values." No. It gives the property names: "items" | "total".
• "keyof cart works on a value." No. keyof takes a type. Write keyof typeof cart.
• "typeof in a type gives a text like "number"." No. That's JavaScript's typeof, in normal code. In a type, typeof gives the type itself.
• "typeof formatPrice(3) gives the type of the result." No. typeof never calls anything; it only takes a name or a name with dots.
• "typeof of a let gives its exact value." No. A let can change, so its type is general, like string. Only a const keeps the exact value.
• "as const stops the object changing while the page runs." No. It's a type, so TypeScript only marks the change. Use Object.freeze to stop it.
• "Object.keys(obj) is typed as the object's keys." No. It's string[], because an object may have more properties than its type lists.

The table below sets the JavaScript words beside the TypeScript ones. Read each row as: what you write, what it is, and what you get.

Practice exercises

Each exercise is TypeScript. Press Edit & run on the starter code: the errors and ^? answers update as you type. Try a guess first, then use the hints.

type Order = { id: number; status: string; total: number };

let key: keyof Order = "id";
key = "total";
key = "price";

1type Order = { id: number; status: string; total: number };2 3let key: keyof Order = "id";4key = "total";5key = "status";

1let city = "Pune";2const country = "India";3 4type City = typeof city;5type Country = typeof country;

1let city = "Pune";2const country = "India";3 4type City = typeof city;5//   ^?6type Country = typeof country;7//   ^?

1const messages = { greeting: "Hello", cartTitle: "Your cart", checkout: "Pay now" };2 3function t(key: string) {4  return messages[key];5}6console.log(t("cartTitle"));

1const messages = { greeting: "Hello", cartTitle: "Your cart", checkout: "Pay now" };2 3function t(key: keyof typeof messages) {4  return messages[key];5}6console.log(t("cartTitle"));

1function formatPrice(price: number) {2  return `$${price.toFixed(2)}`;3}4 5function showTotal(total: number, format: unknown) {6  console.log(format(total));7}8showTotal(7, formatPrice);

1function formatPrice(price: number) {2  return `$${price.toFixed(2)}`;3}4 5function showTotal(total: number, format: typeof formatPrice) {6  console.log(format(total));7}8showTotal(7, formatPrice);

1const routes = { home: "/", cart: "/cart" };2 3type Routes = typeof routes;4//   ^?5routes.cart = "/basket";

1const routes = { home: "/", cart: "/cart" } as const;2 3type Routes = typeof routes;4//   ^?5routes.cart = "/basket";

1const flags = { darkMode: true, newCheckout: false };2 3const names = Object.keys(flags);4//    ^?5for (const name of names) {6  console.log(name, flags[name]);7}

1const flags = { darkMode: true, newCheckout: false };2 3const names = Object.keys(flags) as (keyof typeof flags)[];4//    ^?5for (const name of names) {6  console.log(name, flags[name]);7}

Check your understanding

For each question, ask: is this a type or a value, and is typeof here JavaScript's or TypeScript's? The quiz shows its code without the checker, so the error list doesn't give the answers away.

Key takeaways

• keyof Type is a union of the type's property names, like "items" | "total". Hovers often show it as keyof Type.
• keyof on an index signature gives string | number or number, on {} gives never, and on a union gives only the shared names.
• In a type, typeof value is the value's type. It takes a name or a name with dots, and never calls anything.
• In normal code, typeof is JavaScript's and gives a text like "number" while the page runs.
• keyof typeof obj gives the names of a value's properties, so they're written only once.
• With as const, typeof keeps exact values and adds readonly. It changes the type, not the running object.
• Object.keys is typed string[], because objects can have extra properties.

Coming next: Indexed access types. Once you have a key, they look up the type of that one property, like Cart["total"].