typescript object paths as param

Breiz Heurope

3 min read

·

10-03-2025

1

0

Share

TypeScript's power lies in its ability to provide type safety even in complex scenarios. One such scenario involves accessing nested properties within objects, often requiring dynamic property access. This article explores how to effectively and safely use TypeScript object paths as parameters in your functions, enhancing code clarity and maintainability. We'll cover various techniques, their pros and cons, and best practices to ensure type safety throughout.

Why Use Object Paths as Parameters?

Imagine a function needing to update a specific property deep within a complex object. Hardcoding the path each time leads to repetitive code and makes modifications cumbersome. Passing the path as a parameter allows for flexible and reusable functions. For instance, instead of writing separate functions for updateUserProfileName and updateUserAddress, a single, generalized function can handle both with the object path specified as an argument.

Method 1: String-based Object Paths

The simplest approach uses strings to represent object paths. This method is intuitive but requires careful handling to avoid runtime errors.

type ObjectPath = string;

function updateProperty<T>(obj: T, path: ObjectPath, value: any): T {
  const pathParts = path.split('.');
  let currentObj = obj;
  for (let i = 0; i < pathParts.length - 1; i++) {
    const part = pathParts[i];
    if (currentObj[part] === undefined) {
      //Handle missing property - throw error, return original object, etc.
      throw new Error(`Property '${part}' not found in object.`);
    }
    currentObj = currentObj[part] as any; // Type assertion - needs improvement!
  }
  const lastPart = pathParts[pathParts.length - 1];
  currentObj[lastPart] = value;
  return obj;
}

const myObject = { user: { name: 'John', address: { street: '123 Main St' } } };
updateProperty(myObject, 'user.name', 'Jane');
console.log(myObject); // Output: { user: { name: 'Jane', address: { street: '123 Main St' } } }

Pros: Simple to implement.

Cons: Type safety is compromised. The any type assertion is a major drawback. Runtime errors can occur if the path is incorrect or properties are missing. The function also lacks type information about the value being assigned.

Method 2: Tuple-based Object Paths (Improved Type Safety)

To address the type safety issues of the string-based approach, we can use tuples to represent the object path.

type ObjectPath<T> = [keyof T, ...(T extends object ? (keyof T extends infer K ? K extends string | number | symbol ? [K, ...(T[K] extends object ? ObjectPath<T[K]> : [])] : never : never) : [])]

function updateProperty2<T, V>(obj: T, path: ObjectPath<T>, value: V): T {
    let currentObj = obj;
    for (const key of path.slice(0, -1)) {
        if(currentObj[key] === undefined) {
            throw new Error(`Property '${key}' not found in object`);
        }
        currentObj = currentObj[key] as any;
    }
    const lastKey = path[path.length -1] as keyof T;
    currentObj[lastKey] = value;
    return obj;
}


const myObject2 = { user: { name: 'John', address: { street: '123 Main St' } } };
updateProperty2(myObject2, ['user', 'name'] as ['user', 'name'], 'Jane');
console.log(myObject2); //Output: { user: { name: 'Jane', address: { street: '123 Main St' } } }

Pros: Significantly better type safety. The compiler helps prevent errors related to incorrect paths.

Cons: More complex to implement. The type definition for ObjectPath can be challenging to understand and maintain, especially for deeply nested objects.

Method 3: Leveraging lodash.get and lodash.set (for simplicity)

For simpler scenarios and when you're already using Lodash, consider using _.get for reading and _.set for updating properties. These functions handle missing properties gracefully and provide a concise way to work with object paths.

import { get, set } from 'lodash';

const myObject3 = { user: { name: 'John', address: { street: '123 Main St' } } };

const name = get(myObject3, 'user.name');
console.log(name); // Output: John

set(myObject3, 'user.name', 'Jane');
console.log(myObject3); // Output: { user: { name: 'Jane', address: { street: '123 Main St' } } }

Pros: Simple, concise, handles missing properties. Good option if you already use Lodash.

Cons: Adds a dependency on Lodash.

Choosing the Right Method

The best method depends on your project's needs and complexity.

• String-based paths: Suitable for very simple cases, but avoid this unless absolutely necessary due to type safety concerns.
• Tuple-based paths: The preferred method for ensuring type safety, but requires more upfront work for the type definition.
• Lodash get and set: A great option for simpler scenarios, especially if your project already uses Lodash.

Remember that even with the improved type safety, thorough testing is crucial to ensure your functions behave as expected under various conditions. Always handle potential errors gracefully – don't let unexpected object structures crash your application. Consider adding robust error handling (e.g., using try...catch blocks) to your functions.