TypeScript problems with functions

Question

I have such code:

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

and functions like this:

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

And now I have such an error Argument of type 'EventTarget | null' is not assignable to parameter of type 'EventTarget'. Type 'null' is not assignable to type 'EventTarget'.

How to handle it?

Darshna Rekha · Accepted Answer · 2021-07-22 13:17:54Z

4

The error comes because not all event target is of the type HTML Element. Other possible types can be XMLHttpRequest, FileReader, AudioNode, AudioContext, etc.

To fix this error you need to tell TypeScript the type. One way is following.

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

References:

answered Jul 22, 2021 at 13:17

Darshna Rekha

1,1317 silver badges21 bronze badges

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

Comments

Kelvin Schoofs · Accepted Answer · 2021-07-22 13:07:16Z

1

According to the TypeScript typings for DOM, the Event.target property can be null. Therefore, you can first check if the target exists:

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

I do remember it being null (or undefined) once, when adding certain mobile APIs in the mix, but otherwise it's always been defined. But to be sure, a simple check is fine, which also causes TypeScript to accept it due to type narrowing.

edited Jul 22, 2021 at 13:07

answered Jul 22, 2021 at 12:58

Kelvin Schoofs

8,7482 gold badges17 silver badges34 bronze badges

Comments

BadPiggie · Accepted Answer · 2021-07-22 12:59:49Z

0

I think there are some possibilities to get null instead of EventTarget on the target variable. Just add one condition to eliminate null

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

edited Jul 22, 2021 at 12:59

answered Jul 22, 2021 at 12:55

BadPiggie

6,4391 gold badge17 silver badges37 bronze badges

1 Comment

Derby Over a year ago

thanks, now it works, but i have same error for clickedEl

Collectives™ on Stack Overflow

TypeScript problems with functions

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related