converting javascript to typescript in angular4 component class

Question

Below is the code I have in Javascript. I need to write this in a component class inside an Angular component.

Based on my understanding, Character.prototype.placeAt() code adds a new method or attribute to an existing object. Or, in this case, this.tile = tileTo; inside placeAt() will update an instance of Character Object with global tileTo variable. But how do I convert this to 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>

I tried converting it as follows but I cannot use Character.prototype in a typescript class as I get the error: 'duplicate identifier Character'. So how do I add placeAt() to the Character object?

Is it possible to access class variables without using this or sending an instance of the class? Since this will change with context, i.e. in placeAt() method, this refers to the Character object.

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(..);
    }
}

Please note, I am new to JavaScript and Angular.

Learn the basics of TypeScript class syntax. typescriptlang.org/docs/handbook/classes.html — SLaks
– SLaks, Commented Oct 19, 2018 at 17:37
You should declare types for all of your fields and parameters. — SLaks
– SLaks, Commented Oct 19, 2018 at 17:39
@SLaks i will follow those comments. Thank you. But these are not the final answer right! — Renil Joseph
– Renil Joseph, Commented Oct 19, 2018 at 17:41
That error happens because your class syntax makes no sense. You need to follow TypeScript syntax. — SLaks
– SLaks, Commented Oct 19, 2018 at 17:50

Mitch McCutchen · Accepted Answer · 2018-10-19 18:37:48Z

2

Character should be it's own class with properties and methods. It would look something like this:

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);
  }
}

Or if your characters are always starting at the same position then you could set those values in the Character class and you wouldn't have to pass it values when you create a new one.

answered Oct 19, 2018 at 18:37

Mitch McCutchen

3862 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Renil Joseph Over a year ago

Thank you. do you know on how to access class variables all the time as 'var' as in javascript without 'this.var' ? Since 'this' changes with context, i am not able to access class variable with 'this.var'.

Mitch McCutchen Over a year ago

Think of a class as a giant object. So instead of thinking about defining variables, you are defining properties. So you don't need to set var you just type the name of the property. So in the Character class you don't set a variable with var tileForm you define the property by just stating the name tileForm. In my example above you can see that's what I did with player in GametrainComponent. I declared a property player which is of type Character. Once you have player set to a new Character() you can then do this.player.placeAt() or this.player.tileFrom.

Mitch McCutchen Over a year ago

If you want to reference a property that is defined within the same class you need to use this because you are using a property that belongs to the class itself. So in GametrainComponent if I want to access player I have to use this.player. But I can add on to the end of that to access any properties or methods that belong to player: this.player.tileTo.

Mitch McCutchen Over a year ago

The same goes for calling methods within the same class. If you want to call moveCharacter() within the GametrainComponent you would need to call this.moveCharacter(). But remember, the class is an object. You can't think of it like the code between <script> tags. It will not run through every line so you can't just put this.moveCharacter([1, 2]) on the last line of the class. You have to call it from within another method belonging to the class, from the template, or from a different class.

Renil Joseph Over a year ago

Thank you. I think i get its idea. Let me try.

Collectives™ on Stack Overflow

converting javascript to typescript in angular4 component class

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related