你如何在同一个事件发射器中处理多种类型-Typescript

Question

我正在尝试使用 typescript 创建一个函数，该函数检查“Enter”键是否按下，然后如果 event.target.value 的长度大于 0，则转到具有该值的页面。这是在 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"
        );
      }
    }
  };

为了触发这个功能，我在输入元素中使用了 onKeyDown 属性，像这样：

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

这里的挑战是因为我使用 typescript，e 类型可以是键盘事件或更改事件。如果我使用 |要提供这两种类型，我会收到错误，因为打字稿混淆了要引用的事件类型。有什么方法可以创建一个界面或一些利用这两种事件类型（键盘事件与更改事件）的自定义类型？此接口或自定义类型还需要考虑 preventDefault void 函数。

谢谢

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 Playground

---

上面也可以写成

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

User-Defined Type Guards