使用 TypeScript 的 Phaser 上的联合类型不存在属性

Question

用 Phaser 3 制作游戏，但因为我想要为了在线部署它们，我正在转换代码以与 TypeScript 一起使用，因为我正在通过 Ionic 5 应用程序准备它。在教程中，我应该设置玩家精灵的速度。为了清楚起见，我必须创建两个类，Entities.js（我将其创建为entities.ts）和Player.js（我将其制作为player.ts）。实体应该是 的扩展Phaser.GameObjects.Sprite，而玩家应该是一个实体，扩展了实体类。到目前为止，除了到达有关设置玩家速度的部分外，我一切正常。

这是我的entities.ts：

class Entity extends Phaser.GameObjects.Sprite {

  constructor(scene, x, y, key, type) {

    super(scene, x, y, key);

    this.scene = scene;

    this.scene.add.existing(this);

    this.scene.physics.world.enableBody(this, 0);

    this.setData('type', type);

    this.setData('isDead', false);

  }

}

这是我的player.ts：

class Player extends Entity {

  constructor(scene, x, y, key) {

    super(scene, x, y, key, 'Player');

    this.setData('speed', 200);

    this.play('sprPlayer');

  }

  moveUp() {

    this.body.velocity.y = -this.getData('speed');

  }

  moveDown() {

    this.body.velocity.y = this.getData('speed');

  }

  moveLeft() {

    this.body.velocity.x = -this.getData('speed');

  }

  moveRight() {

    this.body.velocity.x = this.getData('speed');

  }

  update() {

    this.body.setVelocity(0, 0);

  }

}

一旦我写了行，this.body.setVelocity(0, 0)，我得到一个错误：Property 'setVelocity' does not exist on type 'Body | StaticBody | BodyType'. Property 'setVelocity' does not exist on type 'StaticBody'。显然，精灵的主体可以用于Body、StaticBody或BodyType对象。检查文档，类Bodyhttps://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Body.html允许该setVelocity功能发生，而StaticBodyhttps://photonstorm.github.io/ Phaser3-docs/Phaser.Physics.Arcade.StaticBody.html没有。

TypeScript 是否期望每种可能的类型都支持要使用的函数？body如果是这样，有没有办法让我指定我正在使用什么类型？我尝试解析无济于事。

Answer 1

错误消息表明您的玩家主体是这些类型之一'Body | StaticBody | BodyType'，但 StaticBody 没有setVelocity方法。Typescript 具有类型保护的概念来处理这种情况，您可以在其中使用具有不同成员的联合类型。这里的解决方案是检查 this.body 是否有 setVolicity 函数。update() {    // when true typescript know it is not a StaticBody    if ("setVelocity" in this.body)    this.body.setVelocity(0, 0);  }您还可以定义自定义类型保护函数并在 if 语句中使用它，如下所示：//custom typeguard function with the return type 'body is Body'    function isBody(body: Body | StaticBody): body is Body {  return (body as Body).setVelocity !== undefined;}if (isBody(this.body)) {  this.body.setVelocity(5); }

Answer 2

正如 jcalz 所解释的，答案是测试相关对象是否是包含要调用的函数的类的实例。换句话说，确保我们希望使用Body而不是StaticBody. 这可以通过简单地检查该函数是否存在于对象中来完成：if('setVelocity' in this.body) {  this.body.setVelocity(0, 0);}更具体地说，我们可以通过以下方式检查该对象是否是预期对象的实例：if(this.body instanceof Phaser.Physics.Arcade.Body) {  this.body.setVelocity(0, 0);}