The function you are trying to call is not valid... the specified type does not have any call signatures [ts 2349

Having some trouble using functions from Observable Plot example with a marimekko chart in my TypeScript project. I encountered an error on this particular line:

   setXz(I.map((i) => sum.get(X[i])))

The code snippet causing the issue is as follows:

function marimekko({ x, y, z, inset = 0.5, ...options }) {
    const [Xz, setXz] = lazyChannel(z)
    const {
        y1,
        y2,
        transform: stackY,
    } = Plot.stackY({ offset: "expand", x, y: z })
    const {
        x1,
        x2,
        transform: stackX,
    } = Plot.stackX({ offset: "expand", y, x: Xz })
    return {
        x1,
        x2,
        y1,
        y2,
        transform: (data, facets) => {
            const I = d3.range(data.length)
            const X = Plot.valueof(data, x)
            const Z = Plot.valueof(data, z)
            const sum = d3.rollup(
                I,
                (I) => d3.sum(I, (i) => Z[i]),
                (i) => X[i]
            )
            setXz(I.map((i) => sum.get(X[i])))
            stackX(data, facets)
            stackY(data, facets)
            return { data, facets }
        },
        inset,
        ...options,
    }
}

function lazyChannel(source) {
    let value
    return [
        {
            transform: () => value,
            label:
                typeof source === "string"
                    ? source
                    : source
                    ? source.label
                    : undefined,
        },
        (v) => (value = v),
    ]
}

Could anyone suggest a solution to resolve this error?

Answer №1

Your function will return a type that consists of either a function or an object with properties transform and label.

((v: any) => any) | {
  transform: () => any;
  label: any;
}

It's important to note the union here, as it includes an object that is not callable.

This occurs because TypeScript does not infer the tuple but instead returns an array of possible types within the union.

It would be advisable to specify the return type of your function at the very least.

function lazyChannel(source): [{ transform: () => any, label: any}, ((v: any) => any)] {
  let value
  return [
      {
          transform: () => value,
          label:
              typeof source === "string"
                  ? source
                  : source
                  ? source.label
                  : undefined,
      },
      (v) => (value = v),
  ]
}

Keep in mind that it is recommended to avoid using any, and instead, specify the types for parameters and return values.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing a function that includes showModalDialog outside of an iframe might display the incorrect page

This website structure looks like: `--main.html `--dialog.html `--folder `--iframe.html The code for each page is as follows: main.html: <html> <head> <script type="text/javascript"> function t ...

Issues with displaying ngAnimate animations

For the past 10 hours, I've been attempting to get my animations to function properly. It seems that they only work when I include the animate.css stylesheet and use the "animated classname". However, when I try to create custom entrance and exit anim ...

Choosing the subsequent element that comes before

<tr class="main"></tr> <tr class="emails-details"> <button>some button</button> </tr> <tr class="main"></tr> <tr class="emails-details"> <button>some button</button> </tr> &l ...

Waiting for state changes in React by using the UseState Hook

I am currently working on a function that manages video playback when clicked, and I need to set consecutive states using the useState hook. However, I want to ensure that the first state is completed before moving on to the next setState without relying ...

Having trouble getting Material-UI classes to work with external SVG icons?

I recently crafted a Material-UI persistent drawer that contains a list item component designed to alter the icon color upon user interaction. However, my styling adjustments only seem to apply to Material-UI icons and not external SVG ones. If you'r ...

Retrieve the outermost shell of the VUEjs wrapper test-utils

While working on a VueJS test, I encountered an issue where accessing the outermost layer of HTML seemed impossible. No matter what methods I tried, the outermost layer was always ignored. Is there a way to gain access to this outermost layer so that I c ...

Angular data binding with an object instead of an array list

Currently, I am implementing Angular and attempting to iterate through an object. Data in JSON format employee {"fName":"mike","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ebb3b3b3b3b3b3b3b3ab83849f868a8287c588848 ...

Removing a row from MySQL using JQuery Ajax

Hello there! I'm currently facing an issue while trying to remove a row from a MySQL database using PHP and AJAX. I initially thought it would be a simple task with $.ajax {}, but unfortunately, the row is not getting deleted for some reason. Here&apo ...

What is the typical response time for a request using javascript axios?

In my current application, I am fetching data from an API and everything is functioning correctly. However, I am interested in determining the duration of each request in milliseconds. To achieve this, I implemented interceptors using axios. The challenge ...

Finally, $.getJSON has been triggered

When I click on an element, I want to open a bootstrap modal. The modal contains values retrieved from an ajax call using getJSON. However, the issue is that the getJSON function is only called after the jQuery function has finished executing. Below is my ...

Click a button to spin images around

Is there a way to rotate an image by 90 degrees, 180 degrees, and 360 degrees with the click of a button? <img class="test" id="image" src="images/image" alt="This is the Display Image" /> I attempted to use the following script, but was not satisf ...

Angular 2's ng-required directive is used to specify that

I have created a model-driven form in Angular 2, and I need one of the input fields to only show up if a specific checkbox is unchecked. I was able to achieve this using *ngIf directive. Now, my question is how can I make that input field required only whe ...

Develop a React npm package with essential dependencies included

I have been working on developing a UI library using React ts. As part of this project, I integrated an external library called draft-js into the package. However, when I attempt to implement my library in another project, I keep encountering errors. Despi ...

Any property modified by an event handler will consistently appear in its original form

Every second, a simple function is called using setInterval, with the goal of determining mouse or keyboard activity. The variable that tracks the activity is updated, but it always remains set to 0 despite the fact that console.log statements are being e ...

What is the method for utilizing Tuple elements as keys in a Mapped Type or template literal within typescript?

Is there a specific way to correctly type the following function in TypeScript? Assuming we have a function createMap() that requires: a prefix (e.g. foo) and a tuple of suffixes (e.g. ['a', 'b', 'c']) If we call createMap(& ...

Retrieving the latest status array by index using Typescript in Angular

Need help with this code logic. I am working on an array and function : import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.compon ...

Creating a structured file hierarchy by extracting files from Amazon S3 and transferring them for storage in Firebase

I am looking to retrieve key/value pairs from Amazon S3 and then store some of the obtained information in Firebase to build a file system in AngularJS. This question focuses only on storing in Firebase. It is essential to be able to create an unlimited ...

Having trouble installing the gecko driver for running protractor test scripts on Firefox browser

Looking to expand my skills with the "Protractor tool", I've successfully run test scripts in the "Chrome" browser. Now, I'm ready to tackle running tests in "Firefox," but I know I need to install the "gecko driver." Can anyone guide me on how t ...

Error: The post method in $setup is not defined in Vue Composition API

Dealing with a frustrating issue in my Vue application. One page is functioning perfectly fine, while the other is causing trouble by displaying this error: The first page loads a collection of wordpress posts (Blog.vue) without any issues, but the second ...

Instead of pushing multiple items, focus on pushing only one item at a time

I've encountered an issue while attempting to add a new item to my favlist. Using a for loop, I check if the item already exists in the favlist. However, instead of adding the new item only once, it ends up being added multiple times. What would be ...