version
- "typescript": "^3.5.3"
- "@types/react-dom": "^16.8.5"
files
- TypeScript/lib/lib.dom.d.ts
- DefinitelyTyped/types/react/index.d.ts

※ 一言コメントは間違っているかもしれません。

Built-in type

Element

TypeScript/lib/lib.dom.d.ts

/** Element is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element. */
interface Element extends Node, ParentNode, NonDocumentTypeChildNode, ChildNode, Slotable, InnerHTML, Animatable {
...
  className: string;
...
  readonly tagName: string;
...
  getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
  getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
  getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
...
  removeEventListener<K extends keyof ElementEventMap>(type: K, listener: (this: Element, ev: ElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

Event

TypeScript/lib/lib.dom.d.ts

interface Event {
...
  readonly type: string;
...
  stopImmediatePropagation(): void;
...
  stopPropagation(): void;
...

EventTarget

TypeScript/lib/lib.dom.d.ts

/** EventTarget is a DOM interface implemented by objects that can receive events and may have listeners for them. */
interface EventTarget {
  /**
   * Appends an event listener for events whose type attribute value is type. The callback argument sets the callback that will be invoked when the event is dispatched.
   * The options argument sets listener-specific options. For compatibility this can be a
   * boolean, in which case the method behaves exactly as if the value was specified as options's capture.
   * When set to true, options's capture prevents callback from being invoked when the event's eventPhase attribute value is BUBBLING_PHASE. When false (or not present), callback will not be invoked when event's eventPhase attribute value is CAPTURING_PHASE. Either way, callback will be invoked if event's eventPhase attribute value is AT_TARGET.
   * When set to true, options's passive indicates that the callback will not cancel the event by invoking preventDefault(). This is used to enable performance optimizations described in §2.8 Observing event listeners.
   * When set to true, options's once indicates that the callback will only be invoked once after which the event listener will
   * be removed.
   * The event listener is appended to target's event listener list and is not appended if it has the same type, callback, and capture.
   */
  addEventListener(type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions): void;
  /**
   * Dispatches a synthetic event event to target and returns true
   * if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.
   */
  dispatchEvent(event: Event): boolean;
  /**
   * Removes the event listener in target's event listener list with the same type, callback, and options.
   */
  removeEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
}

declare var EventTarget: {
  prototype: EventTarget;
  new(): EventTarget;
};

React

NativeMouseEvent

DefinitelyTyped/types/react/index.d.ts

... 
type NativeFocusEvent = FocusEvent;
type NativeKeyboardEvent = KeyboardEvent;
type NativeMouseEvent = MouseEvent;
...

React.ClassAttributes

DefinitelyTyped/types/react/index.d.ts

declare namespace React {
... 
    interface ClassAttributes<T> extends Attributes {
        ref?: LegacyRef<T>;
    }

React.BaseSyntheticEvent

DefinitelyTyped/types/react/index.d.ts

declare namespace React {
... 
    // Event System
    // ----------------------------------------------------------------------
    // TODO: change any to unknown when moving to TS v3
    interface BaseSyntheticEvent<E = object, C = any, T = any> {
        nativeEvent: E;
        currentTarget: C;
        target: T;
        bubbles: boolean;
        cancelable: boolean;
        defaultPrevented: boolean;
        eventPhase: number;
        isTrusted: boolean;
        preventDefault(): void;
        isDefaultPrevented(): boolean;
        stopPropagation(): void;
        isPropagationStopped(): boolean;
        persist(): void;
        timeStamp: number;
        type: string;
    }

合成イベント (SyntheticEvent)について
全てのイベントが継承するプロパティ（たぶん）
stopPropagationは入ってるがstopImmediatePropagationが入っていない。
- https://github.com/facebook/react/issues/11547

React.SyntheticEvent

DefinitelyTyped/types/react/index.d.ts

declare namespace React {
... 
    interface SyntheticEvent<T = Element, E = Event> extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {}

合成イベント (SyntheticEvent)について
BaseSyntheticEventの型引数の１つ目がnativeEvent、２つ目がcurrentTarget、３つ目がtarget

React.MouseEvent

DefinitelyTyped/types/react/index.d.ts

declare namespace React {
... 
    interface MouseEvent<T = Element, E = NativeMouseEvent> extends SyntheticEvent<T, E> {
        altKey: boolean;
        button: number;
        buttons: number;
        clientX: number;
        clientY: number;
        ctrlKey: boolean;
        /**
         * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
         */
        getModifierState(key: string): boolean;
        metaKey: boolean;
        movementX: number;
        movementY: number;
        pageX: number;
        pageY: number;
        relatedTarget: EventTarget;
        screenX: number;
        screenY: number;
        shiftKey: boolean;
    }

NativeMouseEventにはlib.d.tsのMouseEventが入っている。

React.EventHandler, React.ReactEventHandler, React.MouseEventHandler

DefinitelyTyped/types/react/index.d.ts

declare namespace React {
... 
    type EventHandler<E extends SyntheticEvent<any>> = { bivarianceHack(event: E): void }["bivarianceHack"];

    type ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;

... 
    type FocusEventHandler<T = Element> = EventHandler<FocusEvent<T>>;
... 
    type KeyboardEventHandler<T = Element> = EventHandler<KeyboardEvent<T>>;
... 
    type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>;
...

What is the purpose of bivarianceHack in TypeScript types?

React.EventHandler

React.ReactEventHandler

ReactEventHandlerはonLoadやonSelectなど、独自のプロパティ（MouseEventのpageXなど）を持たないイベントに使用される。
nativeEventにはlib.d.tsのEventが入る。

React.MouseEventHandler

nativeEventにはlib.d.tsのMouseEventが入る。

React.Props, React.HTMLProps, React.DetailedHTMLProps

DefinitelyTyped/types/react/index.d.ts

declare namespace React {
... 
    interface Props<T> {
        children?: ReactNode;
        key?: Key;
        ref?: LegacyRef<T>;
    }

    interface HTMLProps<T> extends AllHTMLAttributes<T>, ClassAttributes<T> {
    }

    type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = ClassAttributes<T> & E;

    interface SVGProps<T> extends SVGAttributes<T>, ClassAttributes<T> {
    }

React.Props

React.HTMLProps

React.DetailedHTMLProps

JSX.IntrinsicElementsに使用されている。
- a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
ClassAttributes

React.SVGProps

React.DOMAttributes

DefinitelyTyped/types/react/index.d.ts

declare namespace React {
... 
    interface DOMAttributes<T> {
        children?: ReactNode;
        dangerouslySetInnerHTML?: {
            __html: string;
        };
... 
        // Clipboard Events
        // Composition Events
...
        // Focus Events
        onFocus?: FocusEventHandler<T>;
... 
        // Form Events
...
        // Image Events
        onLoad?: ReactEventHandler<T>;
... 
        // Keyboard Events
        onKeyDown?: KeyboardEventHandler<T>;
... 
        // Media Events
...
        // MouseEvents
        onClick?: MouseEventHandler<T>;
... 
        // Selection Events
        onSelect?: ReactEventHandler<T>;
... 
        // Touch Events
        // Pointer Events
        // UI Events
        // Wheel Events
        // Animation Events
        // Transition Events
...
    }

childrenとdangerouslySetInnerHTML以外は全部Event(on~)

React.CSSProperties

DefinitelyTyped/types/react/index.d.ts

declare namespace React {
... 
    export interface CSSProperties extends CSS.Properties<string | number> {
        /**
         * The index signature was removed to enable closed typing for style
         * using CSSType. You're able to use type assertion or module augmentation
         * to add properties or an index signature of your own.
         *
         * For examples and more information, visit:
         * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
         */
    }

React.HTMLAttributes

DefinitelyTyped/types/react/index.d.ts

declare namespace React {
... 
    interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
        // React-specific Attributes
        defaultChecked?: boolean;
        defaultValue?: string | string[];
        suppressContentEditableWarning?: boolean;
        suppressHydrationWarning?: boolean;
... 
        // Standard HTML Attributes
        className?: string;
... 
        hidden?: boolean;
... 
        // Unknown
        // WAI-ARIA
        // RDFa Attributes
        // Non-standard Attributes
    }

共通の属性(classNameなど) + aria + DOMAttributes(childrentとdangerouslySetInnerHTMLとon~)。(SVGなどは除く)

React.AllHTMLAttributes

DefinitelyTyped/types/react/index.d.ts

declare namespace React {
... 
    interface AllHTMLAttributes<T> extends HTMLAttributes<T> {
        // Standard HTML Attributes
... 
        autoFocus?: boolean;
... 
        checked?: boolean;
... 
        target?: string;
... 
        value?: string | string[] | number;
... 
    }

React.HTMLAttributesに要素独自の属性（inputやbuttonのvalueやautofocusなど）も含めたもの。(SVGなどは除く)

React.ButtonHTMLAttributes

DefinitelyTyped/types/react/index.d.ts

declare namespace React {
... 
    interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
        autoFocus?: boolean;
        disabled?: boolean;
        form?: string;
        formAction?: string;
        formEncType?: string;
        formMethod?: string;
        formNoValidate?: boolean;
        formTarget?: string;
        name?: string;
        type?: 'submit' | 'reset' | 'button';
        value?: string | string[] | number;
    }

button要素の属性

React.InputHTMLAttributes

DefinitelyTyped/types/react/index.d.ts

declare namespace React {
... 
    interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
        accept?: string;
        alt?: string;
        autoComplete?: string;
        autoFocus?: boolean;
        capture?: boolean | string; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute
        checked?: boolean;
        crossOrigin?: string;
        disabled?: boolean;
        form?: string;
        formAction?: string;
        formEncType?: string;
        formMethod?: string;
        formNoValidate?: boolean;
        formTarget?: string;
        height?: number | string;
        list?: string;
        max?: number | string;
        maxLength?: number;
        min?: number | string;
        minLength?: number;
        multiple?: boolean;
        name?: string;
        pattern?: string;
        placeholder?: string;
        readOnly?: boolean;
        required?: boolean;
        size?: number;
        src?: string;
        step?: number | string;
        type?: string;
        value?: string | string[] | number;
        width?: number | string;

        onChange?: ChangeEventHandler<T>;
    }

input要素の属性

React.SVGAttributes

DefinitelyTyped/types/react/index.d.ts

declare namespace React {
... 
    interface SVGAttributes<T> extends AriaAttributes, DOMAttributes<T> {
        // Attributes which also defined in HTMLAttributes
        // See comment in SVGDOMPropertyConfig.js
        className?: string;
... 
        // Other HTML properties supported by SVG elements in browsers
        role?: string;
... 
        // SVG Specific attributes
        accentHeight?: number | string;
... 
        zoomAndPan?: string;
    }

"SVG要素（svg要素だけではなくuseやcircleも含めたSVG周りの要素）"の属性

React.ReactHTML

DefinitelyTyped/types/react/index.d.ts

declare namespace React {
... 
    interface ReactHTML {
        a: DetailedHTMLFactory<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
        abbr: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
        address: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
... 

    }

React.ReactSVG

DefinitelyTyped/types/react/index.d.ts

declare namespace React {
... 
    interface ReactHTML {
        animate: SVGFactory;
        circle: SVGFactory;
        clipPath: SVGFactory;
... 

    }

React.ReactDOM

DefinitelyTyped/types/react/index.d.ts

declare namespace React {
... 
    interface ReactDOM extends ReactHTML, ReactSVG { }

ReactHTMLとReactSVGを合わせたもの。

global.JSX.IntrinsicElements

DefinitelyTyped/types/react/index.d.ts

declare global {
    namespace JSX {
... 
        interface IntrinsicElements {
            // HTML
            a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
            abbr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
            address: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
... 
            // SVG
            svg: React.SVGProps<SVGSVGElement>;

            animate: React.SVGProps<SVGElement>; // TODO: It is SVGAnimateElement but is not in TypeScript's lib.dom.d.ts for now.
            animateMotion: React.SVGProps<SVGElement>;
... 
    }

DetailedHTMLPropsでラップしている。

lib.dom.d.tsとreact/index.d.tsのメモ

Built-in type

Element

Event

EventTarget

React

NativeMouseEvent

React.ClassAttributes

React.BaseSyntheticEvent

React.SyntheticEvent

React.MouseEvent

React.EventHandler, React.ReactEventHandler, React.MouseEventHandler

React.EventHandler

React.ReactEventHandler

React.MouseEventHandler

React.Props, React.HTMLProps, React.DetailedHTMLProps

React.Props

React.HTMLProps

React.DetailedHTMLProps

React.SVGProps

React.DOMAttributes

React.CSSProperties

React.HTMLAttributes

React.AllHTMLAttributes

React.ButtonHTMLAttributes

React.InputHTMLAttributes

React.SVGAttributes

React.ReactHTML

React.ReactSVG

React.ReactDOM

global.JSX.IntrinsicElements