A propriedade 'valor' não existe no tipo EventTarget no TypeScript

Portanto, o código a seguir está em Angular 4 e não consigo descobrir por que ele não funciona da maneira esperada.

Aqui está um snippet do meu manipulador:

onUpdatingServerName(event: Event) {
  console.log(event);
  this.newserverName = event.target.value; //this wont work
}

Elemento HTML:

<input type="text" class="form-control" (input)="onUpdatingServerName($event)">

O código me dá o erro:

A propriedade 'valor' não existe no tipo 'EventTarget'.

Mas, como pode ser visto no, console.logesse valor existe no event.target.

event.targetaqui está um HTMLElementque é o pai de todos os elementos HTML, mas não é garantido que tenha a propriedade value. O TypeScript detecta isso e gera o erro. Transmita event.targetpara o elemento HTML apropriado para garantir HTMLInputElementque ele tenha uma valuepropriedade:

(<HTMLInputElement>event.target).value

Pela documentação :

Digite o $event

O exemplo acima converte o $eventcomo um anytipo. Isso simplifica o código com um custo. Não há informações de tipo que possam revelar propriedades do objeto de evento e evitar erros bobos.

[...]

O $eventagora é um específico KeyboardEvent. Nem todos os elementos têm uma valuepropriedade, então ela é convertida targetem um elemento de entrada.

(Ênfase minha)

Passar HTMLInputElement como um genérico para o tipo de evento também deve funcionar:

onUpdatingServerName(event: React.ChangeEvent<HTMLInputElement>) {
  console.log(event);
  this.newserverName = event.target.value;
}

Aqui está outra correção que funciona para mim:

(event.target as HTMLInputElement).value

Isso deve eliminar o erro, informando ao TS que event.targeté um HTMLInputElement, que inerentemente tem um value. Antes de especificar, o TS provavelmente só sabia que eventsozinho era um HTMLInputElement, portanto, de acordo com o TS, o valor digitado targetera algum valor mapeado aleatoriamente que poderia ser qualquer coisa.

Eu estava procurando uma solução para um erro semelhante do TypeScript com React:

A propriedade 'dataset' não existe no tipo EventTarget no TypeScript

Eu queria chegar a event.target.datasetum elemento de botão clicado no React:

<button
  onClick={onClickHandler}
  data-index="4"
  data-name="Foo Bar"
>
  Delete Candidate
</button>

Aqui está como eu consegui fazer o datasetvalor "existir" via TypeScript:

const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
  const { name, index } = (event.target as HTMLButtonElement).dataset
  console.log({ name, index })
  // do stuff with name and index…
}

A maneira como faço isso é a seguinte (melhor do que digitar assertion imho):

onFieldUpdate(event: { target: HTMLInputElement }) {
  this.$emit('onFieldUpdate', event.target.value);
}

Isso pressupõe que você está interessado apenas na targetpropriedade, que é o caso mais comum. Se você precisar acessar as outras propriedades de event, uma solução mais abrangente envolve o uso do &operador de interseção de tipo:

event: Event & { target: HTMLInputElement }

Esta é uma versão Vue.js, mas o conceito se aplica a todos os frameworks. Obviamente, você pode ir mais específico e em vez de usar um geral, HTMLInputElementvocê pode usar, por exemplo, HTMLTextAreaElementpara áreas de texto.

Você deve usar event.target.valueprop com o manipulador onChange, caso não consiga ver:

index.js:1437 Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

Ou se você quiser usar outro manipulador que não seja onChange, use event.currentTarget.value