TypeScript Errors

[subhoghoshX]

Version

• Phaser Version: 3.55.2+

• Operating system: any

• Browser: any

Description

When trying to recreate the game using the website's guide, I encountered a couple of TypeScript errors.

In a section while iterating the stars it shows setBounceY not found.

const stars = this.physics.add.group({
  key: "star",
  repeat: 11,
  setXY: { x: 12, y: 0, stepX: 70 },
});

stars.children.iterate((child) => {
  child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8)); // Here it says `setBounceY` doesn't exist.
  return null;
});

And just after that, in the tutorial, where it shows how to detect overlap, the doc shows to use null and this as the 3rd & 4th arguments.

But it shows a type error when I pass null.

Looking at the type it look like it expects something else:

I encountered the above errors in [email protected]+ including the latest beta 16.

[subhoghoshX]

PS: I know creating an issue is easier than fixing it. I'm quite familiar with JS/TS, if anyone can point me in the right direction, I can try fixing it.

[photonstorm]

You need to cast 'child' in the iterate handler or TS won't understand what it is.

[subhoghoshX]

Cast 'child' to what type?

[photonstorm]

To what it is - an Phaser.Physics.Arcade.Sprite.

[subhoghoshX]

Ah that fixes it. Thanks much. There was no obvious way for me to know it.

[subhoghoshX]

One more question. What about the null error in the this.physics.add.overlap() function? It seems to me that the last two arguments are not needed.

[photonstorm]

You can set it to undefined instead of null to make the TS defs happy.

The final parameter is the scope of the callback, which is extremely important.

[subhoghoshX]

Yeah I also used undefined there. Didn't know the final parameter was so important! seemed to work without it. Thanks for clarifying. Means a lot.

[photonstorm]

It sets the JS scope that the callback is invoked within. If you replace the handler with an arrow function, that will do the same thing (bound to the current scope, of course), so in that case, you can ignore it. But if you don't use an arrow function (because you wish to set the scope directly to a Game Object, for example), then that parameter is the easiest way to do it.

[Robouste]

Here is a proper solution to this issue:

const stars = this.physics.add.group({
  key: "star",
  repeat: 11,
  setXY: { x: 12, y: 0, stepX: 70 },
});

stars.children.iterate((child) => {
  if (!(child instanceof Phaser.Physics.Arcade.Sprite)) {
    throw Error("Child is not an instance of Phaser.Physics.Arcade.Sprite");
  }

  child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8)); 

  return true;
});

No dirty casting, proper type handling. Phaser should really be more Typescript friendly.