Vue TypeScript 프로젝트의 이벤트 유형은 무엇입니까?

Vue TypeScript 프로젝트의 이벤트 유형은 무엇입니까?

uploadImage function 매개 변수와 같이 'e'에 대한 올바른 유형은 무엇입니까?

public uploadImage(e /* :type of e */){
 const image = e.target.files[0];
 const reader = new FileReader();
 reader.readAsDataURL(image);
 reader.onload = e =>{
    this.previewImage = e.target.result;
    console.log(this.previewImage);
 };
}

템플릿에는 이것이 있습니다.

<input type="file" accept="image/jpeg" @change=uploadImage>

유형은 다음과 같습니다.Event관련 정보가 켜져 있습니다.e.target소유물.

이 유형에는 자체 주석을 사용할 수 있습니다.

interface InputFileEvent extends Event {
    target: HTMLInputElement;
}

public uploadImage(e: InputFileEvent) {
    const image = e.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(image);
    reader.onload = e =>{
        this.previewImage = e.target.result;
        console.log(this.previewImage);
   };
}

유형을 다음과 같이 지정하는 경우Event그러면 당신은 할 수 없을 것입니다.e.target.files[0];TS가 불평할 것이기 때문에Property 'files' does not exist on type 'target' error in typescript가장 간단한 해결책은 다음과 같은 유형을 지정하는 것입니다.any여기에서 Shusson의 솔루션 참조: 유형 스크립트의 'EventTarget' 유형 오류에 속성 'files'가 존재하지 않지만 이마저도 작동하지 않아 해당 특정 Vue 구성 요소에 TS를 사용하지 않게 되었습니다.

다양한 유형의 이벤트와 유형이 있습니다.예를 들어 드래그 작업에 DragEvent 유형(https://developer.mozilla.org/en-US/docs/Web/API/DragEvent )을 사용할 수 있습니다.
입력에 대한 입력 이벤트도 있습니다.https://developer.mozilla.org/en-US/docs/Web/API/InputEvent .
이벤트가 더 일반적입니다.

분명히 파티에 늦었지만, 저는 몇 가지 레거시 구성 요소를 다시 쓰고 있었습니다.결국 나는 Typescript 오류를 만났다 - 템플릿 이벤트는 내가 직접 파괴하는 것을 좋아하지 않았다 왜냐하면target이었다EventTarget,것은 아니다.HTMLInputElement아니면 내가 필요로 하는 요소가 무엇이든.

그래서 직접적으로 인수를 파괴하는 대신, 저는 단지 나중에 변수로 설정했습니다.as키워드

예:

foo(event: Event) {
  const el = event.target as HTMLInputElement
  // do stuff
}

나는 내가 올바른 유형으로 직접 논쟁에서 그것을 파괴할 수 있는 유용한 속임수를 알고 있기를 바라지만, 안타깝게도 나는 그렇게 운이 없었습니다.

언급URL : https://stackoverflow.com/questions/55140448/what-is-the-type-for-an-event-in-vue-typescript-project