Typescript: lib.d.ts의 이벤트 인터페이스에서 currentTarget 변경 요청

XMLHttpRequest 객체도 currentTarget 일 수 있지만 Element / HTMLElement는 아닙니다. 그게 이유 일 수도 있습니다. 제네릭 유형이 이것을 개선할까요?

interface Event<T extends EventTarget> {
    /* ... */
    currentTarget: T;
    /* ... */
}

interface EventListener<T extends EventTarget> {
    (evt: Event<T>): void;
}

interface HTMLElement {
    /* ... */
    addEventListener(type: string, listener: EventListener<HTMLElement>, useCapture?: boolean): void;
}

그것을 개선하는 데 먼 길을 갈 것 같습니다.

내 iPhone에서 보냄

2014 년 8 월 3 일 13:34에 SaschaNaz [email protected] 은 다음과 같이 썼습니다.

XMLHttpRequest 객체도 currentTarget 일 수 있지만 Element / HTMLElement는 아닙니다. 그게 이유 일 수도 있습니다. 제네릭 유형이 이것을 개선할까요?

인터페이스 이벤트{
/ * ... _ /
currentTarget : T;
/ _ ... * /
}

인터페이스 EventListener{
(evt : 이벤트) : 무효;
}

interface HTMLElement {
/ * ... * /
addEventListener (유형 : 문자열, 리스너 : EventListener, useCapture ?: 부울) : void;
}
—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.

모든 이벤트 대상이 Element (http://www.w3.org/TR/DOM-Level-3-Events/#event-types)가 아니므로 여기에있는 솔루션은 더 많은 것이어야합니다. @SaschaNaz 의 제안에 따라.

문제는 현재 우리가 공개 할 수없는 파일을 기반으로 스크립트를 사용하여 lib.d.ts를 생성하고 있으며 해당 파일이 새 파일을 위해 사용되지 않는다는 것입니다. 그렇기 때문에 지금은 스크립트를 개선하지 않을 것이지만, 앞으로 lib.d.ts 생성 스크립트 / 입력에 대한 PR을 수행 할 수 있기를 바랍니다.

지금은 'Revisit'태그 지정-한 달 안에이 문제에 대해 핑을 보내 주시면 현재 위치를 확인할 수 있습니다.

현재 유형을 참조하는 구문이 있습니까? 이런 종류의 일을 할 수 있다면 더 쉽게 해결할 수 있다고 생각합니다.

interface HTMLElement {
    addEventListener(type: string, listener: EventListener<this>, useCapture?: boolean): void;
}

var image: HTMLImageElement;
var video: HTMLVideoElement;
image.addEventListener // receives EventListener<HTMLImageElement> type
video.addEventListener // receives EventListener<HTMLVideoElement> type

그 기능은 존재하지 않습니다. # 285와 # 229에서 제안한 것과 비슷한 것입니다.

안녕하세요,이 스레드를 핑합니다. Event.target 으로이 문제가 발생했습니다. 대부분의 경우 타겟이 HTMLElement 합니다. 기본 유형이 그렇지 않다고 가정하는 것은 약간 이상합니다. @SaschaNaz 의 제안을 시도하고 "중복 식별자"문제가 발생했습니다 (죄송합니다. 뭔가 누락되었을 수 있습니다. TypeScript를 처음 사용했습니다).

편집 : 이것은 경고를 조용히하기 위해 일했습니다 : (<HTMLElement>event.target).tagName

@rayshan 제안은 lib.d.ts 파일에 들어가야 할 항목에 대한 것이 었으며 파일은 Internet Explorer 구현을 기반으로 직접 자동 생성됩니다. 따라서 발생한 오류는 정확합니다. 현재 유일한 방법은 내장 lib ( --noLib )없이 빌드하고 해결 방법을 사용하거나 수행 한 작업을 수행하는 것입니다. 현재 TypeScript에서 DOM의 반환 유형을 처리하는 데는 많은 문제가 있습니다 (대부분 DOM이 가장 일관된 / 구조화 / 유형 안전 / 일관되게 구현 된 API 집합이 아니기 때문에).

이제 # 4910이 병합되었으므로 다시 검토 할 수 있습니까?

@zhengbli 에는 스크립트 기반 생성이 필요한 lib.d.ts 문제의 상태에 대한 컨텍스트가있을 수 있습니다.

PR을 환영했습니다. 다음은 lib.d.ts 변경 사항에 대한 정보입니다. https://github.com/Microsoft/TypeScript/blob/master/CONTRIBUTING.md#contributing -libdts-fixes

JS FileReader onload TS2339: Property 'result' does not exist on type 'EventTarget' 에서 onerror 전달 된 이벤트에서 getSummary() 에 대한 또 다른 경고가 발생했습니다.

내 해결 방법은 끔찍한 빨간색 구불 구불 한 선을 억제하는 것입니다 .-)는 다음과 같습니다.

interface FileReaderEventTarget extends EventTarget {
    result:string
}

interface FileReaderEvent extends Event {
    target: FileReaderEventTarget;
    getMessage():string;
}

그런 다음 내 앱에서 :

reader.onload = function(fre:FileReaderEvent) {
        var data = JSON.parse(fre.target.result);
        ...
    }

생성 된 JS 코드는 좋아 보이고 저에게 효과적입니다. 비정상적인 JS 이벤트 유형에 대해 이러한 종류의 솔루션을 lib.d.ts에 추가 할 수 있습니까?

내 솔루션이 지나치게 단순하다고 생각합니다. 그러나 이유를 아는 것이 도움이 될 것입니다.

이 문제를 해결하고 싶습니다. 그러나 내가 보는 것처럼 currentTarget에 대한 유일한 참조는 TSJS 생성기에서 생성 된 webworker.generated.d.ts 파일 안에 있습니다. 나는 이것을 고치는 방법을 모른다 😞
누군가가 거의 3 년 된이 문제를 고칠 수 있기를 바랍니다. 이러한 오류는 TypeScript가 사용하기 어렵고 정말 슬프다는 사람들의 말을 자주 듣는 이유 일 수 있습니다.

잘. 이 문제를 해결하기 시작했습니다. PR https://github.com/Microsoft/TSJS-lib-generator/pull/202를 만듭니다.
바라건대 이것은 올바른 방향으로 가고 있습니다.

나는 Property 'getBoundingClientRect' does not exist on type 'EventTarget'. 받고 있습니다. 좋은 생각이라고 생각합니다.

음, PR은 거의 2 개월 이후로 보류 중입니다. 속도를 높이기 위해 할 수있는 일이 있으면 조사하겠습니다.

currentTarget 를 제네릭으로 만들 수 있다면 정말 좋을 것입니다. 예를 들어 HTMLInputElement.onchange 는 (event: Event<HTMLInputElement>) => void 유형이 될 수 있으므로 event.currentTarget.value 는 캐스트없이 작동합니다. 또는 주석을 입력하십시오. React의 타이핑은이 작업을 수행하지만 dom.lib.d.ts는 안타깝게도 그렇지 않습니다.

제네릭을 도입하면 메모리 사용량이 두 배로 증가하므로 제네릭으로 인한 성능 문제로 인해 차단됩니다 .😭

이러한 성능 문제가 React 유형에 똑같이 적용됩니까?

lib.d.ts에는 React 타이핑이 포함되어 있지 않지만 명령에 --diagnostics 를 추가하여 테스트 할 수 있습니다.

@felixfbecker 개인적으로 이것이 곧 수정 될 것이라고 의심합니다. 나는 대부분의 사람들이 이미 해결 방법을 만들었거나 TypeScript를 포기했다고 생각합니다. 그래서이 문제를 겪는 사람이 너무 적습니다.

이 문제는 버전 1.18.0 (1.18.0)에 여전히 존재합니다.

안녕하세요,

...와 같은 문제이며 아직 해결되지 않은 것 같습니다.

angular 4 프로젝트를 프로덕션에 표시하면 문제가 나타납니다. 그렇지 않으면 ng serve ..를 사용하는 동안 문제가 발생합니다. 그래서 각도가 프로덕션 파일을 관리하는 방법과 관련된 것이 있다고 생각합니다.

이 문제에 대한 진전이 있기를 바랍니다. Typescript로 dom을 조작하는 것은 어렵습니다.

이 문제는 4 년 전이고 해당 PR은 거의 1 년이 지나면이 문제가 곧 수정 될 것 같지 않습니다.

이 문제는 4 년 동안 발생했지만 아직 해결되지 않았습니다.

https://github.com/Microsoft/TSJS-lib-generator/pull/207 에서 사용 가능한 수정 사항이 있습니다.
그러나 @saschanaz 는 성능에 따라 차단됩니다.

11시에 Casting party tonite-브라우저 탭 언로드 :
confirmationMessage(event: BeforeUnloadEvent): any {
const activeElement: HTMLElement = <HTMLElement>(<Document>event.target).activeElement;

: 댄싱 맨 :

추가는 어떨까요

    readonly currentTarget: Element | null;
    readonly target: Element | null;

UIEvent 에만? 이것은 그다지 구체적이지 않지만 대부분의 코드를 행복하게 만듭니다.
UIEvent에서와 같이 | null 없이도 둘 다 항상 설정됩니다.

여기에 같은 문제. Typescript와 함께 Vue를 사용하려고했고 사용자가 입력 한대로 입력 필드의 값을 얻고 싶었습니다. 그러나 event.target.value는 유형 검사기를 통과하지 못하지만-제 생각에는 텍스트 입력이 항상 이러한 이벤트에 대해 이러한 필드를 생성해야합니다.

코드에 유형 any를 추가하여 오류를 제거했습니다.

this.url = (<any>event).target.result;

Event 및 EventTarget을 입력하는 것은 어떻습니까?

interface Event<C = any, S = any, T = any> {
  ...
  currentTarget: EventTarget<C> | null;
  srcElement: EventTarget<S> | null;
  target: EventTarget<T> | null;
  ...
}

interface EventTarget<T = any> {
  ...
}

FileReader를 사용하는 동안이 문제가 발생했습니다. 올바른 유형으로 간단하게 캐스트하면 문제가 해결됩니다.

const fileReader = new FileReader();
fileReader.onload = $ev => {
  console.log($ev); // type ProgressEvent
  console.log($ev.target); // type FileReader
  // console.log($ev.target.result); // editor and autocomplete doesn't show any error
  console.log(($ev.target as FileReader).result); // casting compiles fine
};
fileReader.readAsText(file);

이 주제에 대한 업데이트가 있습니까? 매번 event.target 또는 any-casting 이벤트를 강제로 캐스팅하지 않고 ( @gautamkrishnar 가 위에서 한 것처럼)

사실, 6 번째 생일이되기 전에이 문제에 대한 공식적인 답변이 있으면 좋을 것입니다.

네, 이것은 아마도 DOM, JSX 등으로 작업 할 때 하루 동안 가장 귀찮은 일입니다.

사실, 그것은 내가 가진 유일한 일일 성가신 일입니다. 그리고 나는 하루 종일 백만 명의 사람들이 이것을 가지고 있다고 상상합니다.

이것이 왜 우선 순위가 없는지 이해하는 것은 정말 어렵습니다.

event.target과 동일합니다. 매우 일반적인 시나리오는 자식이 아직 존재하지 않고 자식이 많을 때 부모 요소에 클릭 핸들러를 추가하는 것입니다. event.target.tagName 또는 classList에 대한 간단한 테스트는 제가하는 일반적인 일입니다. 그것은 작동합니다 .... 수년 동안 그것을 사용했습니다. EventTarget이 HTMLElement로 분류되지 않았기 때문에 tagName / classList에 대한 정보는 얻지 못하지만 작동합니다.