TypeScript의 EventTarget 유형에 'value'속성이 없습니다.

따라서 다음 코드는 Angular 4에 있으며 예상대로 작동하지 않는 이유를 알 수 없습니다.

다음은 내 핸들러의 일부입니다.

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

HTML 요소 :

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

코드는 나에게 오류를 제공합니다.

'EventTarget'유형에 'value'속성이 없습니다.

그러나 console.log그 값 에서 볼 수 있듯이 event.target.

event.target여기입니다 HTMLElement모든 HTML 요소의 부모이지만, 속성이 보장되지 않는 value. TypeScript는이를 감지하고 오류를 발생시킵니다. 캐스트 event.target해당 HTML 요소는 그것이 보장하기 위해 HTMLInputElement가지고있는 value속성을 :

(<HTMLInputElement>event.target).value

당 문서 :

입력 $event

위의 예는를 유형 $event으로 캐스트합니다 any. 이는 비용을 들여 코드를 단순화합니다. 이벤트 객체의 속성을 드러내고 어리석은 실수를 방지 할 수있는 유형 정보는 없습니다.

[...]

는 $event이제 특정입니다 KeyboardEvent. 모든 요소에 value속성이있는 것은 아니므 target로 입력 요소로 캐스트 됩니다.

(강조 광산)

HTMLInputElement를 이벤트 유형에 제네릭으로 전달하는 것도 작동해야합니다.

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

나를 위해 작동하는 또 다른 수정 사항은 다음과 같습니다.

(event.target as HTMLInputElement).value

즉 TS가 알려주하여 오류를 제거 가야 event.target입니다 HTMLInputElement본질적으로 가지고있는을 value. 지정하기 전에 TS는 event혼자가 임을 알았을 가능성이 높 HTMLInputElement으므로 TS에 따르면 키 입력 target은 무엇이든 될 수있는 무작위로 매핑 된 값이었습니다.

React와 유사한 TypeScript 오류에 대한 해결책을 찾고있었습니다.

TypeScript의 EventTarget 유형에 'dataset'속성이 없습니다.

event.target.datasetReact에서 클릭 한 버튼 요소 를 얻고 싶었습니다 .

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

datasetTypeScript를 통해 값을 "존재" 할 수있는 방법은 다음과 같습니다 .

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

내가하는 방법은 다음과 같습니다 (유형 단언 imho보다 낫습니다).

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

이것은 target가장 일반적인 경우 인 속성 에만 관심이 있다고 가정합니다 . 의 다른 속성에 액세스해야하는 경우 event보다 포괄적 인 솔루션은 &유형 교차 연산자를 사용하는 것입니다 .

event: Event & { target: HTMLInputElement }

이것은 Vue.js 버전이지만 개념은 모든 프레임 워크에 적용됩니다. 분명히 더 구체적으로 갈 수 있으며 일반 HTMLInputElement을 사용하는 대신 HTMLTextAreaElement텍스트 영역에 사용할 수 있습니다 .

볼 수 event.target.value없다면 onChange 핸들러와 함께 prop을 사용해야합니다 .

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

또는 onChange 이외의 핸들러를 사용하려면 event.currentTarget.value