Question

我的代码遇到问题。我为我的代码编写的打字稿索引签名：

const ships: { [index: string]: Ship } = {};

这是代码块的一部分：

recieveAttack(e: any) {
    let target: string;
    const location = document.getElementById(e.target.id);
    const ships: { [key: string]: Ship } = {};
    console.log(location.hasChildNodes());
    if (location.hasChildNodes()) {
      target = e.currentTarget.children[0].getAttribute('data-ship-type');
    }
    console.log(location.classList.contains('occupied'));
    if (location.classList.contains('occupied')) {
      console.log(target);
      console.log('hit', ships[target]);
      ships[target].hit(e.target.id);
    } else {
      this.miss(e.target.id);
    }
  }

导致我的测试（用jasmine编写）传递，但对于曾经正常工作的代码因某些未知原因而失败。但是，如果我取出这行代码，测试将失败并显示错误代码：

{
"message": "TypeError: shipContainer is null\nat spec/index_spec.ts:127:13\n\nShip.prototype.renderShip/<@spec/index_spec.ts:127:13\nShip.prototype.renderShip@spec/index_spec.ts:118:9\n@spec/index_spec.ts:463:5\n@spec/index_spec.ts:457:2\n__webpack_require__@spec/index_spec.ts:20:12\n@spec/index_spec.ts:374:68\n__webpack_require__@spec/index_spec.ts:20:12\n@spec/index_spec.ts:69:18\n@spec/index_spec.ts:1:11\n",
"str": "TypeError: shipContainer is null\nat spec/index_spec.ts:127:13\n\nShip.prototype.renderShip/<@spec/index_spec.ts:127:13\nShip.prototype.renderShip@spec/index_spec.ts:118:9\n@spec/index_spec.ts:463:5\n@spec/index_spec.ts:457:2\n__webpack_require__@spec/index_spec.ts:20:12\n@spec/index_spec.ts:374:68\n__webpack_require__@spec/index_spec.ts:20:12\n@spec/index_spec.ts:69:18\n@spec/index_spec.ts:1:11\n"

}

错误指向的代码块是：

renderShip(): HTMLElement {
    const ship: any[] = this.createShip();
    const shipContainer: HTMLElement = document.querySelector(`#${ this.type() }`);

    ship.forEach((value: string, index: number) => {
      const section: HTMLElement = document.createElement('div');

      section.setAttribute('draggable', 'true');
      section.setAttribute('aria-grabbed', 'false');
      section.setAttribute('data-direction', 'horizontal');
      section.setAttribute('data-ship-type', this.type());

      section.classList.add('ship');
      section.classList.add(this.type());
      section.id = this.type() + String(index);
      shipContainer.appendChild(section);
    });

    shipContainer.addEventListener('click', () => {
      const ship = shipContainer.children;

      for (let i = 0; i < ship.length; i = i + 1) {
        ship[i].setAttribute('aria-grabbed', 'true');
      }
    });

    shipContainer.setAttribute('data-direction', 'horizontal');

    shipContainer.addEventListener('dragstart', (e: any) => {
      drag(e);
    });

    return shipContainer;
  }

特别是这一行：

const shipContainer: HTMLElement = document.querySelector(`#${ this.type() }`);

我应该指定我使用jasmine-jquery作为灯具。代码代码shipContainer应指向动态添加到dom的多艘船中的1艘，具体取决于船的长度。

发运模块

import { Ship } from './ship';

export module Ships {
  export const patrol: Ship = new Ship(2);
  export const destroyer: Ship = new Ship(3);
  export const submarine: Ship = new Ship(3);
  export const battleship: Ship = new Ship(4);
  export const carrier: Ship = new Ship(5);

  carrier.renderShip();
  battleship.renderShip();
  submarine.renderShip();
  destroyer.renderShip();
  patrol.renderShip();
}

我不知道为什么一行简单的代码导致我的代码与我的测试发生冲突。如果签名索引在那里一切正常，但我不能调用船舶[目标]的命中方法。而且，如果它不存在，我会遇到我的测试失败。任何见解或修复都将不胜感激。

Answer 1

经过长时间的搜索。我找到了问题的答案。

解决方案：

recieveAttack(e: any) {
    const location = document.getElementById(e.target.id);
    type ships = { [key: string]: Ship };
    const ships2: ships = { ...ships };
    let target: string;

    if (location.hasChildNodes()) {
      target = e.currentTarget.children[0].getAttribute('data-ship-type');
    }

    if (location.classList.contains('occupied')) {
      ships2[target].hit(e.target.id);
    } else {
      this.miss(e.target.id);
    }
  }

签名索引导致测试失败

1 个答案: