reactjs - 返回 React 组件的 Promise 的 Typescript 类型声明

Question

我有以下功能:

const withCacheRefresh = (lazyLoadComponent: any) => {
  return new Promise<React.ComponentType<any>>((resolve) => {
    lazyLoadComponent()
      .then(resolve)
      .catch(() => {
        window.location.reload(true);
      });
  });
}

它接受一个 promise 作为参数，特别是 lazy .我继续调用 promise ，或者通过返回 lazy 的结果来解决 promise ，或者在我的捕获中，刷新页面。我遇到了以下 Typescript 编译错误的问题:

Type 'Promise<ComponentType<any>>' is not assignable to type 'Promise<{ default: ComponentType<any>; }>'.
  Type 'ComponentType<any>' is not assignable to type '{ default: ComponentType<any>; }'.
    Property 'default' is missing in type 'ComponentClass<any, any>' but required in type '{ default: ComponentType<any>; }'.  TS2322

我有两个问题:

• 如何指定我的第一个参数 lazyLoadComponent属于返回 React.Component<any> 组件的函数的类型键入而不仅仅是 any ？

• 如何修复我的 Promise<React.ComponentType<any>>定义，使其符合 Promise<{ default: ComponentType<any>; }> 的要求类型?

更新

---

我收到的答复告诉我，我的解决方案对于我陈述的问题是不正确的，但我故意选择忽略有关我的更大问题空间的细微差别的细节。

自从有人问起，我觉得澄清起来并不困难:当为我的应用程序发布新部署时，会创建新 block ，并从生产工作区中清除旧 block 。因此，仍保留在先前版本中的客户端(因为应用程序尚未刷新到最新版本)仍在使用旧 block 。 HMR 将无法工作，因为这是一个生产 环境。显式刷新会导致服务 worker 检索最新的 block 。

此 Github Issue 中描述了类似的情况。

Answer 1

这是一种令人费解(并且有点不正确)的做事方式。

我假设你有一个错误的原因来重新加载页面而不是“我希望它修复错误”(如果这是原因或者如果它是为了缓存破坏目的，你绝对应该试试 HMR )。

编辑 由于 OP 已经阐明了他的意思，我建议，与其希望浏览器不缓存延迟加载的组件，从而在推出新版本时出错，不如在 Service Worker 本身中使用预缓存 list ，这将允许软件在注册新 list 时加载 list 。 See this question获取更多信息。您可以使用 the Workbox plugin, even if you don't use Workbox 将其集成到 bundler 本身。 .

我还假设您想将其与 lazy 一起使用，而不是在 lazy 上调用它，否则就不可能完全捕捉到任何错误。

import React from 'react';

type LazyFactory = Parameters<typeof React.lazy>[0];

const withCacheRefresh = (
  importResult: LazyFactory
): LazyFactory => () =>
  importResult().catch(() => {
    window.location.reload(true);
    // Following makes return type `never`, which satisfies TypeScript
    throw new Error('component load failed');
  });

没有必要将它包装在一个 promise 中，因为它已经了。你可以 .catch直接在上面。

用法:

const MyLazyComponent = React.lazy(withCacheRefresh(() => import('./Component')));