你如何在同一個事件發射器中處理多種類型-Typescript

Question

我正在嘗試使用 typescript 創建一個 function 來檢查“Enter”按鍵，然后如果 event.target.value 的長度大於 0，則 Z34D1F91FB2E514B8576FAB1A75A89A6 到 B 頁這是在 nextjs 應用程序中，因此是 router.push 行。 代碼大致如下所示：

const goToSearch = (e: React.KeyboardEvent<HTMLInputElement> | React.ChangeEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      e.preventDefault();

      if (e.target.value.length > 0) {
        router.push(
          { pathname: "/Search", query: { searchVal: e.target.value } },
          "/Search"
        );
      }
    }
  };

要觸發此 function，我在輸入元素中使用 onKeyDown 道具，如下所示：

  <input
    type="search"
    className="form-control border border-white"
    placeholder="Search"
    aria-label="Search"
    onKeyDown={goToSearch}
  />

這里的挑戰是因為我使用的是 typescript，所以 e 類型可以是鍵盤事件或更改事件。 如果我使用 | 要提供這兩種類型，我會收到錯誤，因為 typescript 混淆了要引用的事件類型。 有什么方法可以創建一個界面或一些利用這兩種事件類型（鍵盤事件與更改事件）的自定義類型？ 此接口或自定義類型還需要考慮 preventDefault void function。

謝謝

Answer 1

在嘗試訪問聯合類型中兩種類型都不存在的屬性之前，您可以使用類型保護來斷言該事件是聯合類型中的特定事件之一。

const goToSearch = (e: React.KeyboardEvent<HTMLInputElement> | 
React.ChangeEvent<HTMLInputElement>) => {
  const {key} = (e as React.KeyboardEvent<HTMLInputElement>)
  const {target} = (e as React.ChangeEvent<HTMLInputElement>)
  if (key === "Enter") {
    e.preventDefault();
  }
  if (target.value.length > 0) {
    // change route
  }
};

TS游樂場

---

上式也可以寫成

const goToSearch = (e: React.KeyboardEvent<HTMLInputElement> | React.ChangeEvent<HTMLInputElement>) => {
  if ((e as React.KeyboardEvent<HTMLInputElement>) && (e as React.KeyboardEvent<HTMLInputElement>).key === "Enter") {
    e.preventDefault();
  }

  if ((e as React.ChangeEvent<HTMLInputElement>) && (e as React.ChangeEvent<HTMLInputElement>).target.value.length > 0) {
    // change route
  }
};

用戶定義的類型保護