TypeScript - Typed MutationObserver

index.ts

/**
 * Extended version of MutationObserver that allows control of MutationRecord typing via type
 * parameter on (but not limited to) constructor. 
 *
 * I have used this to soothe the type checker on existing(/working) javascript code (using
 * HTMLElement for type parameter to cast mutation records as HTMLElements), however, similar to
 * ParentNode#querySelector without template literal type inferrence parsing the selector, I'd
 * imagine you can easily set an incorrect type for mutation records in a callback (until an
 * inference point is added).
 */

interface NodeListTyped<T extends Node> extends NodeList
{
    /**
     * Returns the node with index index from the collection. The nodes are sorted in tree order.
     */
    item(index: number): T | null;
    /**
     * Performs the specified action for each node in an list.
     * @param callbackfn  A function that accepts up to three arguments. forEach calls the callbackfn function one time for each element in the list.
     * @param thisArg  An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
     */
    forEach(callbackfn: (value: T, key: number, parent: NodeListTyped<T>) => void, thisArg?: any): void;

    [index: number]: T;
}

/** A MutationRecord represents an individual DOM mutation. It is the object that is passed to MutationObserver's callback. */
interface MutationRecordTyped<T extends Node = Node> extends MutationRecord
{
    /**
     * Return the nodes added and removed respectively.
     */
    readonly addedNodes: NodeListTyped<T>;
    /**
     * Return the previous and next sibling respectively of the added or removed nodes, and null otherwise.
     */
    readonly nextSibling: T | null;
    /**
     * Return the previous and next sibling respectively of the added or removed nodes, and null otherwise.
     */
    readonly previousSibling: T | null;
    /**
     * Return the nodes added and removed respectively.
     */
    readonly removedNodes: NodeListOf<T>;
    /**
     * Returns the node the mutation affected, depending on the type. For "attributes", it is the element whose attribute changed. For "characterData", it is the CharacterData node. For "childList", it is the node whose children changed.
     */
    readonly target: T;
    /**
     * Returns "attributes" if it was an attribute mutation. "characterData" if it was a mutation to a CharacterData node. And "childList" if it was a mutation to the tree of nodes.
     */
    readonly type: MutationRecordType;
}

interface MutationCallbackTyped<T extends Node>
{
    (mutations: MutationRecordTyped<T>[], observer: MutationObserverTyped<T>): void;
}

interface MutationObserverTyped<NT extends Node> extends MutationObserver
{
    observe<T extends Node = NT>(target: T, options: MutationObserverInit | undefined): void;
}

interface Window
{
    MutationObserver: 
    {
        prototype: MutationObserver;
        new<T extends Node = Node>(callback: MutationCallbackTyped<T>): MutationObserverTyped<T>;
    };
}