The keyof and typeof Operators

keyof T produces the union of T's property names as literal types. In a type position, typeof x produces the type TypeScript inferred for the variable x. Combined, they turn an ordinary object into the single source of truth for its keys and value types, as in this settings reader backed by localStorage (Web Storage):

Deriving types from a defaults objectJavaScript

const defaults = { theme: "light", pageSize: 20, beta: false };
type Settings = typeof defaults;   // { theme: string; pageSize: number; beta: boolean }
type SettingKey = keyof Settings;  // "theme" | "pageSize" | "beta"
function readSetting<K extends SettingKey>(key: K): Settings[K] {
  const stored = localStorage.getItem(key);
  return stored === null ? defaults[key] : JSON.parse(stored);
}
const size = readSetting("pageSize");  // number
size.toFixed(0);
readSetting("colour");
const saved: Settings = { theme: "dark", pageSize: "50", beta: true };

Output

settings.ts(10,13): error TS2345: Argument of type '"colour"' is not assignable to parameter
  of type '"beta" | "pageSize" | "theme"'.
settings.ts(11,42): error TS2322: Type 'string' is not assignable to type 'number'.

Add a setting to defaults and every derived type follows (tsc 7.0 may list union members in a different order from your source). For an index signature, keyof { [k: string]: boolean } is string | number, because JavaScript coerces numeric keys to strings. Object literal properties widen ("light" becomes string); add as const when you need the literal.

MENU