Dealing with a reduction in a union type: pointers and advice

Question

Dealing with a reduction in a union type: pointers and advice

I am encountering an issue with the code snippet below: (TS Playground link)

type TDeliveriesStatsDatum<TName = string> = {name: TName; value: number};
type TDeliveriesStatsData<TName = string> = TDeliveriesStatsDatum<TName>[];

interface IDeliveriesStats {
    meta: {
        delivery_count: number;
        transport_count: number;
    };
    progress: TDeliveriesStatsData<"done" | "not_done" | "cancelled">;
    disputes: TDeliveriesStatsData<"disputed" | "undisputed">;
    loading_punctuality: TDeliveriesStatsData<"ontime" | "delayed" | "unknown">;
    unloading_punctuality: TDeliveriesStatsData<"ontime" | "delayed" | "unknown">;
    cmr_document: TDeliveriesStatsData<"done_with_cmr_document" | "done_without_cmr_document">;
    non_cmr_document: TDeliveriesStatsData<
        "done_with_non_cmr_document" | "done_without_non_cmr_document"
    >;

    loading_delay: TDeliveriesStatsData;
    unloading_delay: TDeliveriesStatsData;
    loading_duration: TDeliveriesStatsData;
    unloading_duration: TDeliveriesStatsData;
}

type DeliveriesStatsKeys = "progress" | "disputes" | "cmr_document" | "non_cmr_document";


type TPieChartData<T extends DeliveriesStatsKeys> = {
    augmentedData: {name: string, value: number, dataKey: string, fill: string}[] 
} & {
    [K in IDeliveriesStats[T][0]["name"]]: number;
};

export const formatPieChartData = <K extends DeliveriesStatsKeys>(
    data: IDeliveriesStats[K]
): TPieChartData<K> => {
    return data.reduce(
        (acc: TPieChartData<K>, datum: IDeliveriesStats[K][0]) => {

            acc[datum.name] = datum.value;

            acc.augmentedData.push({
                ...datum,
                dataKey: datum.name,
                fill: "colorsAndLabelsByDataKey[datum.name].fill,"
            });
            return acc;
        },
        {augmentedData: []} as TPieChartData<K>
    );
};

The error message from the compiler states:

This expression is not callable.
  Each member of the union type '{ (callbackfn: (previousValue: TDeliveriesStatsDatum<"done" | "not_done" | "cancelled">, 
currentValue: TDeliveriesStatsDatum<"done" | "not_done" | "cancelled"', 
currentIndex: number, array: TDeliveriesStatsDatum<...>[]) => TDeliveriesStatsDatum<...&...', 
has signatures, but none of those signatures are compatible with each other.

To resolve this issue, I need to properly type IDeliveriesStats or TPieChartData so that TypeScript understands that acc[datum.name] is correctly typed. How can I achieve this?

typescript

Answer 1

Answer №1

One of the issues here arises from the compiler's inability to establish a connection between the type of acc and the type of datum.name, unless these types are explicitly defined in a certain manner, as detailed in microsoft/TypeScript#47109. Without this explicit specification, the correlation is lost, leading the type checking process to treat acc and datum.name as separate entities constrained to unions, resulting in complaints about potential mismatches between source and target properties (as observed in microsoft/TypeScript#30769). While in reality such discrepancies might be unlikely, the compiler is unable to discern this information.

Another issue stems from the fact that the compiler interprets the data.reduce() call as an attempt to invoke a union of generic methods. This occurs because data belongs to a generic type that can only be recognized as an array through eager evaluation, thereby widening K to its constraint. The invoking of unions of generic methods is not fully supported; refer to microsoft/TypeScript#44373 for more insights. Once again, specifying the type of data in a particular manner helps the compiler understand that it pertains to a single array type with a singular generic reduce() method.

To address these concerns, a refactoring approach involves framing everything in terms of a generic key type allowing indexed access into a mapped type... typically derived from a fundamental "mapping" type structure. Here's how this transformation can be accomplished:

// basic mapping type
interface DeliveriesStatsName {
    progress: "done" | "not_done" | "cancelled"
    disputes: "disputed" | "undisputed"
    cmr_document: "done_with_cmr_document" | "done_without_cmr_document"
    non_cmr_document: "done_with_non_cmr_document" | "done_without_non_cmr_document"
}

type DeliveriesStats<K extends keyof DeliveriesStatsName> =
    DeliveriesStatsData<DeliveriesStatsName[K]>;

interface AugmentedData {
    augmentedData: {
        name: string, value: number, dataKey: string, fill: string;
    }[]
}

type BasePieChartData<K extends keyof DeliveriesStatsName> =
    Record<DeliveriesStatsName[K], number>;

type PieChartData<K extends keyof DeliveriesStatsName> =
    BasePieChartData<K> & AugmentedData;

In the above scenario, DeliveriesStats<K> mirrors your IDeliveriesStats[K], but presents an explicit representation linked to the mapping type DeliveriesStatsName. Similarly, PieChartData<K> serves a similar function to TPieChartData<K>, albeit with a specific mapping type depiction.

The intended outcome is for the compiler to recognize that data aligns with a distinct array type, where acc[datum.name] = datum.value indexes into Record<XXX, number> using a XXX typed key thus accepting a number.

While we approach close to achieving these objectives, complete success is elusive:

export const formatPieChartData = <K extends keyof DeliveriesStatsName>(
    data: DeliveriesStats<K>
): PieChartData<K> => {
    return data.reduce((acc, datum) => {

        acc[datum.name] = datum.value; // error!
        // Type 'number' is not assignable to type 'PieChartData<K>[DeliveriesStatsName[K]]'.

        acc.augmentedData.push({
            ...datum,
            dataKey: datum.name,
            fill: "colorsAndLabelsByDataKey[datum.name].fill,"
        });
        return acc;
    }, { augmentedData: [] } as AugmentedData as PieChartData<K>);
    // double assertion needed here to get the compiler to see the types as related

};

The ability to call data.reduce() has been achieved successfully, which is positive. However, errors persist when attempting acc[datum.name] = datum.value. This issue arises due to complications with intersections of generic record types. While there isn't an official report on this matter, a scenario like Record<K, V> & Foo where K is generic can confuse the compiler when indexing with a key K. As a workaround, transitioning Record<K, V> & Foo to just Record<K, V> before performing the index operation seems to resolve the problem. For additional details, refer to this answer.

Let's implement this fix:

export const formatPieChartData = <K extends keyof DeliveriesStatsName>(
    data: DeliveriesStats<K>
): PieChartData<K> => {
    return data.reduce((acc, datum) => {

        const _acc: BasePieChartData<K> = acc; // okay
        _acc[datum.name] = datum.value; // okay

        acc.augmentedData.push({
            ...datum,
            dataKey: datum.name,
            fill: "colorsAndLabelsByDataKey[datum.name].fill,"
        });
        return acc;
    }, { augmentedData: [] } as AugmentedData as PieChartData<K>);

};

The transition from acc to _acc receives approval from the compiler as safe, enabling successful assignment in _acc[datum.name] as intended!

Playground link to code

Answer 2

One of the issues here arises from the compiler's inability to establish a connection between the type of acc and the type of datum.name, unless these types are explicitly defined in a certain manner, as detailed in microsoft/TypeScript#47109. Without this explicit specification, the correlation is lost, leading the type checking process to treat acc and datum.name as separate entities constrained to unions, resulting in complaints about potential mismatches between source and target properties (as observed in microsoft/TypeScript#30769). While in reality such discrepancies might be unlikely, the compiler is unable to discern this information.

Another issue stems from the fact that the compiler interprets the data.reduce() call as an attempt to invoke a union of generic methods. This occurs because data belongs to a generic type that can only be recognized as an array through eager evaluation, thereby widening K to its constraint. The invoking of unions of generic methods is not fully supported; refer to microsoft/TypeScript#44373 for more insights. Once again, specifying the type of data in a particular manner helps the compiler understand that it pertains to a single array type with a singular generic reduce() method.

To address these concerns, a refactoring approach involves framing everything in terms of a generic key type allowing indexed access into a mapped type... typically derived from a fundamental "mapping" type structure. Here's how this transformation can be accomplished:

// basic mapping type
interface DeliveriesStatsName {
    progress: "done" | "not_done" | "cancelled"
    disputes: "disputed" | "undisputed"
    cmr_document: "done_with_cmr_document" | "done_without_cmr_document"
    non_cmr_document: "done_with_non_cmr_document" | "done_without_non_cmr_document"
}

type DeliveriesStats<K extends keyof DeliveriesStatsName> =
    DeliveriesStatsData<DeliveriesStatsName[K]>;

interface AugmentedData {
    augmentedData: {
        name: string, value: number, dataKey: string, fill: string;
    }[]
}

type BasePieChartData<K extends keyof DeliveriesStatsName> =
    Record<DeliveriesStatsName[K], number>;

type PieChartData<K extends keyof DeliveriesStatsName> =
    BasePieChartData<K> & AugmentedData;

In the above scenario, DeliveriesStats<K> mirrors your IDeliveriesStats[K], but presents an explicit representation linked to the mapping type DeliveriesStatsName. Similarly, PieChartData<K> serves a similar function to TPieChartData<K>, albeit with a specific mapping type depiction.

The intended outcome is for the compiler to recognize that data aligns with a distinct array type, where acc[datum.name] = datum.value indexes into Record<XXX, number> using a XXX typed key thus accepting a number.

While we approach close to achieving these objectives, complete success is elusive:

export const formatPieChartData = <K extends keyof DeliveriesStatsName>(
    data: DeliveriesStats<K>
): PieChartData<K> => {
    return data.reduce((acc, datum) => {

        acc[datum.name] = datum.value; // error!
        // Type 'number' is not assignable to type 'PieChartData<K>[DeliveriesStatsName[K]]'.

        acc.augmentedData.push({
            ...datum,
            dataKey: datum.name,
            fill: "colorsAndLabelsByDataKey[datum.name].fill,"
        });
        return acc;
    }, { augmentedData: [] } as AugmentedData as PieChartData<K>);
    // double assertion needed here to get the compiler to see the types as related

};

The ability to call data.reduce() has been achieved successfully, which is positive. However, errors persist when attempting acc[datum.name] = datum.value. This issue arises due to complications with intersections of generic record types. While there isn't an official report on this matter, a scenario like Record<K, V> & Foo where K is generic can confuse the compiler when indexing with a key K. As a workaround, transitioning Record<K, V> & Foo to just Record<K, V> before performing the index operation seems to resolve the problem. For additional details, refer to this answer.

Let's implement this fix:

export const formatPieChartData = <K extends keyof DeliveriesStatsName>(
    data: DeliveriesStats<K>
): PieChartData<K> => {
    return data.reduce((acc, datum) => {

        const _acc: BasePieChartData<K> = acc; // okay
        _acc[datum.name] = datum.value; // okay

        acc.augmentedData.push({
            ...datum,
            dataKey: datum.name,
            fill: "colorsAndLabelsByDataKey[datum.name].fill,"
        });
        return acc;
    }, { augmentedData: [] } as AugmentedData as PieChartData<K>);

};

The transition from acc to _acc receives approval from the compiler as safe, enabling successful assignment in _acc[datum.name] as intended!

Playground link to code

Dealing with a reduction in a union type: pointers and advice

Answer №1

Similar questions

Is the Prisma model not reachable through Prisma Client?

Is it possible to delay the execution of the onkeypress event by one second in order to prevent it from triggering a method multiple times consecutively?

The problem encountered with the Enzyme mount API is a TypeError where it is unable to read the property 'find' of an undefined variable

Interactive Bootstrap 4 button embedded within a sleek card component, complete with a dynamic click event

Unraveling the secrets of Rxjs chaining

I am experiencing issues with my HTML select list not functioning properly when utilizing a POST service

When the key property is utilized, the state in react useState is automatically updated; however, for updating without it, the useEffect or a

Accessing User Session with NextAuth in Application Router API Route

Postponing a function invocation in an Angular/TypeScript application

tips for populating input form with initial retrieved data

Passing properties from the parent component to the child component in Vue3JS using TypeScript

Display elements conditionally based on the result of an asynchronous operation within an ng

Issue: Unable to locate API compiler-cli, function __NGTOOLS_PRIVATE_API_2

What are the best practices for utilizing generics effectively?

Issues with PrimeNG listbox functionality in Angular 2

Exploring Tailwind's flexibility with custom color schemes

The element 'fontFamily' is not recognized within the 'ThemeOptions' type in MUI theming

Placing options and a clickable element within a collapsible navigation bar

Having trouble accessing a downloaded image saved in local files from Amazon S3 using the AWS SDK in Node.js

Tips for preventing repetition in http subscribe blocks across various components