Question

我正在使用TypeScript Version 2来获取Angular 2组件代码。

我收到错误＆＃34;财产＆＃39;价值＆＃39;在类型＆＃39; EventTarget＆＃39;＆＃34;中不存在对于下面的代码，可能是什么解决方案。谢谢！

e.target.value.match（/ \ S + / g）|| []）。长度

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
selector: 'text-editor',
template: `
<textarea (keyup)="emitWordCount($event)"></textarea>
 `
 })
  export class TextEditorComponent {
   @Output() countUpdate = new EventEmitter<number>();

emitWordCount(e: Event) {
    this.countUpdate.emit(
        (e.target.value.match(/\S+/g) || []).length);
}
}

Answer 1

您需要明确告诉TypeScript您的目标HTMLElement的类型。

这样做的方法是使用泛型类型将其强制转换为正确的类型：

this.countUpdate.emit((<HTMLTextAreaElement>e.target).value./*...*/)

或（如你所愿）

this.countUpdate.emit((e.target as HTMLTextAreaElement).value./*...*/)

或（再次，偏好问题）

const target = e.target as HTMLTextAreaElement;

this.countUpdate.emit(target.value./*...*/)

这将让TypeScript知道该元素是textarea并且它将知道value属性。

对于任何类型的HTML元素都可以这样做，每当你给TypeScript更多关于它们类型的信息时，它会给你带来适当的提示，当然还有更少的错误。

为了使未来更容易，您可能希望直接定义具有其目标类型的事件：

// create a new type HTMLElementEvent that has a target of type you pass
// type T must be a HTMLElement (e.g. HTMLTextAreaElement extends HTMLElement)
type HTMLElementEvent<T extends HTMLElement> = Event & {
  target: T; 
  // probably you might want to add the currentTarget as well
  // currentTarget: T;
}

// use it instead of Event
let e: HTMLElementEvent<HTMLTextAreaElement>;

console.log(e.target.value);

// or in the context of the given example
emitWordCount(e: HTMLElementEvent<HTMLTextAreaElement>) {
  this.countUpdate.emit(e.target.value);
}

Answer 2

以下是我使用的简单方法：

let element = event.currentTarget as HTMLInputElement;
let value = element.value;

TypeScript编译器显示的错误消失了，代码可以运行。

Answer 3

角度 10+

打开 tsconfig.json 并禁用 strictDomEventTypes。

  "angularCompilerOptions": {
    ....
    ........
    "strictDomEventTypes": false
  }

Answer 4

由于我遇到了两个问题，它们以略有不同的方式搜索我的问题，因此我会复制我的答案，以防您最终出现在这里。

在被调用的函数中，您可以使用以下命令定义类型：

emitWordCount(event: { target: HTMLInputElement }) {
  this.countUpdate.emit(event.target.value);
}

这假设您只对target属性感兴趣，这是最常见的情况。如果需要访问event的其他属性，则更全面的解决方案包括使用&类型的交集运算符：

event: Event & { target: HTMLInputElement }

您还可以更具体一些，例如，可以使用代替HTMLInputElement HTMLTextAreaElement用于文本区域。

Answer 5

考虑 $any()

<textarea (keyup)="emitWordCount($any($event))"></textarea>

Answer 6

就我而言，我有：

const handleOnChange = (e: ChangeEvent) => {
  doSomething(e.target.value);
}

问题是我没有为 ChangeEvent 提供类型参数，因此它知道 e.target 是一个 HTMLInputElement。即使我手动告诉它 target 是一个输入元素（例如 const target: HTMLInputElement = e.target），ChangeEvent 仍然不知道这是有意义的。

解决方案是：

// add type argument
const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
  doSomething(e.target.value);
}

Answer 7

fromEvent<KeyboardEvent>(document.querySelector('#searcha') as HTMLInputElement , 'keyup')
    .pipe(
      debounceTime(500),
      distinctUntilChanged(),
      map(e  => {
            return e.target['value']; // <-- target does not exist on {}
        })
    ).subscribe(k => console.log(k));

也许类似上面的内容可以帮助您。根据实际代码进行更改。问题是........ target ['value']

Answer 8

我认为它必须有效但我无法识别任何方式。其他方法可以是，

<textarea (keyup)="emitWordCount(myModel)" [(ngModel)]="myModel"></textarea>


export class TextEditorComponent {
   @Output() countUpdate = new EventEmitter<number>();

   emitWordCount(model) {
       this.countUpdate.emit(
         (model.match(/\S+/g) || []).length);
       }
}

Answer 9

这是我使用的另一种简单方法；

    inputChange(event: KeyboardEvent) {      
    const target = event.target as HTMLTextAreaElement;
    var activeInput = target.id;
    }

Answer 10

最好的方法是使用模板 => 将 id 添加到您的输入中，然后使用它的值

searchNotary(value: string) {
 // your logic
}

这样，当激活严格验证时，您将永远不会出现 Typescript 错误 => 参见 angular Docs

Answer 11

Angular 11+

打开 tsconfig.json 并禁用 strictTemplates。

"angularCompilerOptions": { .... ………… “严格模板”：假 }

Answer 12

这里是指定event.target的另一种方法：

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
    selector: 'text-editor',
    template: `<textarea (keyup)="emitWordCount($event)"></textarea>`
})
export class TextEditorComponent {

   @Output() countUpdate = new EventEmitter<number>();

    emitWordCount({ target = {} as HTMLTextAreaElement }) { // <- right there

        this.countUpdate.emit(
          // using it directly without `event`
            (target.value.match(/\S+/g) || []).length);
    }
}

Answer 13

请改用currentValue，因为currentValue的类型为EventTarget & HTMLInputElement。

Answer 14

用户 TypeScript 内置实用程序类型 Partial<Type>

在您的模板中

(keyup)="emitWordCount($event.target)"

在你的组件中

 emitWordCount(target: Partial<HTMLTextAreaElement>) {
    this.countUpdate.emit(target.value./*...*/);
  }

财产价值＆＃39;在类型＆＃39; EventTarget＆＃39;上不存在

14 个答案:

角度 10+