typescript object paths as param nested keys

Daniel Parker

3 min read

·

27-02-2025

1

0

Share

Accessing deeply nested properties in JavaScript objects can be cumbersome and error-prone. This article explores how to elegantly handle nested keys in TypeScript using object paths as parameters, enhancing code readability, maintainability, and type safety. We'll explore different approaches and best practices.

Why Use Object Paths?

Imagine you have a complex object like this:

interface User {
  profile: {
    address: {
      street: string;
      city: string;
    };
    contact: {
      email: string;
      phone: string;
    };
  };
  settings: {
    notifications: boolean;
  };
}

const user: User = {
  profile: {
    address: { street: "123 Main St", city: "Anytown" },
    contact: { email: "[email protected]", phone: "555-1212" }
  },
  settings: { notifications: true }
};

Accessing user.profile.address.street is straightforward, but what if you need a function that can dynamically access any nested property? Hardcoding each path isn't scalable. Object paths provide a solution.

Approach 1: Using a String Path and reduce

One common method uses a string path separated by dots (e.g., "profile.address.street") and the reduce method:

function getValueByPath<T>(obj: T, path: string): any {
  return path.split('.').reduce((acc, part) => acc && acc[part], obj);
}

const street = getValueByPath(user, "profile.address.street"); // "123 Main St"
const email = getValueByPath(user, "profile.contact.email"); // "[email protected]"

This is concise, but it lacks type safety. The return type is any, leaving you vulnerable to runtime errors.

Approach 2: Type-Safe Object Paths with Generics

To improve type safety, we can leverage TypeScript's generics:

type Path<T, K extends keyof T> = T[K] extends object
  ? K | `${K}.${Path<T[K], keyof T[K]>}`
  : K;

function getValueByPathSafe<T, K extends Path<T, keyof T>>(obj: T, path: K): T[K] {
  return path.split('.').reduce((acc, part) => acc[part as keyof typeof acc], obj);
}

const streetSafe: string = getValueByPathSafe(user, "profile.address.street");
const emailSafe: string = getValueByPathSafe(user, "profile.contact.email");
//const invalid: number = getValueByPathSafe(user, "profile.address.city" as any); //Type Error!

This approach uses a recursive type Path to generate a union type of all possible paths within the object. The getValueByPathSafe function now provides type safety, preventing access to non-existent properties at compile time.

Approach 3: Using a Tuple Path for Enhanced Type Safety

For even stronger type safety, consider using a tuple of keys instead of a string path:

function getValueByTuplePath<T, K extends (keyof T)[]>(obj: T, path: K): T[K[number]] extends object ? (T[K[number]] extends undefined ? undefined : T[K[number]]) : T[K[number]] {
  return path.reduce((acc, key) => acc && acc[key], obj);
}

const city: string = getValueByTuplePath(user, ["profile", "address", "city"]);
//const invalidCity: number = getValueByTuplePath(user, ["profile", "address", "city"] as any); //Type Error!

This method provides excellent type safety. It explicitly defines the path as a sequence of keys. However, it might be less readable for very deep nesting.

Choosing the Right Approach

The best approach depends on your project's complexity and your preference for readability versus type safety.

• String Path with reduce: Simplest, but lacks type safety. Suitable for quick, less critical use cases.

• Type-Safe Object Paths with Generics: Offers good type safety and is relatively concise. A good balance for most projects.

• Tuple Path: Provides the strongest type safety but can be less readable for complex objects. Best for projects prioritizing type safety and maintainability above all else.

Remember to always prioritize clear, readable code while leveraging TypeScript's type system to catch errors early. Carefully consider the trade-offs between simplicity and type safety when selecting your preferred method for accessing nested object properties. Adding comprehensive tests will further improve robustness.