// Created on savesnippets.com · https://savesnippets.com/BtKkfJs6oaliqm
type EventName<K extends string> = `on${Capitalize<K>}`;

type ClickHandler = EventName<'click'>;   // 'onClick'
type FocusHandler = EventName<'focus'>;   // 'onFocus'

// Strongly-typed CSS variable names
type CssVar<K extends string> = `--${K}`;
const setVar = <K extends string>(el: HTMLElement, k: K, v: string) =>
  el.style.setProperty(`--${k}` as CssVar<K>, v);

// Parse "GET /users/:id" → "GET" + "/users/:id"
type Method = 'GET' | 'POST' | 'PUT' | 'DELETE';
type Route<M extends Method, P extends string> = `${M} ${P}`;

const handle = (r: Route<'GET', '/users/:id'>) => {};
handle('GET /users/:id');     // ✓
handle('POST /users/:id');    // ✗