将 React.lazy 与 TypeScript 一起使用答案

【问题标题】：Using React.lazy with TypeScript将 React.lazy 与 TypeScript 一起使用
【发布时间】：2019-06-06 15:06:25
【问题描述】：

我正在尝试在我的 TypeScript React 应用程序中使用 React.lazy 进行代码拆分。

我所做的只是改变那条线：

import {ScreensProductList} from "./screens/Products/List";

到这一行：

const ScreensProductList = lazy(() => import('./screens/Products/List'));

但是import('./screens/Products/List') 部分会触发 TypeScript 错误，说明：

Type error: Type 'Promise<typeof import("/Users/johannesklauss/Documents/Development/ay-coding-challenge/src/screens/Products/List")>' is not assignable to type 'Promise<{ default: ComponentType<any>; }>'.
  Property 'default' is missing in type 'typeof import("/Users/johannesklauss/Documents/Development/ay-coding-challenge/src/screens/Products/List")' but required in type '{ default: ComponentType<any>; }'.

我不太确定我应该在这里做什么才能让它发挥作用。

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

const LazyCart = React.lazy(async () => ({ default: (await import('../Components/market/LazyCart')).LazyCart }))

【讨论】：

【解决方案2】：

这是正确的语法。它也适用于 Webstorm IDE（此处显示的其他语法仍然显示警告）

const ScreensProductList = React.lazy(() => import("./screens/Products/List").then(({default : ScreensProductList}) => ({default: ScreensProductList})));

【讨论】：

【解决方案3】：

一种选择是像这样在“./screens/Products/List”中添加默认导出

export default ScreensProductList;

二是将导入代码改为

const ScreensProductList = React.lazy(() =>
  import("./screens/Products/List").then((module) => ({
    default: module.ScreensProductList,
  }))
);

或者，如果您不介意使用外部库，您可以这样做：

import { lazily } from 'react-lazily';
const { ScreensProductList } = lazily(() => import('./screens/Products/List'));

【讨论】：

【解决方案4】：

另一种方式

const UsersList = () => (
  ..JSX
)

export default UsersList as React.FC;

或者在旧的类组件中

class UsersList extends Component {
  render(){

  }
}


export default UsersList as React.ComponentType

在使用 React.lazy 导入时

React.lazy( ()=> import("./UsersList") )

【讨论】：

【解决方案5】：

您可以创建一个 index.ts 文件，您可以在其中导出所有组件，例如在此示例中。：

export {default as YourComponentName} from "./YourComponentName";

之后你可以使用 React.lazy:

React.lazy(() => import("../components/folder-name-where-the-index-file-is-created").then(({YourComponentName}) => ({default: YourComponentName})))

【讨论】：

【解决方案6】：

您应该从./screens/Products/list 执行export default class {...} 而不是export class ScreensProductList {...}。

或者，您也可以这样做：

const ScreensProductList = lazy(() =>
  import('./screens/Products/List')
    .then(({ ScreensProductList }) => ({ default: ScreensProductList })),
);

【讨论】：

效果很好。我将如何从模块中延迟加载多个非默认导出？我必须为每个导出执行第二种方法吗？
@JohannesKlauß，是的，lazy() 只会渲染单个组件，因此您必须为每个需要的组件重复包装
这真的很难看。特别是因为每个模块只能有一个默认值。
TypeScript 应该添加哪些类型？
@JamesHancock 你可以看看我的答案，react-lazily 解决每个模块的多个组件const { One, Two, Three } = lazily(() => import('./module'))