Использование React.lazy с TypeScript

Question

Я пытаюсь использовать React.lazy для разделения кода в моем приложении TypeScript React.

Все, что я делаю, это изменяю эту строку:

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>; }'.

Я не совсем уверен, что я должен делать здесь, чтобы заставить его работать.

Answer 1

Вы можете создать файл 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})))

Answer 2

Вы должны сделать export default class {...} из ./screens/Products/list вместо export class ScreensProductList {...}.

Или, альтернативно, вы можете сделать:

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