TypeScript + React.Lazy答案

【问题标题】：TypeScript + React.LazyTypeScript + React.Lazy
【发布时间】：2020-06-26 12:33:52
【问题描述】：

const Game = React.lazy(() => new Promise( (resolve) => {
    setTimeout( () => resolve(import('./Game')) , 1000)
}))

错误: 错误:(6, 35) TS2345: 类型参数'Promise'不能分配给'{默认值：从不； } | PromiseLike |不明确的'。类型 'Promise' 不可分配给类型 'PromiseLike'。 'then' 的属性类型不兼容。类型 '(onfulfilled?: ((value: typeof import(" D:/PROGECTS/SnakeReactReduxTS/snake-react-redux-ts/src/Components/Stages/Game")) => TResult1 | PromiseLike<...>) | null | undefined, onrejected?: ((reaso... ' 不能分配给类型 '(onfulfilled?: ((value: { default: never; }) => TResult1 | PromiseLike) | null | undefined, onrejected?: ((原因：任何) => TResult2 | PromiseLike<...>) | null | undefined) => PromiseLike<...>'。参数“onfulfilled”和“onfulfilled”的类型不兼容。参数 'value' 和 'value' 的类型不兼容。类型'typeof import（“D：/PROGECTS/SnakeReactReduxTS/snake-react-redux-ts/src/Components/Stages/Game”）'中缺少属性'default'，但类型'{默认值：从不; }'。

他想从我这里得到什么？

【问题讨论】：

嗨，请给我们更多关于你打算做什么的信息？你做了哪些努力，你面临的问题是什么？并且，请让错误日志易于阅读
我想做模拟延迟。该代码在 JS 上运行良好，我只是想对其进行典型化

标签： javascript reactjs typescript

【解决方案1】：

lazy 函数返回一个 {default: ... } 对象的承诺，该对象被异步调用，并将 await 直到承诺未被解决，延迟 1000 ms 并最终导入 Game组件并返回它。

    const Game = React.lazy(async () => {
      await new Promise(resolve => setTimeout(resolve, 1000));
      return import('./Game');
    });

希望这会有所帮助！

【讨论】：

打字稿发誓。我需要输入它
在 Typescript 中非常适合我，除此之外，它的顺序也很容易阅读，因此是 async/await 可以提高可读性的示例。

【解决方案2】：

他想从我这里得到什么？

你想从他那里得到什么？

React.lazy 应该这样使用：

const Game = React.lazy(() => import('./Game'));

您可能有更具体的用例（告诉我们），但基本用法是这样的。

我邀请您阅读文档https://reactjs.org/docs/code-splitting.html#reactlazy

【讨论】：

我想做模拟延迟
这个答案没有回答原问题；请参阅下面的 @solanki... 以获得正确适用于 Typescript 的答案。

【解决方案3】：

    const Game = React.lazy(() => import('./Game'))

你已经尝试过了

【讨论】：

我想做模拟延迟