Improving Type Safety and Reusability with TypeScript Generics and keyof

When working with TypeScript, there are times when you want to write reusable code that can handle various types. This is exactly when generics come into play. And when used with the keyof operator, you can safely work with object properties. In this post, we’ll explore how to use TypeScript generics along with keyof, with practical examples. From basic concepts to immediately applicable patterns, the content is structured to build your understanding step-by-step.

---

Basics of TypeScript Generics

Generics are a key tool for creating reusable components that maintain type safety across various types. They allow you to build components that aren’t limited to a single type. Let’s look at the most basic example, an identity function:

function identity<T>(arg: T): T {
  return arg;
}

Here, <T> is a type variable. It captures the type passed during the function call, ensuring the input and output types match. You can name type variables however you like, but T (short for Type) is commonly used.

Calling a Generic Function

You can call generics with explicit type arguments or by type inference—type inference is preferred when possible. There are two ways to call a generic function:

Using explicit type arguments:

let output = identity<string>("myString");

Using type inference:

let output = identity("myString");

The second method is more concise and readable, so it’s recommended when TypeScript can automatically infer the type.

Flexibility from Type Variables

Generics safely accommodate a wide range of types, blocking mismatched type combinations at compile time.

function toArray<T>(a: T, b: T) {
  return [a, b];
}

toArray<string>("hello", "world"); // string[] type
toArray<number>(1, 2); // number[] type

Passing arguments of different types results in a compile-time error:

toArray<string>("hello", 1); // Type error!

---

Constraining Generics with keyof

keyof provides a union of the keys of an object type, and combined with generic constraints, enables type-safe property access. The keyof operator gets the keys of an object type as a union of literal types. Used with generics, it enables powerful type constraints.

Basic Usage of keyof

interface Person {
  name: string;
  age: number;
}

type PersonKeys = keyof Person; // "name" | "age"

Enforcing Type Safety with Generic Constraints

The Key extends keyof Type constraint prevents access to non-existent properties at compile time.

function getProperty<Type, Key extends keyof Type>(obj: Type, key: Key) {
  return obj[key];
}

const person = {
  name: "Anna",
  age: 30
};

getProperty(person, "name"); // ✅ Works
getProperty(person, "email"); // ❌ Type error!

Implementing a Property Setter Function

Using the T[K] indexed access type allows precise type enforcement for values as well.

function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]): void {
  obj[key] = value;
}

const user = {
  name: "John",
  age: 25
};

setProperty(user, "name", "Jane"); // ✅ OK
setProperty(user, "name", 30); // ❌ Type error! (should be string)
setProperty(user, "email", "test@test.com"); // ❌ Type error! (nonexistent property)

---

Generic Interfaces and Classes

Generics can also be applied to interfaces and classes, allowing flexible API design beyond functions.

Generic Interface

interface GenericIdentityFn<Type> {
  (arg: Type): Type;
}

function identity<Type>(arg: Type): Type {
  return arg;
}

let myIdentity: GenericIdentityFn<number> = identity;

Generic Class

class GenericNumber<NumType> {
  zeroValue: NumType;
  add: (x: NumType, y: NumType) => NumType;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) {
  return x + y;
};

Real-world example:

class User<P> {
  constructor(public payload: P) {this.payload = payload;
  }

  getPayload() {return this.payload;
  }
}

const user1 = new User<{ name: string; age: number }>({
  name: "Kim",
  age: 28
});

const user2 = new User<string[]>(["admin", "user"]);

Limitations of Generics

TypeScript does not allow generic enums or namespaces. This is a design limitation of the language.

---

Default Type Parameters

Providing default values for generic parameters improves usability and simplifies common cases.

function createHTMLElement<T extends HTMLElement = HTMLDivElement>(
  element?: T
): T {
  return element || (document.createElement('div') as T);
}

// Defaults to HTMLDivElement if type argument is omitted
const div = createHTMLElement();

// You can also explicitly specify another type
const button = createHTMLElement<HTMLButtonElement>(
  document.createElement('button')
);

---

Practical Example: Type-Safe Data Access Pattern

Creating a utility to safely extract properties from API responses helps prevent runtime errors at compile time.

interface ApiResponse {
  data: {user: {  id: number;  name: string;  email: string;};posts: Array<{  id: number;  title: string;}>;
  };
  meta: {timestamp: number;version: string;
  };
}

function extractData<T, K extends keyof T>(response: T, key: K): T[K] {
  return response[key];
}

const response: ApiResponse = {
  data: {user: { id: 1, name: "Lee", email: "lee@example.com" },posts: [{ id: 1, title: "First Post" }]
  },
  meta: {timestamp: Date.now(),version: "1.0"
  }
};

const data = extractData(response, "data"); // inferred as data
const meta = extractData(response, "meta"); // inferred as meta

Accessing Nested Properties

By constraining nested keys step-by-step, you can safely access deeply nested properties.

function getNestedProperty<
  T,
  K1 extends keyof T,
  K2 extends keyof T[K1]
>(obj: T, key1: K1, key2: K2): T[K1][K2] {
  return obj[key1][key2];
}

const userName = getNestedProperty(response, "data", "user"); // user object type

---

Union Types with Generic Constraints

Specifying a union with extends allows you to restrict valid types precisely.

function hello<T extends string | number>(msg: T): T {
  return msg;
}

hello(3); // ✅ number
hello("hi"); // ✅ string
hello([3, 5]); // ❌ Type error! (arrays not allowed)

---

Using keyof with typeof

A practical pattern for extracting value unions from constant objects involves combining keyof and typeof.

const SUBJECT = {
  Math: 'Math',
  English: 'English',
  Science: 'Science'
} as const;

type Subject = typeof SUBJECT[keyof typeof SUBJECT];
// "Math" | "English" | "Science"

function getSubjectName(subject: Subject): string {
  return subject;
}

getSubjectName("Math"); // ✅ OK
getSubjectName("History"); // ❌ Type error!

This pattern works as follows:

1. Use typeof SUBJECT to get the object type
2. Apply keyof typeof SUBJECT to extract keys
3. Use typeof SUBJECT[keyof typeof SUBJECT] to form a union of the literal values

---

Practical Benefits of Generics and keyof

Improved type safety: Prevent access to non-existent properties at compile time.
Code reusability: Reuse the same function or class for multiple types.
Better maintainability: Clear types serve as safety nets during refactoring.
Stronger IDE support: Auto-completion and type hints work reliably.

---

Frequently Asked Questions (FAQ)

How many generic type variables can I use?

You can use as many as needed, but overusing them may hurt readability—2 to 3 is usually sufficient.

function transform<T, U, V>(input: T, mapper1: (x: T) => U, mapper2: (x: U) => V): V {
  return mapper2(mapper1(input));
}

When is it appropriate to use keyof?

It’s useful when validating property access in dynamic property access, mapping/transformation utilities, type-safe event handlers, or state management. It’s especially powerful when safe access to object properties is required.

What if my generic constraints become too complex?

Extract the constraints into type aliases to improve readability.

type ValidKey<T> = keyof T;
type ValidValue<T, K extends ValidKey<T>> = T[K];

function update<T, K extends ValidKey<T>>(
  obj: T,
  key: K,
  value: ValidValue<T, K>
): void {
  obj[key] = value;
}

---

Apply This to Your Project

Generics and keyof are powerful tools that significantly enhance type safety and code quality. Start with small utilities and expand their use. If you’re accessing object properties in your code, that’s a great starting point to apply generics and keyof. Whenever you think “I’m not sure this property actually exists,” that’s the right time to add a generic constraint. TypeScript’s type system will help make your code safer :)

References

• Why Avoiding TypeScript Enums is Good from a Tree-shaking Perspective