{"id":246,"date":"2026-05-18T05:00:42","date_gmt":"2026-05-18T05:00:42","guid":{"rendered":"https:\/\/abrarqasim.com\/blog\/typescript-generics-in-production-what-i-actually-reach-for\/"},"modified":"2026-05-18T05:00:42","modified_gmt":"2026-05-18T05:00:42","slug":"typescript-generics-in-production-what-i-actually-reach-for","status":"publish","type":"post","link":"https:\/\/abrarqasim.com\/blog\/typescript-generics-in-production-what-i-actually-reach-for\/","title":{"rendered":"TypeScript Generics in Production: What I Actually Reach For"},"content":{"rendered":"

Confession: I avoided TypeScript generics for the first eight months I used the language. I’d write function getUser(id: string): any<\/code> and tell myself I’d fix it later. I never did. Then I read a PR from a coworker who’d taken twelve lines of my code, replaced it with three lines and one generic, and made the autocomplete actually work. That was the moment.<\/p>\n

Generics are one of those things where the docs make them look harder than they are, and once they click, you wonder why you were so afraid. I’ve been writing TypeScript professionally for years now, and there are three patterns I reach for over and over. I want to write them down, partly so the juniors on my team have something to point at, partly because writing them down helps me notice when I’m overusing them.<\/p>\n

If you want the canonical syntax reference, the TypeScript handbook on generics<\/a> covers it. This is the field guide.<\/p>\n

Pattern 1: keep the input type through the function<\/h2>\n

The most common place generics actually pay off: a helper that takes some object and returns part of it. Without a generic, the type information at the call site disappears.<\/p>\n

Here’s the bad version I see in code review at least once a week:<\/p>\n

function pick(obj: any, keys: string[]): any {\n  const out: any = {};\n  for (const k of keys) out[k] = obj[k];\n  return out;\n}\n<\/code><\/pre>\n
It compiles. It’s also a lie. The caller has no idea what they got back, autocomplete dies, typos slip through. Three any<\/code>s in one function is the kind of code smell I learned to spot from a mile away.<\/p>\n
The generic version:<\/p>\n
function pick<T extends object, K extends keyof T>(\n  obj: T,\n  keys: K[],\n): Pick<T, K> {\n  const out = {} as Pick<T, K>;\n  for (const k of keys) out[k] = obj[k];\n  return out;\n}\n<\/code><\/pre>\n
Call it with pick(user, ['email', 'name'])<\/code> and you get back { email: string; name: string }<\/code>. Try pick(user, ['emial'])<\/code> and the compiler stops you. That’s it.<\/p>\n
The two pieces doing the work: K extends keyof T<\/code> forces the keys to actually exist on the input, and the built-in Pick<T, K><\/code> utility type builds the return shape so I don’t have to. I use this exact pattern for response slicing and prop forwarding in React. Anywhere I’m passing a subset of an object through.<\/p>\n
One trick worth knowing: if you call pick(user, ['email', 'name'])<\/code>, TypeScript infers K<\/code> as the literal union 'email' | 'name'<\/code>, not string<\/code>. That literal inference is what makes the return type tight. If you ever wrap this call in a function that takes string[]<\/code> and forwards it, you lose the literal union and the safety collapses back to Record<string, unknown><\/code>-ish. The lesson I learned the hard way: don’t widen too early.<\/p>\n
Pattern 2: derive the output type with infer<\/h2>\n
This is the one that took me longest to like. The infer<\/code> keyword looked cryptic until I had a real problem that needed it.<\/p>\n
The problem was a thin wrapper that unwrapped a Promise if you handed it one, and passed through the value otherwise. Writing the runtime is easy. Writing the return type is where I got stuck.<\/p>\n
type Awaited<T> = T extends Promise<infer U> ? U : T;\n<\/code><\/pre>\n
Read it slowly. “If T looks like Promise, give me that something. Otherwise give me T.” That’s the whole shape. Conditional types pattern-match like a switch statement, and infer<\/code> is how you grab the piece you need.<\/p>\n
Awaited<\/code> is now in the standard lib, so you don’t have to write it yourself. But once that shape clicked for me, every conditional type I’d seen in library code suddenly made sense.<\/p>\n
A more real example, an event bus where each handler gets the right payload typed automatically:<\/p>\n
type Events = {\n  'user:created': { id: string; email: string };\n  'order:shipped': { orderId: string; tracking: string };\n  'payment:failed': { orderId: string; reason: string };\n};\n\nfunction on<E extends keyof Events>(\n  event: E,\n  handler: (payload: Events[E]) => void,\n) {\n  \/\/ wires through to whatever event emitter you use\n}\n\non('user:created', (payload) => {\n  \/\/ payload is { id: string; email: string }\n  console.log(payload.email);\n});\n<\/code><\/pre>\n
Add a new event to the Events<\/code> map and every call site picks up the right handler type. The compiler walks the map for you, no casts needed.<\/p>\n
Another infer pattern I reach for: pulling the argument type out of an existing function so I don’t have to retype it.<\/p>\n
type FirstArg<F> = F extends (arg: infer A, ...rest: any[]) => any ? A : never;\n\nfunction logSomeServiceCall(arg: FirstArg<typeof someService.create>) {\n  console.log('would call with', arg);\n}\n<\/code><\/pre>\n
If someService.create<\/code> changes signature, logSomeServiceCall<\/code> follows along. Without infer<\/code>, I’d be duplicating the input type and watching it drift.<\/p>\n
For the deeper end of conditional types, the TypeScript page on conditional types<\/a> covers infer<\/code> properly, including distributive conditional types which I’ll spare you here.<\/p>\n
Pattern 3: constraints that catch the wrong shape<\/h2>\n
I used to write generics with no constraint, then add runtime checks to compensate. Wrong order. The constraint is the check.<\/p>\n
Tiny example. I needed a helper that turned a list of items into a map keyed by id:<\/p>\n
function byId<T extends { id: string }>(items: T[]): Record<string, T> {\n  const out: Record<string, T> = {};\n  for (const item of items) out[item.id] = item;\n  return out;\n}\n<\/code><\/pre>\n
The extends { id: string }<\/code> part is the whole point. Hand it an array of items without an id<\/code> field, the compiler stops you before the code runs. Hand it User[]<\/code> and you get Record<string, User><\/code> back. No runtime guard needed.<\/p>\n
The mistake I see in junior code: people write T extends any[]<\/code> or T extends object<\/code> thinking they’re being permissive. A constraint of object<\/code> is barely tighter than no constraint at all. The useful constraints are specific shapes like { id: string }<\/code> or Record<string, unknown><\/code>.<\/p>\n
Rule of thumb I use: if the constraint isn’t telling the compiler something it couldn’t already infer, drop it.<\/p>\n
Where I stop using generics<\/h2>\n
This is the part most tutorials skip. There’s a phase after you learn generics where you start sprinkling them everywhere, even on functions that only ever see one type. Code review gets slower because every signature now requires you to mentally substitute <T><\/code> to read the body.<\/p>\n
Places I now actively delete generics. Internal helpers with one caller: if processOrder<\/code> is only ever called with Order<\/code>, just type the parameter Order<\/code>. The generic adds noise without adding safety.<\/p>\n
React components where the prop type doesn’t actually vary. I keep seeing <Button<T>><\/code> style components where the generic is never bound to anything dynamic. Use a union, or write two components.<\/p>\n
Functions where the generic is decorative. If the constraint is so loose that the caller can pass anything, the generic isn’t earning its keep. Same with output types: when the return type is T | undefined<\/code> regardless of what T<\/code> is, the generic doesn’t add information.<\/p>\n
The test I run on myself before adding <T><\/code>: would deleting the generic make the call site less safe? If the answer is no, the generic is decoration.<\/p>\n
A concrete refactor I did last quarter. I had a helper that looked like this:<\/p>\n
function logEvent<T>(name: string, payload: T): void {\n  analytics.track(name, payload);\n}\n<\/code><\/pre>\n
Looked clever. Did nothing. The constraint on T<\/code> was missing, so payload<\/code> could be anything, and there was no return type to derive. Every call site already typed the payload object literal. I deleted the <T><\/code> and typed payload: Record<string, unknown><\/code>. Same safety, less syntax. Nobody on the team noticed because nothing changed for them.<\/p>\n
I covered something adjacent to this in my post on the satisfies operator<\/a>. A lot of the time, the cleaner answer is a normal type plus satisfies<\/code>, not a generic at all. If you’ve been reaching for <T><\/code> reflexively, that one’s worth a read too.<\/p>\n
What to try this week<\/h2>\n
Pick one helper in your codebase that currently uses any<\/code> or returns a loosely-typed object. Rewrite it using Pattern 1, the one with T extends object, K extends keyof T<\/code>. Read the call site the next morning. If autocomplete improved and the function got safer, keep it. If the signature got harder to read without buying anything, revert.<\/p>\n
Generics are a tool for keeping type information accurate when data flows through helpers. They aren’t a status symbol. The three patterns here cover most of the TypeScript I actually ship. If you want to see the kind of codebases I apply this stuff in, my project work is here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Three TypeScript generics patterns I actually use in production code, plus the places I learned to delete the generic and what I write instead.<\/p>\n","protected":false},"author":2,"featured_media":245,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"","rank_math_description":"Three TypeScript generics patterns I actually use in production code, plus the places I learned to delete the generic and what I write instead.","rank_math_focus_keyword":"typescript generics","rank_math_canonical_url":"","rank_math_robots":"","footnotes":""},"categories":[45],"tags":[286,285,50,63],"class_list":["post-246","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming","tag-developer-experience","tag-generics","tag-programming","tag-typescript"],"_links":{"self":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts\/246","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/comments?post=246"}],"version-history":[{"count":0,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts\/246\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/media\/245"}],"wp:attachment":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/media?parent=246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/categories?post=246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/tags?post=246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}