手を動かしながら学ぶ TypeScript Part 4 -- クラスベースで作成し, HTMLElement の型定義を深掘りする

왜

TS に強くなりたかった
イベント系の型を知りたかった

参考

SmartHR 手を動かしながら学ぶ TypeScript

P.163 汎用的な処理を書いてみよう

CRA 와 React 앱리작성

npx create-react-app clstodo --template typescript

TS 로작성

クラスベースに書き換えて 스타트 프로 파티를 を追加

class App extends React.Component {
  start() {
    console.log('hello world');
  }
  render() {
    return (
      <div className="App">
      </div>
    );
  }
}

クラスで書き換えて,
render proparty の前に start procati を置く

これでブラウザで確認すると、start は動いていない.

부하 イventを読み取って

window.addEventListener('load', () => {
  const app = new App({})
  app.start()
})

브라우자노로드이벤트를 봐
App クラスを複製して 앱 クラスを作り
複製された app の start 프로 파티를 使う
すると console.log が動いた.

getElementById の型を追ってみる

    const button = document.getElementById
('deleteAllDoneTask')

getElementById を深追いする.ctrl 클릭 をすると

lib.dom.d.ts に飛ぶ.

    getElementById(elementId: string): HTMLElement | null;

引数の elementId に文字列 を受け取り
戻り値として HTMLElement 또는 null を返す

と言うことが読み取れる.

HTMLElement をさらに追ってみる

HTMLElement をさらに追ってみると

lib.dom.d.ts

/** Any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it. */

interface HTMLElement extends Element, DocumentAndElementEventHandlers, ElementCSSInlineStyle, ElementContentEditable, GlobalEventHandlers, HTMLOrSVGElement {
    accessKey: string;
    readonly accessKeyLabel: string;
    autocapitalize: string;
    dir: string;
    draggable: boolean;
    hidden: boolean;
    innerText: string;
    lang: string;
//...

    click(): void;
    addEventListener
<K extends keyof HTMLElementEventMap>
(type: K, listener: 
(this: HTMLElement, ev: HTMLElementEventMap[K])
 => any, options?: boolean | AddEventListenerOptions):
 void;

    addEventListener
(type: string, listener: 
EventListenerOrEventListenerObject, options?: 
boolean | AddEventListenerOptions): void;

    removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;

    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

interface 에서 Element や Document 와 EventElement handrato GlobalEvent handra拡張して

その中におなじみの draggable, innerText, lang, などあり
クリックや EventListner 추가/제거 もあり、ここで定義されていることがわかった.

これらは HTMLElementEventMap と言うものから拡張されている

HTMLElementEventMap

これを追ってみると

interface HTMLElementEventMap extends ElementEventMap, DocumentAndElementEventHandlersEventMap, GlobalEventHandlersEventMap {
}

요소 EventMap,

문서 및 요소 이벤트 처리기 EventMap,

전역 이벤트 처리기 EventMap,

これらのイベントマップから拡張されている.

一つ一つ追ってみる.

ElementEventMap

interface ElementEventMap {
    "fullscreenchange": Event;
    "fullscreenerror": Event;
}

ElementEventMap은 fulskrinの適用? 에라노미가가는

DocumentAndElementEventHandlersEventMap

interface DocumentAndElementEventHandlersEventMap {
    "copy": ClipboardEvent;
    "cut": ClipboardEvent;
    "paste": ClipboardEvent;
}

DocumentAndElementEventHandler아이벤트맵에

복사, 잘라내기, 붙여넣기 のコピペイベントがある

GlobalEventHandlersEventMap

interface GlobalEventHandlersEventMap {
    "keydown": KeyboardEvent;
    "keypress": KeyboardEvent;
    "keyup": KeyboardEvent;
    "load": Event;

    "mouseleave": MouseEvent;
    "mousemove": MouseEvent;
    "mouseout": MouseEvent;
    "mouseover": MouseEvent;
    "mouseup": MouseEvent;
    "pause": Event;
    "play": Event;

    "select": Event;
    "selectionchange": Event;
    "selectstart": Event;
    "slotchange": Event;
    "stalled": Event;
    "submit": SubmitEvent;
}

글로벌에

키보드 사양

마우스가 달린 시계의 イベント

폼페이노이벤트

등 HTML におけるほとんどのイベントがあることがわかった

これでHTMLElement の大枠が掴めた.

まとめ

クラスベースで TS をかくと、そのクラスのメソddを使うときは、
新しく new でコピーを作っ コピーの同名메소드を使う必要があり

HTMLEvent の 型を掘っていく와 GlobalEventHandlersEventMap
に行き着き、ここに殆どの HTML 要素でのイベントの型が入っていた.