Как задать тип функции принимающей промисы и возвращающей выполненые промисы?

Question

[kyzinatra]

Я хочу написать хук-обертку, которая бы выполняла динамические импорты и передавала бы их в функцию

export function useEffectWithImports<T extends Promise<any>[]>(
  fn: (a: { [P in keyof T]: Awaited<T[P]> }) => any,
  args: any[],
  imports: T
) {
  useEffect(() => {
    Promise.all(imports).then(res => {
      fn(res);
    });
  }, args);
}

Но когда я использую эту функцию, он не видит что я могу взять из res.

useEffectWithImports(
    ([{ onAuthStateChanged }]) => { // Property 'onAuthStateChanged' does not exist on type '{ default: typeof import...
      onAuthStateChanged(auth, user => {});
    },
    [],
    [import("firebase/auth")]
  );

Как можно поправить?

PS
Если вот так записать, то все работает

useEffect(() => {
    const imports = Promise.all([import("firebase/auth"), import("../../../firebase.config")]);
    imports.then(([{ onAuthStateChanged }, { auth }]) => {})
}, [])

Answer 1

[Daniel~]

Добавьте [].

T extends Promise<any>[] | []

Лучше передавать импорты через callback, чтобы они каждый раз не импортировались. Вот моя версия:

import { DependencyList, useEffect, useRef } from "react";

type Import = Promise<any>;

type AwaitedImports<T extends Import[]> = { [P in keyof T]: Awaited<T[P]> };

type Resolve<T extends Import[]> = (result: AwaitedImports<T>) => void;

function useEffectWithImports<T extends Import[] | []>(
  resolve: Resolve<T>,
  imports: () => T,
  deps?: DependencyList
) {
  const resolveRef = useRef(resolve);
  const importsRef = useRef(imports);
  resolveRef.current = resolve;
  importsRef.current = imports;

  useEffect(() => {
    const promises = importsRef.current();
    Promise.all(promises)
      .then(resolveRef.current as Resolve<T>)
      .catch(console.error);
  }, deps);
}

useEffectWithImports(
  ([fs, path]) => {},
  () => [import("fs"), import("path")],
  []
);

Comments

[kyzinatra]

Ну если повторно вызвать импорт, он вроде не станет снова грузить а просто возьмет из кэша. Но все равно верно, лучше колбеком
спасибо большое