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


- version
    - "typescript": "^3.5.3"
    - "@types/react-dom": "^16.8.5"
- files
    - [TypeScript/lib/lib.dom.d.ts](https://github.com/microsoft/TypeScript/blob/master/lib/lib.dom.d.ts)
    - [DefinitelyTyped/types/react/index.d.ts](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/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)について](https://ja.reactjs.org/docs/events.html)
- 全てのイベントが継承するプロパティ（たぶん）
- 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)について](https://ja.reactjs.org/docs/events.html)
- [BaseSyntheticEvent](#reactbasesyntheticevent)の型引数の１つ目が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?](https://stackoverflow.com/questions/52667959/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](#globaljsxintrinsicelements)に使用されている。
    - `a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;`
- [ClassAttributes](#reactclassattributes)

### 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](#reacthtmlattributes)に要素独自の属性（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](#reactreacthtml)と[ReactSVG](#reactreactsvg)を合わせたもの。




## 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](#reactdetailedhtmlprops)でラップしている。