如何在typescript / js中处理'this'？需要将Python代码转换为Typescript

Question

我有这个用python编写的简单代码来创建一个小卡片游戏，我想用打字稿做同样的事情，但我在我的主要类中的'this'面临一个大问题，这是原始的python类：

class deck:
    card_type=['Hearts ','Diamonds','Spades','Clubs']
    card_rank=[2,3,4,5,6,7,8,9,10,'A','J','Q','K']
    full_deck=[]

    def build_deck(self):
        single={}
        for card in self.card_type:
            for n in self.card_rank:
                single={n: card}
                self.full_deck.append(single)
        shuffle(self.full_deck)


    def reshuffle (self):
        print('Re-shuffling again!')
        shuffle(self.full_deck)


    def choose_card(self):
        chosen=choice(self.full_deck)
        the_index= self.full_deck.index(chosen)
        self.full_deck.pop(the_index)

        return chosen

    def pick_hand(self, number_of_cards):
        hand=[]
        new_card={}

        for i in range(number_of_cards):
            new_card = self.choose_card()
            hand.append(new_card)

        return hand

在我的主游戏文件中，我做了类似这样的事情：

from classes import deck

deck1= deck()
deck1.build_deck()
my_hand=deck1.pick_hand(3)
compu_hand=deck1.pick_hand(3)

---

但是当我尝试在类型脚本中创建类似的类时，我写了以下内容：

export class deck {

  single_card: {
    cType: string;
    cNumber: any;
  };

  fullDeck: any[] = [];
  card_type=['Hearts ','Diamonds','Spades','Clubs'];
  card_rank=[2,3,4,5,6,7,8,9,10,'A','J','Q','K'];

  shuffle() {
    let counter = this.fullDeck.length;

    // While there are elements in the array
    while (counter > 0) {
        // Pick a random index
        let index = Math.floor(Math.random() * counter);

        // Decrease counter by 1
        counter--;

        // And swap the last element with it
        let temp = this.fullDeck[counter];
        this.fullDeck[counter] = this.fullDeck[index];
        this.fullDeck[index] = temp;
    }

    // return this.fullDeck;
  }


  buildDeck (){

    for (let t in this.card_type) {
      for ( let n in this.card_rank) {
        this.single_card.cType = this.card_type[t];
        this.single_card.cNumber = this.card_rank[n];
        this.fullDeck.push(this.single_card);
        console.log(this.single_card);
      }
    }
    // this.shuffle() 

  }

}

当我尝试使用主'ts'文件中的类时，如下所示：

import {deck} from './myclasses'

$(document).ready (function(){
    let deck1= new deck;
    deck1.buildDeck();
});

console.log调用返回相同的错误：

jQuery.Deferred异常：无法设置未定义的属性'cType'TypeError：无法在deck.buildDeck中设置undefined属性'cType'（file：///run/media/Work/HTML_Porjects/Game_TS/built/myclasses.js:132 ：44）

怎么没有定义？我需要做些什么来使Typescript代码像Python代码一样工作？

提前致谢 ...

Answer 1

该错误只是说明single_card是未定义的，它是：

class deck {

  single_card: {
    cType: string;
    cNumber: any;
  };

  // …
}

这将在TypeScript类上声明属性single_card，以便编译器在您引用该类型对象的single_card属性时接受（例如，在执行this.single_card时）。但是，这样做实际上不会将该类型的对象分配给该对象。因此，对于已编译的JavaScript（其中删除了类型信息），该属性不存在，因为您从未分配它。您可以通过查看compiled JavaScript there轻松验证。

所以你需要做的就是像在Python版本中那样为single_card分配一些东西：

this.single_card = {}

但是，如果你真的看看你的Python版本，single_card不是该对象的成员，它实际上没有任何意义。您正在使用它来构造卡对象，然后添加到fullDeck数组。在Python中，它是一个局部变量，所以你应该在TypeScript版本中使它成为局部变量：

buildDeck() {
  for (const t of this.card_type) {
    for (const n of this.card_rank) {
      const single_card = {
          cType: this.card_type[t],
          cNumber: this.card_rank[n]
      };
      this.fullDeck.push(single_card);
    }
  }
}

顺便说一句。你也想在那里使用for…of循环而不是for…in。

您还应该考虑使fullDeck正确输入。现在它是一个any数组，所以它可以存储任何对象。但是你想要做的事实上只是保持那里的物体看起来像single_card看起来的样子。所以考虑为此声明一个类型：

interface SingleCard {
    cType: string;
    cNumber: any;
}

然后，您可以正确键入fullDeck：

fullDeck: SingleCard[] = [];