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

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

이 질문에는 이미 답변이 있습니다.

'EventTarget' 유형에 'value' 속성이 없습니다. (16개 답변)

닫힘두 달 전에요.

그래서 다음 코드는 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속성:

(event.target as HTMLInputElement).value

설명서에 따르면:

를 입력합니다.

위의 예에서는,$event로서any유형입니다. 비용을 들여 코드를 단순화합니다.이벤트 객체의 속성을 밝히고 어리석은 실수를 방지할 수 있는 유형 정보가 없습니다.

[...]

그$event이제 구체화되었습니다.KeyboardEvent모든 요소에 속성이 있는 것은 아니기 때문에 입력 요소에 캐스트합니다.

(강조 지뢰)

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.dataset클릭된 버튼 요소의 리액트:

<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…
}

템플릿 내 -

`(keyup)="value2=$any($event.target).value"`

구성 요소 -

getInput(event: Event) {
  this.value1 = (event.target as HTMLInputElement).value;
}

내가 하는 방법은 다음과 같다(타입 어설션 임호보다 낫다).

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

이것은 당신이 오직 다음 사항에만 관심이 있다고 가정합니다.target가장 일반적인 경우인 property.의 다른 속성에 액세스 할 필요가 있는 경우event보다 포괄적인 솔루션으로는&유형 교차 연산자:

event: Event & { target: HTMLInputElement }

이것은 Vue.js 버전이지만 이 개념은 모든 프레임워크에 적용됩니다.물론 더 구체적으로 말할 수 있습니다.일반적인 것을 사용하는 대신HTMLInputElement를 들면 아까운데'를하시면 됩니다. HTMLTextAreaElement텍스트 영역용입니다.

앵귤러 HTML 컴포넌트에서는 이 기능을 사용할 수 있습니다.

$any($event.target).value

소스 링크: https://www.tektutorialshub.com/angular/property-value-does-not-exist-on-type-eventtarget-error-in-angular/

하면 됩니다.event.target.value onChange ): onChange 핸들러를 사용합니다.

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 이외의 는 onChange를 합니다.event.currentTarget.value

함수 $any typecast 를 합니다.($any($event.target).value)이치노

자세한 것은 이쪽.

독자적인 인터페이스를 작성할 수도 있습니다.

    export interface UserEvent {
      target: HTMLInputElement;
    }

       ...

    onUpdatingServerName(event: UserEvent) {
      .....
    }

React에는 다음과 같은 인터페이스가 있습니다.ChangeEvent★★★★★★에onChange,FormEvent★★★★★★에onSubmit

나 또한 다음과 같은 방법으로 나에게 효과가 있는 일을 하려고 했다.

handleChange (e : React.ChangeEvent<HTMLInputElement>) {
  console.log(e.currentTarget.value);
}


<input 
   autoFocus
   value={this.state.account.username}
   onChange={this.handleChange}
   id="username" 
   type="text" 
   className="form-control" 
/>

「」로 명시적으로 해석할 수 있습니다.HTMLInputElement'에 접속하여 '값'에 액세스합니다.

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

아시다시피 TypeScript는 항상 요소 데이터 유형에 한정되어 있습니다.따라서 데이터 유형을 지정하지 않고 요소의 속성에 직접 액세스할 수 없습니다.event.target는 입니다.HTMLElement이것은 모든 HTML 요소의 부모이지만 속성 값을 가질 수 있는 것은 아닙니다.

변수를 해야 요.event.target여기서 값 속성에 접근할 수 있는 것은 우리뿐입니다.

OnUpdatingServerName (event: Event) {
  console.log(event);
  var element = event.target as HTMLElement
  this.newserverName = element.value;
}

유틸리티 타입을 작성할 것을 권장합니다.

interface MyEvent<T extends EventTarget> extends Omit<Event, 'target'> {
  target: T;
}

그리고 이렇게 사용하세요.

function onChange({ target: { value } }: MyEvent<HTMLInputElement>) => {
  doSomethingWith(value);
}

인터페이스 선언

export interface HTMLInputEvent extends Event {
  target: HTMLInputElement & EventTarget;
}

다른 입력 이벤트에 대한 유형으로 재사용할 수 있습니다.

public onChange(event: HTMLInputEvent) {
  const value = event.target.value;
}

이거 한 번 입어보세요

<input type = 'text' [value] = 'value' (input) = 'data = $any($event.target).value'>

아래 코드 테스트:

  console.log(event['target'].value)

효과가 있습니다:-)

이벤트에 임의의 유형 추가

event: any

예

[element].addEvenListener('mousemove', (event: any) =>{
//CODE//
} )

이 경우 타이프스크립트가 이벤트유형으로 "event"(이 경우 클릭)를 추가하는데 어떤 이유로 인해 일부 속성이 인식되지 않습니다.하면 이하지 않게 됩니다.이는 모든 타입에 됩니다. 이는 모든 경우에 해당됩니다.document.[Property]

언급URL : https://stackoverflow.com/questions/44321326/property-value-does-not-exist-on-type-eventtarget-in-typescript