I'm trying to use functions from Observable Plot example with marimekko chart in my project with typescript and got this error on this string:

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

The code is:

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),
    ]
}

Any ideas how to fix it?

CodePudding user response：

You function returns setXz the following type :

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

Note the union, it contains an object which is not callable.

That happens because TS does not infer the tuple but returns an array of the unions of the possible types.

You should at least type the return of you function.

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),
  ]
}

Note that I would advise use to not use any but to specify the types of the parameters & return.