TGViewer
WebDev+ | Веб-разработка WebDev+ | Веб-разработка @webdev_plus · 7.9K subscribers
Post #1000 969
Этот крошечный утилитарный модуль на TypeScript делает твой код типобезопасным, переиспользуемым и полностью выводимым по типам

Паттерн TypeScript для чистой и типобезопасной выборки данных

type KeyOf<T> = Extract<keyof T, string>;

const mapData = <T extends object, K extends KeyOf<T>>(
data: readonly T[],
key: K,
) => data.map((item) => item[key]);

const categories = [
{ id: 1, name: "Clothing" },
{ id: 2, name: "Footwear" },
] as const;

const variants = [
{ id: 1, name: "Red - Large" },
{ id: 2, name: "Blue - Medium" },
] as const;

const sizes = [
{ id: 1, label: "Small" },
{ id: 2, label: "Medium" },
] as const;

// Типобезопасно, неизменно и полностью выводится по типам
console.log(mapData(categories, "name")); // ["Clothing", "Footwear"]
console.log(mapData(variants, "name")); // ["Red - Large", "Blue - Medium"]
console.log(mapData(sizes, "label")); // ["Small", "Medium"]


@WebDev_Plus
More from @webdev_plus
  1. Oct 11, 2026Быстрый совет по JS: используйте Gamepad API, чтобы в реальном времени отслеживать статус…
  2. Oct 10, 2026Chrome DevTools – это не только панель для отладки, но и полноценная среда для проектирова…
  3. Oct 10, 2026Обрати внимание, что в корректном примере чипы мгновенно перемещаются на новую позицию, ко…
  4. Oct 9, 2026Принёс находку: sshx. Всего одна команда, и у вас в браузере открывается реплика локальног…
  5. Oct 9, 2026Огромная коллекцию из 1500+ отобранных API для ваших проектов, от погоды и карт до генерат…
  6. Oct 8, 2026Набор полезных пользовательских CSS-функций, который работает на новой нативной директиве…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →