javascript - Hogyan lehet "Element" típusú értéket kapni a "Element.parentNode"-ból a "Node & ParentNode" helyett?

Az esemény delegálásának receptje a http://youmightnotneedjquery.com/ oldalról:

document.addEventListener(eventName, function(e) {
    // loop parent nodes from the target to the delegation node
    for (var target = e.target; target && target != this; target = target.parentNode) {
        if (target.matches(elementSelector)) {
            handler.call(target, e);
            break;
        }
    }
}, false);

Megpróbálom biztonságosan típusosan átírni TypeScript-re (jelenleg kattintási eseményhez):

export default function delegateClickEventHandling(
    {
      clickTargetSelector,
      container = document
    }: {
      clickTargetSelector: string;
      container: HTMLElement | Document;
    },
    handler: (event: MouseEvent) => void
): void {

  container.addEventListener("click", (event: Event): void => {

    if (!(event instanceof MouseEvent)) {
      return;
    }

    for (
        let targetParentNode: Element | null = event.target as Element;
        isNotNull(targetParentNode) && targetParentNode !== event.currentTarget;
        targetParentNode = targetParentNode.parentNode
    ) {

      if (targetParentNode.matches(clickTargetSelector)) {
        handler(event);
      }
    }
  }, false);
}

A TypeScript fordító ezt mondja nekem:

TS2322: Type '(Node & ParentNode) | null' is not assignable to type 'Element | null'.
Type 'Node & ParentNode' is not assignable to type 'Element | null'.
Type 'Node & ParentNode' is missing the following properties from type 'Element':
 assignedSlot, attributes, classList, className, and 64 more.

A .matches() a Element metódusa - nem tudom meghívni Node & ParentNode-ból). Mit tegyek?

Ha a targetParentNode=targetParentNode.parentNode as Element teljesen rendben van, kérlek magyarázd el, miért.

Utóirat: Kérjük, vegye figyelembe, hogy a any, object és a típusannotáció kihagyása nem megengedett.

Válasz #1

Csak annyi a dolgod, hogy a targetParentNode.parentNode-t Element-re alakítod.

Tehát a for ciklus így nézhet ki:

for (
    let targetParentNode: Element = event.target as Element;
    targetParentNode !== event.currentTarget;
    targetParentNode = targetParentNode.parentNode as Element
) {

  if (targetParentNode.matches(clickTargetSelector)) {
    handler(event);
  }
}

PlaygrounLink