Property 'color' does not exist on type 'GameObj<RectComp | PosComp | AreaComp>'.ts(2339)

[ganevdev]

For some reason typescript says that color does not exist in the game object (GameObj), here is an example code:

const k = kaboom({
  width: 800,
  height: 500,
  global: false,
  root: forCanvas,
  debug: true,
});

const btn = k.add([
  k.rect(240, 80, { radius: 8 }),
  k.pos(k.vec2(200, 100)),
  k.area(),
]);

btn.onHoverUpdate(() => {
  btn.color = k.hsl2rgb(1, 0.6, 0.7);
});

Error:

Property 'color' does not exist on type 'GameObj<RectComp | PosComp | AreaComp>'.ts(2339)
any

In vscode it looks like this:

The code itself works, problem in types. I'm using typescript 5.3.3, I tried version 5.2.2, but it didn't help.

kaboom version 3000.1.17

[slmjkdbtl]

Sorry if the doc isn't too clear on that, color isn't built-in in game objects, you need to add the color() component

const btn = k.add([
  k.rect(240, 80, { radius: 8 }),
  k.pos(k.vec2(200, 100)),
  k.area(),
  k.color(0, 0, 255),
]);

[ganevdev]

Sorry if the doc isn't too clear on that, color isn't built-in in game objects, you need to add the color() component

const btn = k.add([
  k.rect(240, 80, { radius: 8 }),
  k.pos(k.vec2(200, 100)),
  k.area(),
  k.color(0, 0, 255),
]);

Got it, thanks!

When I writing this code, I was guided by this example: https://kaboomjs.com/play?example=button, but it is not correct? btn created without color():

const btn = add([
  rect(240, 80, { radius: 8 }),
  pos(p),
  area(),
  scale(1),
  anchor("center"),
  outline(4),
])

But further btn.color = hsl2rgb((t / 10) % 1, 0.6, 0.7):

btn.onHoverUpdate(() => {
  const t = time() * 10
  btn.color = hsl2rgb((t / 10) % 1, 0.6, 0.7)
  btn.scale = vec2(1.2)
  setCursor("pointer")
})

I assume that if it was typescript, it would throw an error?

[lajbel]

In fact, color is exposed to all game objects, as pos for example

kaboom()
loadBean()

const bean = add([
    sprite("bean"),a
]);

bean.color = RED;
bean.pos = vec2(20, 20);

This works in playground, but will throw an error on TypeScript due to GameObjRaw doesn't have these properties, only PosComp/ColorComp, maybe we should clarify on examples or even in the base interfaces of Kaboom.js