내 KeyboardEvent로이 작업을 수행하고 싶습니다.

var tag = evt.target.tagName.toLowerCase();

Event.target은 EventTarget 유형이지만 Element에서 상속하지 않습니다. 그래서 다음과 같이 캐스팅해야합니다.

var tag = (<Element>evt.target).tagName.toLowerCase();

이것은 아마도 표준을 따르지 않는 일부 브라우저 때문일 것입니다. TypeScript에서 올바른 브라우저 불가지론 적 구현은 무엇입니까?

추신 : 저는 jQuery를 사용하여 KeyboardEvent를 캡처하고 있습니다.

답변

상속되지 않습니다 Element모든 이벤트 대상이 요소가 아니기 때문에 .

MDN에서 :

요소, 문서 및 창은 가장 일반적인 이벤트 대상이지만 다른 개체도 이벤트 대상이 될 수 있습니다 (예 : XMLHttpRequest, AudioNode, AudioContext 등).

KeyboardEvent사용하려는 것 조차도 DOM 요소 또는 창 객체 (그리고 이론적으로는 다른 것들)에서 발생할 수 있습니다. 따라서 바로 거기에서 evt.target다음과 같이 정의하는 것은 의미가 없습니다 .Element .

DOM 요소에 대한 이벤트 인 경우 안전하게 가정 할 수 있습니다 evt.target. 입니다 Element. 나는 이것이 브라우저 간 동작의 문제라고 생각하지 않습니다. 그것은 단지 EventTarget더 추상적 인 인터페이스입니다.Element .

추가 정보 : https://typescript.codeplex.com/discussions/432211

답변

typescript를 사용하여 내 기능에만 적용되는 사용자 정의 인터페이스를 사용합니다. 사용 사례의 예.

  handleChange(event: { target: HTMLInputElement; }) {
    this.setState({ value: event.target.value });
  }

이 경우 handleChange는 HTMLInputElement 유형의 대상 필드가있는 오브젝트를 수신합니다.

나중에 내 코드에서 사용할 수 있습니다.

<input type='text' value={this.state.value} onChange={this.handleChange} />

더 깔끔한 접근 방식은 인터페이스를 별도의 파일에 배치하는 것입니다.

interface HandleNameChangeInterface {
  target: HTMLInputElement;
}

나중에 다음 함수 정의를 사용하십시오.

  handleChange(event: HandleNameChangeInterface) {
    this.setState({ value: event.target.value });
  }

내 사용 사례에서 handleChange의 유일한 호출자는 입력 텍스트의 HTML 요소 유형이라는 것이 명시 적으로 정의되어 있습니다.

답변

JLRishe의 대답이 정확하므로 이벤트 처리기에서 간단히 사용합니다.

if (event.target instanceof Element) { /*...*/ }

답변

타이프 스크립트 3.2.4

속성을 검색하려면 대상을 적절한 데이터 유형으로 캐스팅해야합니다.

e => console.log((e.target as Element).id)

답변

.NET을 확장하는 고유 한 일반 인터페이스를 만들 수 있습니까 Event? 이 같은?

interface DOMEvent<T extends EventTarget> extends Event {
  target: T
}

그런 다음 다음과 같이 사용할 수 있습니다.

handleChange(event: DOMEvent<HTMLInputElement>) {
  this.setState({ value: event.target.value });
}

답변

typescript를 사용하면 다음과 같이 유형 별칭을 활용할 수 있습니다.

type KeyboardEvent = {
  target: HTMLInputElement,
  key: string,
};
const onKeyPress = (e: KeyboardEvent) => {
  if ('Enter' === e.key) { // Enter keyboard was pressed!
    submit(e.target.value);
    e.target.value = '';
    return;
  }
  // continue handle onKeyPress input events...
};

답변

@Bangonkali가 정답을 제공하지만이 구문은 더 읽기 쉽고 나에게 더 좋습니다.

eventChange($event: KeyboardEvent): void {
    (<HTMLInputElement>$event.target).value;
}