La proprietà "valore" non esiste nel tipo EventTarget in TypeScript

Quindi il codice seguente è in Angular 4 e non riesco a capire perché non funziona come previsto.

Ecco uno snippet del mio gestore:

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)">

Il codice mi dà l'errore:

La proprietà "value" non esiste nel tipo "EventTarget".

Ma come si può vedere in console.logquel valore esiste suevent.target .

event.targetqui è un HTMLElementche è il genitore di tutti gli elementi HTML, ma non è garantito che abbia la proprietà value. TypeScript rileva questo e genera l'errore. Trasmetti event.targetall'elemento HTML appropriato per assicurarti HTMLInputElementche abbia una valueproprietà:

(<HTMLInputElement>event.target).value

Secondo la documentazione :

Digitare il $event

L'esempio sopra esegue il cast di $eventcome anytipo. Ciò semplifica il codice a un costo. Non ci sono informazioni sul tipo che potrebbero rivelare le proprietà dell'oggetto evento e prevenire errori stupidi.

[...]

L' $eventora è un preciso KeyboardEvent. Non tutti gli elementi hanno una valueproprietà, quindi esegue il cast targeta un elemento di input.

(Enfasi mia)

Anche il passaggio di HTMLInputElement come generico al tipo di evento dovrebbe funzionare:

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

Ecco un'altra soluzione che funziona per me:

(event.target as HTMLInputElement).value

Questo dovrebbe eliminare l'errore facendo sapere a TS che event.targetè un HTMLInputElement, che ha intrinsecamente un value. Prima di specificare, TS probabilmente sapeva solo che eventda solo era un HTMLInputElement, quindi secondo TS il valore digitato targetera un valore mappato in modo casuale che poteva essere qualsiasi cosa.

Stavo cercando una soluzione a un errore TypeScript simile con React:

La proprietà "dataset" non esiste nel tipo EventTarget in TypeScript

Volevo arrivare a event.target.datasetun elemento pulsante cliccato in React:

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

Ecco come sono riuscito a ottenere il datasetvalore "esistente" tramite 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…
}

Il modo in cui lo faccio è il seguente (meglio dell'asserzione del tipo imho):

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

Ciò presuppone che tu sia interessato solo alla targetproprietà, che è il caso più comune. Se è necessario accedere alle altre proprietà di event, una soluzione più completa prevede l'utilizzo &dell'operatore di intersezione del tipo:

event: Event & { target: HTMLInputElement }

Questa è una versione di Vue.js ma il concetto si applica a tutti i framework. Ovviamente puoi andare più specifico e invece di usare un generale HTMLInputElementpuoi usare ad esempio HTMLTextAreaElementper le aree di testo.

Dovresti usare event.target.valueprop con il gestore onChange se non puoi vedere:

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`.

Oppure, se vuoi usare un gestore diverso da onChange, usa event.currentTarget.value