452
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

any型で諦めない React.EventCallback

React x TypeScript の鬼門のひとつに「props に記述する EventCallback の適切な書き方が分からない」というものがあります。さて、このコンポーネントの type Props どう型定義するべきでしょうか?

const View: React.FC<Props> = props => (
  <form onSubmit={props.onSubmit}>
    <input
      type="text"
      onClick={props.onClick}
      onChange={props.onChange}
      onKeyPress={props.onkeypress}
      onBlur={props.onBlur}
      onFocus={props.onFocus}
    />
    <div onClick={props.onClickDiv} />
  </form>
)

「とくに困らないので〜」という理由でつぎの様に妥協していませんか? 部分的妥協は、TypeScript の良い点でもありますが、せっかくなのできちんとしたいですよね。

type Props = {
  onClick: (event: any) => void
  onChange: (event: any) => void
  onkeypress: (event: any) => void
  onBlur: (event: any) => void
  onFocus: (event: any) => void
  onSubmit: (event: any) => void
  onClickDiv: (event: any) => void
}

ただ、EventCallback の型はたくさんあるし、初見ではどれを指定すれば良いのか…迷いますよね。自分は普段、VSCode を使っているため、迷ったときは VSCode のコードヒントに頼ることにしています。つぎのキャプチャは、onClick まで空で書いて、 onClick にマウスオーバーした時のものです。

image.png

答えが全部、型推論に書いてありましたね!これで指定方法が分かったので、コピペします。

type Props = {
  onClick: (event: React.MouseEvent<HTMLInputElement>) => void
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
  onkeypress: (event: React.KeyboardEvent<HTMLInputElement>) => void
  onBlur: (event: React.FocusEvent<HTMLInputElement>) => void
  onFocus: (event: React.FocusEvent<HTMLInputElement>) => void
  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
  onClickDiv: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
}

Generics に指定している型はなに?

さて、React.MouseEvent<XXX>React.ChangeEvent<XXX>の様に、Generics にHTMLInputElement型や HTMLDivElement型など、いろいろな型が指定されていますね…。

import もしていないし、この型はどこから来たもので、いったいこれらの指定で何が変わるのでしょうか? HTMLInputElement型の中身をみてみましょう。型にマウスを当て、Option キーを押しながらマウスクリックすることで、いつもの様に型定義へジャンプします。

@types/react/global.d.ts
interface HTMLDivElement extends HTMLElement { }
interface HTMLDListElement extends HTMLElement { }
interface HTMLEmbedElement extends HTMLElement { }
interface HTMLFieldSetElement extends HTMLElement { }
interface HTMLFormElement extends HTMLElement { }
interface HTMLHeadingElement extends HTMLElement { }
interface HTMLHeadElement extends HTMLElement { }
interface HTMLHRElement extends HTMLElement { }
interface HTMLHtmlElement extends HTMLElement { }
interface HTMLIFrameElement extends HTMLElement { }
interface HTMLImageElement extends HTMLElement { }
interface HTMLInputElement extends HTMLElement { }
interface HTMLModElement extends HTMLElement { }
interface HTMLLabelElement extends HTMLElement { }
interface HTMLLegendElement extends HTMLElement { }
interface HTMLLIElement extends HTMLElement { }

紙面の都合上省略していますが、こんなにあるのか…とたくさん出てきましたね!よくみてみると…。ほとんどが extends HTMLElement { } ですね。名前が違うだけで、全部一緒じゃないですかw でも実は、interface にはオーバーロードの仕組みがあり、それぞれの型は、@types/react/global.d.ts で明示されていない定義を上書きしています。元の HTMLInputElement型は一体どこからきているかというと…

image.png

キャプチャ右側のとおり一覧で表示されます。 lib.dom.d.tsglobal.d.ts で定義されていることが分かりますね。global.d.ts は、@types/react で提供されている定義、lib.dom.d.ts は TypeScript から提供されている定義です。

lib.dom なんて入れた覚えが無いよー」と不思議に思うかもしれませんが、これの出どころは、tsconfig の lib 指定です。tsconfig の lib 指定が無い場合、他の指定内容(targetなど)に応じて適切なデフォルト lib が import されるためこの様になります。出所不明だった HTMLInputElement型 はこの様に、interface のオーバーロードの仕組みで塗り重ねられていたんですね。

必要に応じて、抽象度を見極める

onClick を Divタグ・Buttonタグなど、複数に適用したい場合、詳細な型である HTMLInputElement型や HTMLDivElement型 を指定してしまうと、汎用的でなく不便な場合があります。そういう時は、継承元の HTMLElement型など、抽象的な型を指定すれば良いです。

type Props = {
  onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void
}

EventCallback の引数型をしっかり享受したい場合は、型推論通りの内容を使いましょう。

type Props = {
  onClickButton: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
}

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
452
Help us understand the problem. What are the problem?