TypeScript error for steps and PlainColorObject

[cssinate]

I discovered this error while using Color.steps.

If you paste the following into the playground on colorjs.io (without Typescript) it functions as I'd expect:

let color = new Color("p3", [0, 1, 0]);
color.steps("red", {
    space: "lch",
    outputSpace: "srgb",
    maxDeltaE: 3, // max deltaE between consecutive steps (optional)
    steps: 10 // min number of steps
}).map(step => step.toString({format: 'hex'}));

I get an array of hex codes of all the steps.

When I paste this into my Typescript project, I get the error This expression is not callable. Type 'never' has no call signatures. and shows (property) Color.steps: never

Additionally, if I try to make steps out of a range, I do the following:

const color = new Color("p3", [0, 1, 0]);
const color2 = new Color("red");
const range = color.range(color2, {space: "lch",
outputSpace: "srgb",})
Color.steps(range, {
    maxDeltaE: 3, // max deltaE between consecutive steps (optional)
    steps: 10 // min number of steps
}).map(step => step.to("srgb").toString({format: 'hex'}));

I get an error Property 'to' does not exist on type 'PlainColor'Object'.

My workaround has been to do Color.steps(range, {...}).map(step => new Color(step).....)

[MysteryBlokHed]

For the error on Color#steps, it looks like it's a problem with how I wrote the function overload.

https://github.com/LeaVerou/color.js/blob/2bd19b0a913da3f3310b9d8c1daa859ceb123c37/types/src/interpolation.d.ts#L51-L52

TypeScript seems to prioritize the last signature of overloads when you try to get a function's type, so the line to convert it to a class method for Color causes problems (since it doesn't see Color as the first parameter and just comes up with never instead of a function):

https://github.com/LeaVerou/color.js/blob/2bd19b0a913da3f3310b9d8c1daa859ceb123c37/types/src/index.d.ts#L72

As for the Property 'to' does not exist on type 'PlainColorObject' problem, it looks like the return type for steps was accidentally changed from the actual Color class to a simpler interface.

I'm working on a PR to fix the problems now 😄

[BSoDium]

Hi there, any temp fixes while this hits the npm repository? I'm a bit stuck on that type issue and would love a cleanish workaround 😄

[cssinate]

Hi there, any temp fixes while this hits the npm repository? I'm a bit stuck on that type issue and would love a cleanish workaround 😄

I did mention a workaround at the bottom of my original post

[jgerigmeyer]

There are other fixes (e.g. #332) that are also preventing me from using Color.js until a new release. @LeaVerou Do you have an anticipated schedule for a new release?

[LeaVerou]

@jgerigmeyer There are no blockers, it's just a matter of finding the time to do it. Any chance you may be willing? 🙏🏼

(I suggest we use release-it, it has really helped in other projects of mine)