Challenges arise when employing reduce with data types in an object

Question

Challenges arise when employing reduce with data types in an object

I want to transform an object in a function so that all keys are converted from Camel case to Pascal case.

My Declaration:

export interface INodeMailerResponseLower {
    accepted: string[];
    rejected: string[];
    envelopeTime: number;
    messageTime: number;
    messageSize: number;
    response: string;
    messageId: string;
}

export interface INodeMailerResponseUpper {
    Accepted: string[];
    Rejected: string[];
    EnvelopeTime: number;
    MessageTime: number;
    MessageSize: number;
    Response: string;
    MessageId: string;
}

My Implementation:

import { upperFirst } from 'lodash';

const response: INodeMailerResponseLower;   // << insert object values here
const formattedResponse: INodeMailerResponseUpper = Object.keys(response).reduce((acc, key) => {
     acc[upperFirst(key)] = response[key];
     return acc;
   }, {});

An Error Occured:

Type '{}' is missing the following properties from type 'INodeMailerResponseUpper': Accepted, Rejected, EnvelopeTime, MessageTime, and 3 more.ts(2740)

Inquiry: How can I correctly define the type for my accumulator when using reduce method?

typescript

Answer 1

Answer №1

When using the

Partial<INodeMailerResponseUpper>

for the reduce type parameter, you can ensure that acc has the correct type to assign properties to it. However, a cast to INodeMailerResponseUpper is necessary because TypeScript may not recognize that the final result will contain all required properties.

One way to achieve this is through multiple type assertions, as shown in the following example:

const formattedResponse = Object.keys(response)
    .reduce<Partial<INodeMailerResponseUpper>>((acc, key) => {
        (acc[upperFirst(key) as keyof INodeMailerResponseUpper] as unknown) =
            response[key as keyof INodeMailerResponseLower];
        return acc;
    }, {}) as INodeMailerResponseUpper;

Alternatively, you can enhance the type of lodash’s upperFirst function by declaring it in TypeScript 4.1:

declare module 'lodash' {
    interface LoDashStatic {
        upperFirst<S extends string = ''>(string?: S): Capitalize<S>;
    }
}

const formattedResponse = (Object.keys(response) as (keyof INodeMailerResponseLower)[])
    .reduce<Partial<INodeMailerResponseUpper>>((acc, key) => {
        // Using `as unknown` here avoids potential complaints from TypeScript
        (acc[upperFirst(key)] as unknown) = response[key];
        return acc;
    }, {}) as INodeMailerResponseUpper;

It's worth noting that some level of type assertion may still be necessary in these scenarios.

Answer 2

When using the

Partial<INodeMailerResponseUpper>

for the reduce type parameter, you can ensure that acc has the correct type to assign properties to it. However, a cast to INodeMailerResponseUpper is necessary because TypeScript may not recognize that the final result will contain all required properties.

One way to achieve this is through multiple type assertions, as shown in the following example:

const formattedResponse = Object.keys(response)
    .reduce<Partial<INodeMailerResponseUpper>>((acc, key) => {
        (acc[upperFirst(key) as keyof INodeMailerResponseUpper] as unknown) =
            response[key as keyof INodeMailerResponseLower];
        return acc;
    }, {}) as INodeMailerResponseUpper;

Alternatively, you can enhance the type of lodash’s upperFirst function by declaring it in TypeScript 4.1:

declare module 'lodash' {
    interface LoDashStatic {
        upperFirst<S extends string = ''>(string?: S): Capitalize<S>;
    }
}

const formattedResponse = (Object.keys(response) as (keyof INodeMailerResponseLower)[])
    .reduce<Partial<INodeMailerResponseUpper>>((acc, key) => {
        // Using `as unknown` here avoids potential complaints from TypeScript
        (acc[upperFirst(key)] as unknown) = response[key];
        return acc;
    }, {}) as INodeMailerResponseUpper;

It's worth noting that some level of type assertion may still be necessary in these scenarios.

Challenges arise when employing reduce with data types in an object

Answer №1

Similar questions

Does the routing in Angular 2 get disrupted by parameter breaks in sub-modules?

Launching a new tab with a specific URL using React

Experiencing an error message stating 'The token ${Token[TOKEN.72]} is invalid' while using cdk synth, specifically when trying to assign the value of ec2.Vpc.cidr from cfnParameter.value

Broaden your interfaces by implementing multiple interfaces with Zod

Swapping out 'useResult' in graphql for Vue and Apollo: A step-by-step guide

Achieving CommonJS imports compilation with Typescript

Find the calculated values within an Angular Material table

Creating a new list by grouping elements from an existing list

Looking to retrieve the AssetLoadedFunc properties in the LoadAssets function? Wondering if you should use TypeScript or JavaScript

Guide to making a TreeView in Angular 2 with Typescript

The canDeactivate function in the Angular 2 router can modify the router state even if I choose to cancel an action in the confirmation popup

Using JavaScript library xterm.js in an Ionic 3 application

I'm trying to figure out the best way to successfully pass a prop to another component in TypeScript without running into the frustrating issue of not being able to

transferring data between components in a software system

Create a debounced and chunked asynchronous queue system that utilizes streams

How can I integrate a timer into an Angular carousel feature?

Enhance your TypeScript arrays using custom object equality functions

No slides will be displayed in Ionic 2 once the workout is completed

Steps to troubleshoot a simple function that manages asynchronous tasks

Assign a value to a variable using a function in Typescript