3 Things I Wish I Knew Earlier About TypeScript Generics

Generated with DALL-E: Generate me a water color image. The background should be beige and then just with red somewhere: “Generics”

When working on a large-scale B2B application, you might encounter complex type definitions.

Taking the time to understand the advanced concepts of TypeScript Generics can significantly enhance your comprehension and help you manage these complexities more effectively.

Infer: Extract Types

The infer keyword is used within conditional types to extract type information from other types:

Example with infer

In this example, we extracted the User type from the UserApiResponse.

Mapped Types: Creating New Types

Mapped types allow you to create new types based on existing ones by transforming their properties.

Here’s a simple example of creating a read-only type:

First example with mapped types

A more complex example that annotates a type with typical form fields:

Second example with mapped types

keyof: Generic Constraints

The keyof keyword allows you to create more specific and powerful generic types by restricting the types that can be used with a generic.

Here’s a useful function to transform properties of an object:

First example with key of

Another advanced use case is building a query builder:

Second example with key of

---

Learn more:

One Piece of Advice I Got from the VP of Engineering

Follow These 3 Rules in Your React Components or I Will Ask You to Refactor

18.4K Reads, 450 Followers, $515 Earned - A Month of Intensive Blogging