Given
type Loadable<T> = () => T
type LoadableCombinerResult<T> = { result: T }
I am looking to define types for a function that can handle multiple Loadable<ResponseDataType> inputs with different ResponseDataType for each input, along with a combiner to process the data from these loadables.
The function should manage error states and loading progress of the loadables, and call the combiner only when all loadables are successfully loaded.
While this is achievable in untyped JavaScript, I'm struggling to properly type it in TypeScript.
An example of non-variadic typing:
function useLoadableCombiner2<TResult, T1, T2>(
combiner: (data1: T1, data2: T2) => TResult,
loadable1: Loadable<T1>,
loadable2: Loadable<T2>
): LoadableCombinerResult<TResult> { ... }
function useLoadableCombiner3<TResult, T1, T2, T3>(
combiner: (data1: T1, data2: T2, data3: T3) => TResult,
loadable1: Loadable<T1>,
loadable2: Loadable<T2>,
loadable3: Loadable<T3>
): LoadableCombinerResult<TResult> { ... }
function useLoadableCombiner4<TResult, T1, T2, T3, T4>(
combiner: (data1: T1, data2: T2, data3: T3, data4: T4) => TResult,
loadable1: Loadable<T1>,
loadable2: Loadable<T2>,
loadable3: Loadable<T3>,
loadable4: Loadable<T4>
): LoadableCombinerResult<TResult> { ... }
function useLoadableCombinerN<...>(...): LoadableCombinerResult<TResult> { ... }
Is there a way to consolidate these into one TypeScript function declaration?
Perhaps using an array or typed-tuple instead of a variable number of arguments.
The objective is to pass in a variable number of loadables and then execute the typed combiner with all the data after successful loading of all inputs.