How to use keyof.
Key unions and indexed access.

// ─── keyof gives a union of keys ─────────────
interface User {
id: string;
name: string;
email: string;
age: number;
}

type UserKey = keyof User;
// 'id' | 'name' | 'email' | 'age'

const k1: UserKey = 'name'; // ✅
const k2: UserKey = 'age'; // ✅
// const k3: UserKey = 'foo'; // ❌ 'foo' not a key of User

// ─── keyof typeof — keys from a value ────────
const config = {
host: 'localhost',
port: 3000,
debug: true
};

type ConfigKey = keyof typeof config;
// 'host' | 'port' | 'debug'

const ck: ConfigKey = 'port'; // ✅
// const bad: ConfigKey = 'url'; // ❌

// ─── keyof with generics ─────────────────────
function pluckKeys(obj: T): (keyof T)[] {
return Object.keys(obj) as (keyof T)[];
}

const keys = pluckKeys({ a: 1, b: 2 }); // ('a' | 'b')[]

// ─── keyof on unions ─────────────────────────
type A = { a: string; b: number };
type B = { b: number; c: boolean };
type AB = keyof (A | B);
// 'b' — only keys present in BOTH A and B
// (you can't safely access a key that's on only one member)

// ─── keyof on interfaces with index signatures
interface Dict {
[key: string]: number;
}
type DictKey = keyof Dict;
// string | number (the index signature's key type)

console.log(k1, k2, ck, keys);

interface User {
id: string;
name: string;
age: number;
active: boolean;
}

// ─── Indexed access — the type of a value ────
type IdType = User['id']; // string
type AgeType = User['age']; // number
type ActiveType = User['active']; // boolean

// ─── Union indexed access ────────────────────
type AllValues = User[keyof User];
// string | number | boolean
// — the union of every value type in User.

// ─── The typed getter ────────────────────────
function getextends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}

const user: User = { id: '1', name: 'Alice', age: 28, active: true };

const n = get(user, 'name'); // string
const a = get(user, 'age'); // number
const b = get(user, 'active'); // boolean

// ─── The typed setter ────────────────────────
function setextends keyof T>(obj: T, key: K, value: T[K]): T {
return { ...obj, [key]: value };
}

const updated = set(user, 'name', 'Alicia'); // ✅ value: string
// set(user, 'age', 'x'); // ❌ value must be number
// set(user, 'name', 42); // ❌ value must be string

// ─── Multiple keys — union access ────────────
function pluckextends keyof T>(items: T[], key: K): T[K][] {
return items.map(item => item[key]);
}

const users: User[] = [user, { id: '2', name: 'Bob', age: 34, active: false }];

const names = pluck(users, 'name'); // string[]
const ages = pluck(users, 'age'); // number[]

// ─── Nested key access ───────────────────────
interface Order {
customer: { name: string; email: string };
total: number;
}

type CustomerType = Order['customer']; // { name, email }
type CustomerName = Order['customer']['name']; // string

console.log(n, a, b, updated, names, ages);

// ─── Config objects ──────────────────────────
const config = {
apiUrl: 'https://api.example.com',
timeout: 3000,
retries: 5
} as const;

type ConfigKey = keyof typeof config;
// 'apiUrl' | 'timeout' | 'retries'

function getConfigextends ConfigKey>(key: K): typeof config[K] {
return config[key];
}

const url = getConfig('apiUrl'); // 'https://api.example.com'
const t = getConfig('timeout'); // 3000
// getConfig('port'); // ❌ 'port' not in config

// ─── Route definitions ───────────────────────
const routes = {
home: '/',
about: '/about',
blog: '/blog',
post: '/blog/:slug'
} as const;

type RouteName = keyof typeof routes;
// 'home' | 'about' | 'blog' | 'post'

function navigate(name: RouteName): void {
console.log('Navigate to:', routes[name]);
}

navigate('home'); // ✅
navigate('blog'); // ✅
// navigate('posts'); // ❌

// ─── Discriminated unions on objects ─────────
type EventMap = {
click: { x: number; y: number };
focus: { target: string };
blur: { target: string };
};

type EventName = keyof EventMap; // 'click' | 'focus' | 'blur'

function emitextends EventName>(event: E, payload: EventMap[E]): void {
console.log(event, payload);
}

emit('click', { x: 10, y: 20 }); // ✅ payload must have x, y
emit('focus', { target: 'input' }); // ✅ payload must have target
// emit('click', { target: 'x' }); // ❌ payload needs x, y
// emit('unknown', {}); // ❌ 'unknown' not an event

// ─── The pattern ─────────────────────────────
// The combination of:
// - EventMap (object type)
// - keyof EventMap (event names)
// - EventMap[E] (payload type per event)
//
// gives you a fully-typed event emitter with
// zero runtime overhead. This is how Zustand,
// Mitt, and every event bus types itself.

// ─── keyof + mapped types ────────────────────
type DeepReadonly = {
readonly [K in keyof T]: T[K]
};

type FrozenConfig = DeepReadonly<typeof config>;
// All config fields become readonly
// This is how utility types are built — keyof as the iteration

console.log(url, t);
navigate('home');
emit('click', { x: 1, y: 2 });