Phaser 3 Circular Dependency Issue

Question

How to solve a circular dependency in Phaser 3

Background

I'm making a game with Phaser 3, TypeScript and Parcel. I have added some classes that implement some interfaces but the interfaces import and use each other. I started using eslint with airbnb ruleset. One of the rules they implement is import/no-cycle But I feel like my game needs it.

Example code

GameInterface.ts

import { Scene } from 'phaser';
import PlayerInterface from '../../entities/player/PlayerInterface'; // circular

interface GameInterface extends Scene {
  player: PlayerInterface;
}

export default GameInterface;

PlayerInterface.ts

import GameInterface from '../../scenes/game/GameInterface'; // circular

interface PlayerInterface extends Phaser.Physics.Arcade.Sprite {
  scene: GameInterface;
  speed: number;
}

export default PlayerInterface;

Question

A "Player" is added to the "Game" and the Player Class has a scene. So they both need to be in the interface. Since this is only a type file can I ignore this rule? Or is there a cleaver restructure I can do?

Edit 1

Additionally here is a link to the full repo.

Edit 2

Here are the 2 classes that implement these interfaces.

Game.ts

class Game extends Scene implements GameInterface {
  player: PlayerInterface;

  constructor() {
    super({
      key: 'Game',
    });
  }

  preload(): void {
    /* preload code */
  }

  create(): void {
   /* create code */ 
  }
}

Player.ts

class Player extends Phaser.Physics.Arcade.Sprite implements PlayerInterface {
  scene: GameInterface;

  constructor(scene: GameInterface) {
    super(scene, x, y, 'player');
    this.scene = scene;
    this.scene.add.existing(this);
    this.scene.physics.add.existing(this);
  }

  static preload(scene: GameInterface): void {
    /* preload */
  }
}

As you can see the game class creates the player, but the player is also passed a scene when created.

Answer 1

firs of all Circular Dependency means when you have two class A & B:

• Class A uses class B, so A is depended on B
• Class B uses class A, so the B is depended on A too

As the result, on initialing both classes it goes throw an infinite loop because it wants to create class A based on B, and class wants to be created based on class A though it went to benefit loop.

So just cut the unnecessary dependency.

1. So in the Game class, it seems you didn't need to use PlayerInterface.
2. And also u didn't need to extend from Scene and Phaser.Physics.Arcade.Sprite in your interfaces. Because you are extending them in your concrete classes already. Just remove them.

Answer 2

Place both Interfaces in the same file. This will get ride of the circular file loading which is what is tripping you up here.