fix: improve chainEventHandlers type

support spreading/passing more than 8 arguments and make the return type more accurate

Author: schroda

src/chainEventHandlers.ts

@@ -1,88 +1,42 @@
-/* eslint-disable @typescript-eslint/ban-types */
-export function chainEventHandlers<T1 extends {}, T2 extends {}>(
-  t1: T1,
-  t2: T2
-): T1 & T2
-export function chainEventHandlers<T1 extends {}, T2 extends {}, T3 extends {}>(
-  t1: T1,
-  t2: T2,
-  t3: T3
-): T1 & T2 & T3
-export function chainEventHandlers<
-  T1 extends {},
-  T2 extends {},
-  T3 extends {},
-  T4 extends {}
->(t1: T1, t2: T2, t3: T3, t4: T4): T1 & T2 & T3 & T4
-export function chainEventHandlers<
-  T1 extends {},
-  T2 extends {},
-  T3 extends {},
-  T4 extends {},
-  T5 extends {}
->(t1: T1, t2: T2, t3: T3, t4: T4, t5: T5): T1 & T2 & T3 & T4 & T5
-export function chainEventHandlers<
-  T1 extends {},
-  T2 extends {},
-  T3 extends {},
-  T4 extends {},
-  T5 extends {},
-  T6 extends {}
->(t1: T1, t2: T2, t3: T3, t4: T4, t5: T5, t6: T6): T1 & T2 & T3 & T4 & T5 & T6
-export function chainEventHandlers<
-  T1 extends {},
-  T2 extends {},
-  T3 extends {},
-  T4 extends {},
-  T5 extends {},
-  T6 extends {},
-  T7 extends {}
->(
-  t1: T1,
-  t2: T2,
-  t3: T3,
-  t4: T4,
-  t5: T5,
-  t6: T6,
-  t7: T7
-): T1 & T2 & T3 & T4 & T5 & T6 & T7
-export function chainEventHandlers<
-  T1 extends {},
-  T2 extends {},
-  T3 extends {},
-  T4 extends {},
-  T5 extends {},
-  T6 extends {},
-  T7 extends {},
-  T8 extends {}
->(
-  t1: T1,
-  t2: T2,
-  t3: T3,
-  t4: T4,
-  t5: T5,
-  t6: T6,
-  t7: T7,
-  t8: T8
-): T1 & T2 & T3 & T4 & T5 & T6 & T7 & T8
-export function chainEventHandlers(
-  first: Record<string, any>,
-  ...rest: Record<string, any>[]
-): Record<string, any> {
-  const result: Record<string, any> = { ...first }
-  for (const obj of rest) {
-    for (const key in obj) {
-      const value = obj[key]
-      const prev = result[key]
-      if (typeof prev === 'function' && typeof value === 'function') {
-        result[key] = (...args: any[]) => {
-          prev(...args)
-          return value(...args)
+type Assign<A, B> = {
+    [K in keyof A | keyof B]:
+    K extends keyof A
+        ? K extends keyof B
+            ? NonNullable<A[K]> extends (...args: any[]) => any
+                ? NonNullable<B[K]> extends (...args: any[]) => any
+                    ? A[K] | B[K]
+                    : B[K]
+                : B[K]
+            : A[K]
+        : K extends keyof B
+            ? B[K]
+            : never
+}
+
+type MergeObjectsArray<T extends object[]> = T extends [infer F, ...infer R]
+    ? Assign<F, R extends object[] ? MergeObjectsArray<R> : NonNullable<unknown>>
+    : NonNullable<unknown>;
+
+type PrettyObject<T> = { [K in keyof T]: T[K] } & NonNullable<unknown>
+
+export function chainEventHandlers<First extends Record<string, any>, Rest extends Record<string, any>[]>(
+    first: First,
+    ...rest: Rest
+): PrettyObject<MergeObjectsArray<[First, ...Rest]>> {
+    const result: Record<string, any> = {...first}
+    for (const obj of rest) {
+        for (const key in obj) {
+            const value = obj[key]
+            const prev = result[key]
+            if (typeof prev === 'function' && typeof value === 'function') {
+                result[key] = (...args: any[]) => {
+                    prev(...args)
+                    return value(...args)
+                }
+            } else {
+                result[key] = value
+            }
         }
-      } else {
-        result[key] = value
-      }
     }
-  }
-  return result
+    return result as MergeObjectsArray<[First, ...Rest]>
 }

test/chainEventHandlers.test.ts

@@ -53,3 +53,55 @@ describe(`chainEventHandlers`, function () {
     ])
   })
 })
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+function typeTest() {
+  {
+    const { onClick } = chainEventHandlers(
+        { onClick: (a: number) => {} },
+        { onClick: 'foo' }
+    )
+    // @ts-expect-error string isn't callable
+    onClick()
+    // @ts-expect-error string isn't callable
+    onClick(1)
+  }
+  {
+    const { onClick } = chainEventHandlers(
+        { onClick: 'foo' },
+        { onClick: (a: number) => {} }
+    )
+    // @ts-expect-error missing argument
+    onClick()
+    onClick(1)
+  }
+  {
+    const { onClick } = chainEventHandlers(
+        { onClick: (a: number) => {} },
+        { onClick: (a: string) => {} }
+    )
+    // @ts-expect-error signatures don't match so no typesafe call is possible
+    onClick()
+    // @ts-expect-error signatures don't match so no typesafe call is possible
+    onClick(1)
+    // @ts-expect-error signatures don't match so no typesafe call is possible
+    onClick('a')
+  }
+
+  {
+    const { onClick } = chainEventHandlers(
+        { onClick: (a: string, b?: number) => {} },
+        { onClick: (a: string, b?: string) => {} }
+    )
+    onClick('a')
+    onClick('a', undefined)
+    // @ts-expect-error invalid type for `a` argument
+    onClick(1)
+    onClick(
+        'a',
+        // @ts-expect-error the types for the `b` argument don't match, so only `undefined` is allowed here
+        1
+    )
+  }
+}
+/* eslint-enable @typescript-eslint/no-unused-vars */