在angular4组件类中将javascript转换为打字稿

Question

下面是我在 Javascript 中的代码。我需要在 Angular 组件内的组件类中编写它。

根据我的理解，Character.prototype.placeAt() 代码向现有对象添加了新方法或属性。或者，在这种情况下，placeAt() 内的this.tile = tileTo; 将使用全局 tileTo 变量更新 Character Object 的实例。但是如何将其转换为 Typescript？

<script type="text/javascript">
    tileFrom:any = [1, 1];
    tileTo = [1, 1];
    function Character() {
        this.tileFrom = [1, 1];
        this.tileTo = [1, 1];
        this.tile = tileTo;

    }
    Character.prototype.placeAt = function (x, y) {
        this.tileFrom = [x, y];
        this.tileTo = [x, y];
        this.tile = tileTo;
    };
    var player = new Character();
    player.placeAt(..);

</script>

我尝试将其转换如下，但我无法在 typescript 类中使用 Character.prototype，因为我收到错误：'duplicate identifier Character'。那么如何将placeAt() 添加到 Character 对象中呢？

是否可以在不使用 this 或发送类实例的情况下访问类变量？由于这会随上下文而变化，即在placeAt() 方法中，this 指的是 Character 对象。

export class GametrainComponent implements AfterViewInit  {
     tileFrom = [1, 1];
     tileTo = [1, 1];
     Character(self) {
        console.log("ss "+self.tileW)
        this.tileFrom = [1, 1];
        this.tileTo = [1, 1];
        this.tile = self.tileTo;

    };
    Character.prototype.placeAt(x:any, y:any, self) { //error duplicate identifier Character
        this.tileFrom = [x, y];
        this.tileTo = [x, y];
        this.tile = self.tileTo;

    };
    ngAfterViewInit() {
        self = this;
        this.player = new this.Character(self);
        player.placeAt(..);
    }
}

请注意，我是 JavaScript 和 Angular 的新手。

Answer 1

字符应该是它自己的具有属性和方法的类。它看起来像这样：

character.model.ts：

export class Character {

  constructor(
    public tileFrom: Tile,
    public tileTo: Tile,
    public tile: Tile
  ) {}

  placeAt(x, y) {
    this.tileFrom = [x, y];
    this.tileTo = [x, y];
    this.tile = this.tileTo;
  }

}

gametrain.component.ts：

import { Character } from 'file/path';

export class GametrainComponent implements AfterViewInit  {

  player: Character;

  constructor() {}

  ngAfterViewInit() {
      this.player = new Character([1, 1], [1, 1], [1, 1]);
  }

  moveCharacter(tile: Tile) {
    this.player.placeAt(tile);
  }
}

或者，如果您的角色总是从同一个位置开始，那么您可以在 Character 类中设置这些值，并且在创建新角色时不必将值传递给它。