Improve relatedTarget typing

types/bootstrap/bootstrap-tests.ts

@@ -34,12 +34,16 @@ $("#carousel").carousel("pause");
 
 $("#carousel").carousel(100);
 
-$("#carousel").on("slide.bs.carousel", function(ev) {
+$("#carousel").on("slide.bs.carousel", function(e) {
     const that: HTMLElement = this;
-    const from: number = ev.from;
-    const to: number = ev.to;
-    const direction: string = ev.direction;
-    const data: undefined = ev.data;
+
+    const data: undefined = e.data;
+    const carousel: HTMLElement = e.target;
+
+    const direction: string = e.direction;
+    const relatedTarget: HTMLElement = e.relatedTarget;
+    const from: number = e.from;
+    const to: number = e.to;
 });
 
 $("#carousel").carousel({
@@ -101,7 +105,11 @@ $("#dropdown").dropdown();
 // $ExpectType JQuery<HTMLElement>
 $("#dropdown").dropdown("update");
 
-$("#dropdown").on("hide.bs.dropdown", () => {});
+$("#dropdown").on("hide.bs.dropdown", (e) => {
+    const data: undefined = e.data;
+    const container: HTMLElement = e.target;
+    const togglingAnchorElement: HTMLElement = e.relatedTarget;
+});
 
 $("#dropdown").dropdown({
     offset: 10,
@@ -141,7 +149,13 @@ $("#modal").modal();
 // $ExpectType JQuery<HTMLElement>
 $("#modal").modal("show");
 
-$("#modal").on("hide.bs.modal", () => {});
+$("#modal").on("show.bs.modal", (e) => {
+    const data: undefined = e.data;
+    const modal: HTMLElement = e.target;
+    if (e.relatedTarget) {
+        const clickedElement: HTMLElement = e.relatedTarget;
+    }
+});
 
 $("#modal").modal({
     backdrop: false,
@@ -226,8 +240,9 @@ $("#scrollspy").scrollspy({
 $("#someListItem").tab("show");
 
 $("a[data-toggle=\"list\"]").on("shown.bs.tab", (e) => {
-    e.target; // newly activated tab
-    e.relatedTarget; // previous active tab
+    const data: undefined = e.data;
+    const newlyActivatedTab: HTMLElement = e.target;
+    const previousActiveTab: HTMLElement = e.relatedTarget;
 });
 
 // --------------------------------------------------------------------------------------

types/bootstrap/index.d.ts

@@ -325,12 +325,22 @@ export interface TooltipOption {
 // Events
 // --------------------------------------------------------------------------------------
 
-export interface CarouselEventHandler<TElement> extends JQuery.TriggeredEvent<TElement, undefined> {
+export interface CarouselEventHandler<TElement> extends JQuery.TriggeredEvent<TElement, undefined, HTMLElement, HTMLElement> {
+    /**
+     * The carousel dom element.
+     */
+    target: HTMLElement; // overridden only for better JsDoc
+
     /**
      * The direction in which the carousel is sliding.
      */
     direction: "left" | "right";
 
+    /**
+     * The DOM element that is being slid into place as the active item.
+     */
+    relatedTarget: HTMLElement;
+
     /**
      * The index of the current item.
      */
@@ -342,7 +352,44 @@ export interface CarouselEventHandler<TElement> extends JQuery.TriggeredEvent<TE
     to: number;
 }
 
-export interface TapEventHandler<TElement> extends JQuery.TriggeredEvent<TElement, undefined> {
+export interface DropdownsEventHandler<TElement> extends JQuery.TriggeredEvent<TElement, undefined, HTMLElement, HTMLElement> {
+    /**
+     * The the dropdown's toggle and the dropdown menu container (the `.dropdown` element).
+     */
+    target: HTMLElement; // overridden only for better JsDoc
+
+    /**
+     * The toggling anchor element.
+     */
+    relatedTarget: HTMLElement;
+}
+
+export interface ModalEventHandler<TElement> extends JQuery.TriggeredEvent<TElement, undefined, HTMLElement, HTMLElement> {
+    /**
+     * The modal dom element.
+     */
+    target: HTMLElement; // overridden only for better JsDoc
+
+    /**
+     * For `show.bs.modal` and `shown.bs.modal` is the clicked element, when caused by a _click_.
+     * Otherwise is undefined.
+     */
+    relatedTarget: HTMLElement | undefined;
+}
+
+export interface TapEventHandler<TElement> extends JQuery.TriggeredEvent<TElement, undefined, HTMLElement, HTMLElement> {
+    /**
+     * * For `show.bs.tab` and `shown.bs.tab`, is the newly activated tab.
+     * * For `hide.bs.tab`, is the current active tab.
+     * * For `hidden.bs.tab`, is the previous active tab.
+     */
+    target: HTMLElement; // overridden only for better JsDoc
+
+    /**
+     * * For `show.bs.tab` and `shown.bs.tab`, is the previous active tab.
+     * * For `hide.bs.tab`, is the new soon-to-be-active tab.
+     * * For `hidden.bs.tab`, is the new active tab.
+     */
     relatedTarget: HTMLElement;
 }
 
@@ -390,10 +437,12 @@ declare global {
         tooltip(options?: TooltipOption): this;
 
         on(events: CarouselEvent, handler: JQuery.EventHandlerBase<TElement, CarouselEventHandler<TElement>>): this;
+        on(events: DropdownEvent, handler: JQuery.EventHandlerBase<TElement, DropdownsEventHandler<TElement>>): this;
+        on(events: ModalEvent, handler: JQuery.EventHandlerBase<TElement, ModalEventHandler<TElement>>): this;
         on(events: TapEvent, handler: JQuery.EventHandlerBase<TElement, TapEventHandler<TElement>>): this;
-        on(events:
-            AlertEvent | CollapseEvent | DropdownEvent | ModalEvent |
-            PopoverEvent | ScrollspyEvent | TooltipEvent,
-            handler: JQuery.EventHandler<TElement>): this;
+        on(
+            events: AlertEvent | CollapseEvent | PopoverEvent | ScrollspyEvent | TooltipEvent,
+            handler: JQuery.EventHandler<TElement>
+        ): this;
     }
 }