函数的 TypeScript 问题答案

【问题标题】：TypeScript problems with functions函数的 TypeScript 问题
【发布时间】：2021-07-22 21:17:54
【问题描述】：

我有这样的代码：

   export class Board implements IBoard {
      choosedPiece = false;
    
      constructor() {
        this.clicked();
      }
   }

还有这样的功能：

    public pieceOnClick(target: EventTarget): void {
        if (this.choosedPiece) {
          const clickedPiece = this.findPiecePosition((target as HTMLDivElement));
    
          if (clickedPiece.instance !== null) {
            this.choosedPiece = false;
            this.clickedEl(target);
          }
        }
      }
    
    
  clicked(): void {
    this.chessBoard.addEventListener('click', ({target}) => {
      if(!this.clickedEl(target)){
        this.clickPiece(target);
      }
    })
  }

现在我有一个类型为“EventTarget |”的错误参数null' 不可分配给“EventTarget”类型的参数。类型“null”不能分配给类型“EventTarget”。

如何处理？

【问题讨论】：

标签： javascript typescript

【解决方案1】：

出现错误是因为并非所有事件target 都属于HTML Element 类型。其他可能的类型可以是XMLHttpRequest、FileReader、AudioNode、AudioContext等。

要修复这个错误，你需要告诉 TypeScript 类型。一种方法是跟随。

clicked(): void {
    this.chessBoard.addEventListener("click", (event) => {
        const target = event.target as Element;
        if (!this.clickedEl(target)) {
            // this.clickPiece(target);
        }
    });
}

参考资料：

【讨论】：

【解决方案2】：

根据 DOM 的 TypeScript 类型，Event.target 属性可以是 null。因此，您可以先检查目标是否存在：

this.chessBoard.addEventListener('click', ({ target }) => {
    if (target && !this.clickedEl(target)) {
        this.clickPiece(target);
    }
});

我记得它曾经是null（或undefined），在混合添加某些移动API 时，但除此之外它总是被定义。但可以肯定的是，一个简单的检查就可以了，这也会导致 TypeScript 接受它，因为type narrowing。

【讨论】：

【解决方案3】：

我认为有一些可能性可以在 target 变量上获得 null 而不是 EventTarget。只需添加一个条件即可消除null

this.chessBoard.addEventListener('click', ({target}) => {
  if(target && !this.clickedEl(target)){ // This block will be executed if target is not null
        this.clickPiece(target);
  }
})

【讨论】：

谢谢，现在可以了，但是 clickedEl 有同样的错误