Phaser: Missing MatterJS TypeScript type definitions for Phaser 3

[colorcube]

I tried Phaser 3.15.1 with TypeScript with definitions from here: https://github.com/photonstorm/phaser3-docs/tree/master/typescript

One missing piece is the type definition for MatterJS which is not existent except some empty classes.

There are MatterJS type definitions: https://www.npmjs.com/package/@types/matter-js

Unfortunately they don't work together. In phaser.d.ts the namespace MatterJS is used in /@types/matter-js it is Matter. Just renaming MatterJS to Matter doesn't work. I guess MatterJS is a wrapper anyway.

Long story short: it would be nice to have TypeScript type definitions for MatterJS in Phaser 3

[glebkudr]

The same issue for me...

[pierpo]

Same issue here 😞
It makes it hard to work with Matter.

Anyone planning on adding the types?

I would love to help but I don't know anything about Typescript.

[matix931]

I just coppied /@types/matter-js namespace definition in to the proper place: Phaser.Physics.Matter.Matter and it is working perfectly!

Example usage:

export class Tower extends GameObjects.Container { }

this.towers = this.add.group({
   classType: Tower as any,
   runChildUpdate: true,
})

let tower = this.towers.create(50, 50) as Tower
// this.matter.add.gameObject adds some additional methods for MatterJS and Phaser compatibility
// those methods are stored in interfaces at Phaser.Physics.Matter.Components.*
const towerMatter = this.matter.add.gameObject(tower, null) as any as Phaser.Physics.Matter.Components.SetBody
towerMatter.setExistingBody(Phaser.Physics.Matter.Matter.Bodies.rectangle(50,50,32,32))

Ready to go phaser.d.ts:
phaser.d.ts.zip
*github is not allowing *.ts files

[steve-salmond]

@matix931 Thanks very much for posting this workaround - most helpful!

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.

[robert-everett-brandt]

@matix931 - When you say "I just coppied /@types/matter-js namespace definition in to the proper place" what exactly did you mean? Moving the @types/matter-js folder to a new location? Or actually copying it's contents to a new spot?

Thanks in advance.

[photonstorm]

This isn't needed any longer, Phaser 3 has its own Matter TypeScript defs, specially created just for its implementation of Matter that comes bundled in the types folder.

[mattmccullo]

I'm having this same issue now introducing this into my Angular project: node_modules/phaser/types/phaser.d.ts(69953,46): error TS2503: Cannot find namespace 'MatterJS'.

I've installed phaser and tried a few times, tried messing around with typing too.

[photonstorm]

phaser.d.ts references matter.d.ts as the first thing it does:

/// <reference types="./matter" />

if it cannot find this, for whatever reason, you'll get complaints about it missing the MatterJS namespace.

The Matter defs are included in the Phaser repo by default. They're in the types folder along with everything else. Ensure your project can see them and includes them, _especially_ if you've just copied the Phaser defs out of the types folder, somewhere else.

[photonstorm]

This issue has been mentioned on Phaser. There might be relevant details there:

https://phaser.discourse.group/t/matter-and-typescript/6994/3