Saving type while mutating accumulator in Array.reduce in Typescript

Question

Saving type while mutating accumulator in Array.reduce in Typescript

This particular function is designed to add a deeply nested property to an object by taking a string argument in the format of 'a.very.deep.property'.

function nest<B extends obj, V = unknown>(
    target: B,
    structure: string,
    value: V,
) {
    const properties = structure.split('.');
    const result = target;
    properties.reduce((acc, property, i, arr) => {
        const isLastProperty = i === arr.length - 1;
        if (!(property in acc))
            acc[property] = isLastProperty ? value : {};
        return acc[property];
    }, target);
    return target;
}

While this function works well in JavaScript, it encounters an error in TypeScript where

Type 'string' cannot be used to index type 'B'

when attempting to assign accum[property]. One could typically avoid mutating acc by creating another object with intersection type, however using reduce implies that mutation of acc inside the callback is necessary to obtain the final result.

(accum as B & { [property: string]: obj | V })[property] = isLastProperty ? value : {};

also does not solve the issue, resulting in the error

type 'string' cannot be used to index type 'B & { [property: string]: obj | V;

. What would be the best approach in this situation?

typescript object mutation

Answer 1

Answer №1

Trying to achieve this in TypeScript may pose some challenges due to its static typing nature, while the resulting array of split properties is dynamic and often only known at runtime.

Despite this, it can still be done with a more verbose approach:

function nest<B extends object, V = unknown>(
    target: B,
    structure: string,
    value: V,
) {
    const properties = structure.split('.');
    const result = target;
    const lastProp = properties.pop();
    const lastObj = properties.reduce((acc, property) => {
        if (!(property in acc))
            acc[property] = {};
        const nestedVal = acc[property];
        if (!nestedVal || typeof nestedVal !== 'object') {
            throw new Error();
        }
        return nestedVal;
    }, target);
    lastObj[lastProp] = value;
    return target;
}

The key aspects to consider are:

Appending the final nested value after the reduce loop to ensure proper typing within the callback function
Throwing an error if the property does not exist or is not an object to enforce type safety
Storing acc[property] in a separate variable for better type narrowing as direct narrowing using in might not work effectively

Answer 2

Trying to achieve this in TypeScript may pose some challenges due to its static typing nature, while the resulting array of split properties is dynamic and often only known at runtime.

Despite this, it can still be done with a more verbose approach:

function nest<B extends object, V = unknown>(
    target: B,
    structure: string,
    value: V,
) {
    const properties = structure.split('.');
    const result = target;
    const lastProp = properties.pop();
    const lastObj = properties.reduce((acc, property) => {
        if (!(property in acc))
            acc[property] = {};
        const nestedVal = acc[property];
        if (!nestedVal || typeof nestedVal !== 'object') {
            throw new Error();
        }
        return nestedVal;
    }, target);
    lastObj[lastProp] = value;
    return target;
}

The key aspects to consider are:

Appending the final nested value after the reduce loop to ensure proper typing within the callback function
Throwing an error if the property does not exist or is not an object to enforce type safety
Storing acc[property] in a separate variable for better type narrowing as direct narrowing using in might not work effectively

Answer 3

Answer №2

It was quite a challenge, but after utilizing Typescript 4 template literals I successfully created a type-safe version of this solution.

    type DeepType<T, S extends string> = T extends object
            ? S extends `${infer Key}.${infer NextKey}`
                ? Key extends keyof T
                    ? DeepType<T[Key], NextKey>
                    : false
                : S extends keyof T
                ? T[S]
                : never
            : T;
        
    type RecursiveKeyOf<TObj extends object> = {
            [TKey in keyof TObj & (string | number)]: RecursiveKeyOfHandleValue<
                TObj[TKey],
                `${TKey}`
            >;
        }[keyof TObj & (string | number)];
        type RecursiveKeyOfInner<TObj extends object> = {
            [TKey in keyof TObj & (string | number)]: RecursiveKeyOfHandleValue<
                TObj[TKey],
                RecursiveKeyOfAccess<TKey>
            >;
        }[keyof TObj & (string | number)];
        type RecursiveKeyOfHandleValue<
            TValue,
            Text extends string
        > = TValue extends object
            ? Text | `${Text}${RecursiveKeyOfInner<TValue>}`
            : Text;
        type RecursiveKeyOfAccess<TKey extends string | number> =
            | `['${TKey}']`
            | `.${TKey}`;
type obj = Record<string, any>;

export function addNestedProperty<
    B extends Record<string, any>,
    P extends string & RecursiveKeyOf<B>,
    V extends DeepType<B, P>
>(
    base: B,
    path: P,
    value: V,
    o: { overwrite: boolean } = { overwrite: true },
): B {
    const properties = path.split('.') as Array<string & keyof B>;
    const lastProperty = properties.pop();
    if (!lastProperty)
        throw new Error('path argument must contain at least one property');

    function isObject(arg: unknown): arg is object {
        return typeof arg === 'object' && arg !== null;
    }

    const lastObj = properties.reduce((acc, property) => {
        if (!(property in acc)) acc[property] = {} as any;
        else if (!isObject(acc) && !o.overwrite)
            throw new Error('you are trying to overwrite existing property');
        return acc[property];
    }, base);

    lastObj[lastProperty] = value;
    return base;
}

Answer 4

It was quite a challenge, but after utilizing Typescript 4 template literals I successfully created a type-safe version of this solution.

    type DeepType<T, S extends string> = T extends object
            ? S extends `${infer Key}.${infer NextKey}`
                ? Key extends keyof T
                    ? DeepType<T[Key], NextKey>
                    : false
                : S extends keyof T
                ? T[S]
                : never
            : T;
        
    type RecursiveKeyOf<TObj extends object> = {
            [TKey in keyof TObj & (string | number)]: RecursiveKeyOfHandleValue<
                TObj[TKey],
                `${TKey}`
            >;
        }[keyof TObj & (string | number)];
        type RecursiveKeyOfInner<TObj extends object> = {
            [TKey in keyof TObj & (string | number)]: RecursiveKeyOfHandleValue<
                TObj[TKey],
                RecursiveKeyOfAccess<TKey>
            >;
        }[keyof TObj & (string | number)];
        type RecursiveKeyOfHandleValue<
            TValue,
            Text extends string
        > = TValue extends object
            ? Text | `${Text}${RecursiveKeyOfInner<TValue>}`
            : Text;
        type RecursiveKeyOfAccess<TKey extends string | number> =
            | `['${TKey}']`
            | `.${TKey}`;
type obj = Record<string, any>;

export function addNestedProperty<
    B extends Record<string, any>,
    P extends string & RecursiveKeyOf<B>,
    V extends DeepType<B, P>
>(
    base: B,
    path: P,
    value: V,
    o: { overwrite: boolean } = { overwrite: true },
): B {
    const properties = path.split('.') as Array<string & keyof B>;
    const lastProperty = properties.pop();
    if (!lastProperty)
        throw new Error('path argument must contain at least one property');

    function isObject(arg: unknown): arg is object {
        return typeof arg === 'object' && arg !== null;
    }

    const lastObj = properties.reduce((acc, property) => {
        if (!(property in acc)) acc[property] = {} as any;
        else if (!isObject(acc) && !o.overwrite)
            throw new Error('you are trying to overwrite existing property');
        return acc[property];
    }, base);

    lastObj[lastProperty] = value;
    return base;
}

Saving type while mutating accumulator in Array.reduce in Typescript

Answer №1

Answer №2

Similar questions

Struggling to retrieve the Object from a JSON file located at a specific URL

Creating a customized HTTP class for Bootstrap in Angular 2 RC 5

Encoding the img src is necessary when assigning it to an SVG element

Error causing expression change after Angular binding has been checked

Migration of old AngularJS to TypeScript in require.js does not recognize import statements

Issues have arisen with the ReactNative Jest snapshot test, resulting in a

An issue has been encountered within the node modules directory at the path node_modules/@angular/flex-layout/extended/typings

Exploring the concept of using a single route with multiple DTOs in NestJS

Animating Chart.js inside an Angular mat-tab component

`AngularJS Voice Recognition Solutions`

What could be the reason for my npm package installed globally to not be able to utilize ts-node?

Transform Text into Numeric Value/Date or Null if Text is Invalid

No routes found to match - Issue encountered in Ionic 5 Angular project

How can I duplicate an array of objects in javascript?

What is the best way to execute 2 statements concurrently in Angular 7?

Is there a way in Typescript to dynamically create a type based on an array of potential values?

Angular 11 causing UI flicker upon array modifications

Ways to convert all keys to uppercase in an array of objects?

The declaration file for the 'express' module could not be located

Troubleshooting Problem with GraphQL and TypeORM: Retrieving Products Along with Their Images