Question

我有一个函数接受两种类型的参数。

请参阅与TS函数和类型相关的典型docs，this SO问题和this SO问题。

功能

  public onKeydown(ev: KeyboardEvent | EventTarget): void {
    if (ev.keyCode === 13) {
      this.sendMessage();
      ev.target.blur();
    } else {
      this.chatService.emitTyping();
    }
    return;
  }

页面的HTML

          <textarea
            autosize
            [minRows]="1"
            [maxRows]="4"
            [(ngModel)]="message"
            placeholder="escribe aqui"
            class="msg-input"
            (keydown)="onKeydown($event)"
            (click)="scrollToBottom()"
          ></textarea>

我看不到函数onKeyDown具有两种不同的类型。因为or在Angular中的作用似乎不像Typescript的文档所说的那样。例如，如果按下'Enter'键，则blur()键盘并发送消息。我是否需要使单独的功能仅仅是为了模糊键盘？

这是我得到的错误：

src / Components / chat / chat.component.ts（72,12）中的错误：错误TS2339：类型'EventTarget |属性'中不存在属性'keyCode' KeyboardEvent”。

[ng]类型'EventTarget'不存在属性'keyCode'。

[ng] src / Components / chat / chat.component.ts（74,10）：错误TS2339：属性'target'在'EventTarget |类型'中不存在。 KeyboardEvent”。

[ng]类型“ EventTarget”上不存在属性“ target”。

Answer 1

问题是打字稿很困惑，因为您在做什么在EventTarget和KeyboardEvent上都不可行。因此，您应该直接告诉他函数中的哪一个。如：

public onKeydown(ev: KeyboardEvent | EventTarget): void {
    if (<KeyboardEvent>ev.keyCode === 13) { // changed line
      this.sendMessage();
      ev.target.blur();
    } else {
      this.chatService.emitTyping();
    }
    return;
  }

您也可以

if ((ev as KeyboardEvent).keyCode === 13) {

请注意，有时Angular仍然无法找到所需的属性，即使该属性存在于DOM对象中，也可以像这样连接

type KeyboardCustom = KeyboardEvent & { customProp?: string };

表示这两个接口都是同一类型（但是第二个接口纯粹是可选的，因此，缺少它时不会抛出错误）。您可以进一步使用Partials。

type CustomInterface = KeyboardEvent & Partial<KeyboardInterface>

其中KeyboardInterface具有任何类型的结构。

处理两种不同类型时如何使用“或”运算符

功能

页面的HTML

1 个答案: