Bunu sadece KeyboardEvent'imle yapmak istiyorum

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

Event.target, EventTarget türünde iken, Element'ten miras almaz. Bu yüzden bunu şöyle yapmalıyım:

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

Bu muhtemelen bazı tarayıcıların standartlara uymamasından kaynaklanıyor, değil mi? TypeScript'te doğru tarayıcı agnostik uygulaması nedir?

Not: KeyboardEvent'i yakalamak için jQuery kullanıyorum.

ElementTüm olay hedefleri öğe olmadığından, öğesinden miras almaz .

MDN'den :

Öğe, belge ve pencere en yaygın olay hedefleridir, ancak diğer nesneler de olay hedefleri olabilir, örneğin XMLHttpRequest, AudioNode, AudioContext ve diğerleri.

Kullanmaya KeyboardEventçalıştığınız şey bile bir DOM öğesinde veya pencere nesnesinde (ve teorik olarak başka şeylerde) gerçekleşebilir, bu nedenle tam orada evt.targetbir Element.

Bir DOM öğesindeki bir olaysa, güvenle varsayabileceğinizi söyleyebilirim evt.target. bir Element. Bunun bir tarayıcılar arası davranış meselesi olduğunu düşünmüyorum. Sadece bu EventTarget, daha soyut bir arayüz Element.

Daha fazla okuma: https://typescript.codeplex.com/discussions/432211

Typcript kullanarak, yalnızca işlevim için geçerli olan özel bir arayüz kullanıyorum. Örnek kullanım durumu.

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

Bu durumda, handleChange, hedef alanı HTMLInputElement türünde olan bir nesne alır.

Daha sonra kodumda kullanabilirim

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

Daha temiz bir yaklaşım, arayüzü ayrı bir dosyaya koymak olacaktır.

interface HandleNameChangeInterface {
  target: HTMLInputElement;
}

daha sonra aşağıdaki işlev tanımını kullanın:

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

Benim kullanım durumumda, handleChange için tek arayanın bir HTML öğesi türü girdi metni olduğu açıkça tanımlanmıştır.

JLRishe'nin cevabı doğru, bu yüzden bunu olay işleyicimde kullanıyorum:

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

Typescript 3.2.4

Mülk almak için hedefi uygun veri türüne çevirmelisiniz:

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

Eğer uzanır kendi genel arabirimi oluşturmak Could Event. Bunun gibi bir şey mi?

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

O zaman bunu şu şekilde kullanabilirsiniz:

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

TypeScript ile tür takma adlarını kullanabiliriz, örneğin:

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 doğru cevabı veriyor, ancak bu sözdizimi daha okunabilir ve bana daha hoş görünüyor:

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