Bug: React-Map createCustomEqual no overloads matches call.

[alexlohe25]

Operating system

Windows 10 21H2

Browser Version

Firefox 102.0

How severe is the bug?

high

Bug description

Checking the custom hook for deep comparisons, the method createCustomEqual in deepCompareEqualsForMaps (line 213, in react-maps/docs/index.tsx), does not recognize both a and b:

(deepEqual) => (a: any, b: any)

throws the following error:

No overload matches this call.
  Overload 1 of 2, '(getComparatorOptions: GetComparatorOptions<undefined>): <A, B>(a: A, b: B, meta?: undefined) => boolean', gave the following error.
    Value of type '(a: any, b: any) => any' has no properties in common with type 'Partial<CreateComparatorCreatorOptions<undefined>>'. Did you mean to call it?
  Overload 2 of 2, '(getComparatorOptions: GetComparatorOptions<undefined>): <A, B>(a: A, b: B, meta?: undefined) => boolean', gave the following error.
    Value of type '(a: any, b: any) => any' has no properties in common with type 'Partial<CreateComparatorCreatorOptions<undefined>>'. Did you mean to call it?ts(2769),

index.d.ts(16, 42): The expected type comes from the return type of this signature.
index.d.ts(16, 42): The expected type comes from the return type of this signature.

And also the deepEqual(a , b); call throws the error:

This expression is not callable.
  Type 'CreateComparatorCreatorOptions<undefined>' has no call signatures.ts(2349)

I guess both things are related to some Typescript error using fast-equals library. I also tried cloning the repository and the same problems are still showing up.

Steps to reproduce

No response

Console log output

No response

[bobvork]

I have this same problem since upgrading fast-equals from version 3.0.2 to 4.0.1, looks like there have been some changes in the createCustomEqual function.

EDIT: for anyone who uses this code in their maps implementation: pinning fast-equals to ~3.0.3 should fix this.

[mstarzak]

For 4.0.1 version I've replaced function deepCompareEqualsForMaps with following code:

import {createCustomEqual, deepEqual} from "fast-equals";

const deepCompareEqualsForMaps = createCustomEqual(() => ({
    areObjectsEqual: (a, b) => {
        if (isLatLngLiteral(a) || a instanceof google.maps.LatLng || isLatLngLiteral(b) || b instanceof google.maps.LatLng) {
            return new google.maps.LatLng(a).equals(new google.maps.LatLng(b));
        }

        return deepEqual(a, b);
    },
}));

Inner arrow function may be extracted to separate function. See fast-equals recipe.

Nevertheless, I haven't dig into this comparison library, so I'm not sure about returning deepEquals() for other objects. Maybe there can be used something more accurate.