Typescript - 滚动事件的 addEventListener 类型接口

Question

监听滚动事件时添加类型接口的正确方法是什么？

    onMounted(() => {
      ...
      // Call when mounted;
    
      document.addEventListener("scroll", (e: ScrollEvent) => {
        console.log(e); // Type interface of ScrollEvent
      });
    });

Answer 1

下面是一个示例，这是 的 MDN 页面文档：滚动事件。

<一href="https://www.typescriptlang.org/play?noUncheckedIndexedAccess=true&target=99&useUnknownInCatchVariables=true&exactOptionalPropertyTypes=true#code/C4TwDgpgBAwg9nAT GEWM5QLxQN4FgBQUUAHgFxQB2ArgLYBGEiA3AUSOdfYy-gL48EAZlQoBjYAEs4FKAHMIwAMqjECADZr4SZBIOBDYB HQAKAJTktKdHkJRECqohk2iRMlADuu5HA8A6VBV1NQANABpWV3ZPb18AoI0ATQjbfgJeAiERcSkZD0QJQ2VVDUsdfU MTCDUIGggKYHgGvV1GcgAJABUAWQAZAFEauoawqFEEKwsJtHMoADc4CWQcSOra+sbpYBaKRj9DYk2GjcwoAClFAHk AOQDgAopZCUEQY3HtVFHqDVGAJlMeBl8FkxJJpFAABZ6CjIGrFYJQYwQOYbcj9FENWYLJYrWwAejxriJxJJUAAehTK VSKZECVBOhDoIESmooMiThJ0AArKioYBQaFQXR86GiaBwQRQYCMqB0PSoaDok6iNTy1CRfKFCDw0rTXQGIzGHyiWgb PzyYCDdYNABCIAAkshjAByd5WZ2mACEowtOs0eoqhtMAPSmXwXhhcT0yGQSoavU5hl2iBdzOCztGUJhcISahD+CAA" rel="nofollow noreferrer">TS Playground

type Coords = {
  x: number;
  y: number;
};

function getScrollCoordinates (): Coords {
  return {
    x: window.scrollX,
    y: window.scrollY,
  };
}

function writeScrollCoordinates (elementContainer: HTMLElement, coords: Coords): void {
  elementContainer.textContent = JSON.stringify(coords, null, 2);
}

function handleScroll (event: Event): void {
  //                   ^^^^^^^^^^^^
  // The scroll event is just an instance of the base Event class
  writeScrollCoordinates(document.getElementById('coords')!, getScrollCoordinates());
}

window.addEventListener('scroll', handleScroll);

示例：

"use strict";
function getScrollCoordinates() {
    return {
        x: window.scrollX,
        y: window.scrollY,
    };
}
function writeScrollCoordinates(elementContainer, coords) {
    elementContainer.textContent = JSON.stringify(coords, null, 2);
}
function handleScroll(event) {
    //                   ^^^^^^^^^^^^
    // The scroll event is just an instance of the base Event class
    writeScrollCoordinates(document.getElementById('coords'), getScrollCoordinates());
}
window.addEventListener('scroll', handleScroll);

body {
  --size: 10000px;
  height: var(--size);
  width: var(--size);
}

#coords {
  font-family: monospace;
  font-size: 2rem;
  position: fixed;
  top: 1rem;
  left: 1rem;
}

<pre><code id="coords">Scroll to see coordinates</code></pre>