[@types/masonry-layout] is missing direct calls to Masonry.data() #75600

Thanks for the discussion about "masonry-layout", some useful links for everyone:

• npm
• DT
• Related discussions

Pinging the DT module owners: @m-a-wilson, @WarriorRocker.

This looks like a declaration bug in @types/masonry-layout, not a problem with your JavaScript call.

The current declaration puts data on the instance:

data?(element: Element): Masonry;

But Masonry's API exposes it as a static method, so the declaration should be on the class itself:

declare class Masonry {
    static data(element: Element): Masonry | undefined;

    // existing constructors and instance methods...
}

undefined is useful here because no instance is returned when the element has not been initialized as a Masonry container.

With that declaration, the intended usage is:

const element = document.getElementById("extension-masonry-row");

if (element) {
    const masonry = Masonry.data(element);
    masonry?.layout?.();
}

Until the DefinitelyTyped package is updated, a narrow local workaround is:

const MasonryWithData = Masonry as typeof Masonry & {
    data(element: Element): Masonry | undefined;
};

const element = document.getElementById("extension-masonry-row");

if (element) {
    MasonryWithData.data(element)?.layout?.();
}

Checking "data" in Masonry avoids the compiler error at the call site, but it hides the real issue: the package declaration has the method on the wrong side of the class. The fix should move data from the instance members to a static data(...) declaration and add a declaration test for the static call.

Current declaration: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/masonry-layout/index.d.ts