Import in TypeScript

[vogloblinsky]

After installed this plugin in a Phaser 3 TypeScript project, VSCode and TypeScript doesn't find it.

[mikewesthad]

Hi @vogloblinsky, thanks for opening up an issue. Since I don't work in TS, could you clarify a bit for me? Do you just mean that IntelliSense is missing information as you type? There are no types published for the plugin, so that's to be expected.

Or do you mean that you the TS build process is throwing an error? In that case, does doing something like this fix it (source):

declare var PhaserMatterCollisionPlugin: any;

[vogloblinsky]

Just done that:

npm install --save phaser-matter-collision-plugin

and in my TypeScript main file :

import PhaserMatterCollisionPlugin from 'phaser-matter-collision-plugin';

I think it is related to my tsconfig.json file :

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es6"
  },
  "include": [
    "./src/**/*"
  ]
}

[mikewesthad]

I did a quick check with a demo TS project, and it should work fine as far as I can tell.

With your snippets, it seems you either need to add "allowSyntheticDefaultImports": true to your tsconfig or use import * as PhaserMatterCollisionPlugin from "phaser-matter-collision-plugin";. I'm going to assume your original error was that PhaserMatterCollisionPlugin was undefined after importing? This should fix it.

[mikewesthad]

I also suspect that

    "noImplicitAny": true,
    "module": "es6",
    "target": "es6"

may be problematic for importing a non-ts library into a ts project (my demo project didn't have them).

[mikewesthad]

I'm going to close this issue. I've had some time to look into TypeScript recently and there's nothing in this library that would prevent you from using it in a TS project. The library doesn't have types and wasn't written in TS, but you can still use it. Here's a working CodeSandbox with Phaser + TypeScript + PhaserMatterCollisionPlugin.

It is indeed your tsconfig that is giving you headaches.

• You'll want esModuleInterop set to true (or allowSyntheticDefaultImports). This allows you to do import Phaser from "phaser" instead of import * as Phaser from "phaser" (same applies to PhaserMatterCollisionPlugin).
• You can turn off noImplicitAny to make TS a little more flexible, so that it won't complain about PhaserMatterCollisionPlugin not having types. If you want to keep noImplicitAny on (which I'd recommend), then you're going to need to do a bit more. Check out the types/global.d.ts file in the CodeSandbox with Phaser + TypeScript + PhaserMatterCollisionPlugin). That lets TS know that PhaserMatterCollisionPlugin is in fact a module even though it doesn't have types.

If you are curious, you can read more about the TS support for untyped JS libraries in this issue. It's annoying that this use case isn't better handled currently, but at least it works.

Anyway, hope that helps anyone who stumbles upon this issue.

[TheLucifurry]

Hi, maybe these type declarations can be useful to someone)

// global.d.ts
type TMCEventData = {
  bodyA: MatterJS.Body,
  bodyB: MatterJS.Body,
  gameObjectA: Phaser.GameObjects.GameObject,
  gameObjectB: Phaser.GameObjects.GameObject,
  pair: MatterJS.Pair,
}
type TMCConfig = {
  objectA: MatterJS.Body | MatterJS.Body[]
  objectB?: MatterJS.Body | MatterJS.Body[]
  callback: (event: TMCEventData) => void
  context?: any
}
type TMCUnsubscribeCallback = () => void;
declare namespace Phaser {
  interface Scene {
    matterCollision: {
      addOnCollideStart: (config: TMCConfig) => TMCUnsubscribeCallback
      addOnCollideActive: (config: TMCConfig) => TMCUnsubscribeCallback
      addOnCollideEnd: (config: TMCConfig) => TMCUnsubscribeCallback
    }
  }
}

(Errors possible)

[mikewesthad]

@Wexelus Thanks for contributing these!

It's been a while since this issue was opened, and I now regularly work in TS. I've got a WIP local branch converting this library to TS, so I'll get that pushed soon and keep this thread updated.

[mikewesthad]

Bit of a delay, but the typescript version is live as of v1.0.0

[MEJSIK]

Bit of a delay, but the typescript version is live as of v1.0.0

Yeah, but I have problem with importing the plugin. I got this error:

I'm using Parcel and Typescript

[mikewesthad]

Thanks for reporting this! I just opened a new issue for that #8 and will investigate (hopefully this evening)