React で型の named import は辞めよう

React コーディング全てではなく、主に SyntheticEvent 型を継承している DOM 周りの型に限っては、named import を避けるべきです。一見エラーにならない様に感じる次のコードですが、onClick にバインディングする行でエラーが発生します。

import React from 'react'
import { MouseEvent } from 'react'
type Props = {
  handleClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
}
const Component: React.FC<Props> = props => (
  <div>
    <button onClick={props.handleClick}></button>  // Error
  </div>
)

型名称の衝突

React.MouseEvent<T = Element, E = NativeMouseEvent> と定義元にある様に、Generics 2番目は、Native の Event型を期待しています。例えばブラウザ向けのプロジェクトの場合、それは lib.dom.d.ts で global定義されている MouseEvent を指します。

そのため、@types/react から named import した MouseEvent と衝突してしまい、エラーになってしまっていた、という訳です。SyntheticEvent 型を継承している @types/react 提供型と、lib.dom.d.ts で global定義 されている型はこんなに被っています。

x ClipboardEvent
x CompositionEvent
x DragEvent
x PointerEvent
x FocusEvent
FormEvent
InvalidEvent
ChangeEvent
x KeyboardEvent
x MouseEvent
x TouchEvent
x UIEvent
x WheelEvent
x AnimationEvent
x TransitionEvent

そのコンテキストで多様し冗長だから、という理由で型を named import すると、無駄に時間を溶かしてしまうかもしれないので注意しましょう。非常にややこしいですね。