TypeScript + React.Lazy

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

Error : Error:(6, 35) TS2345: Argument of type 'Promise<typeof import("D:/PROGECTS/SnakeReactReduxTS/snake-react-redux-ts/src/Components/Stages/Game")>' is not assignable to parameter of type '{ default: never; } | PromiseLike<{ default: never; }> | undefined'. Type 'Promise<typeof import("D:/PROGECTS/SnakeReactReduxTS/snake-react-redux-ts/src/Components/Stages/Game")>' is not assignable to type 'PromiseLike<{ default: never; }>'. Types of property 'then' are incompatible. Type '<TResult1 = typeof import("D:/PROGECTS/SnakeReactReduxTS/snake-react-redux-ts/src/Components/Stages/Game"), TResult2 = never>(onfulfilled?: ((value: typeof import("D:/PROGECTS/SnakeReactReduxTS/snake-react-redux-ts/src/Components/Stages/Game")) => TResult1 | PromiseLike<...>) | null | undefined, onrejected?: ((reaso...' is not assignable to type '<TResult1 = { default: never; }, TResult2 = never>(onfulfilled?: ((value: { default: never; }) => TResult1 | PromiseLike) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<...>) | null | undefined) => PromiseLike<...>'. Types of parameters 'onfulfilled' and 'onfulfilled' are incompatible. Types of parameters 'value' and 'value' are incompatible. Property 'default' is missing in type 'typeof import("D:/PROGECTS/SnakeReactReduxTS/snake-react-redux-ts/src/Components/Stages/Game")' but required in type '{ default: never; }'.

What does he want from me?

3
javascriptreactjstypescript
Hi, please give us more information about what are you going to do? What efforts did you make and what is the problem are you facing? And, please, please, make the error log easy to read – RY_ Zheng
I want to make simulate delay. The code works fine on JS, I just want to typify it – Rudenya

3 Answers

2
votes

lazy function returns a promise of { default: ... } object which being called asynchronously and will await till promise being not resolved that beind delayed for 1000 ms and in the end will import the Game component and return it.

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

Hope this helps!!

1
votes

What does he want from me?

What do you want from him ?

React.lazy should be used like that:

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

You may have a more specific use-case (tell us) but the basic usage is like that.

I invite you to read the doc https://reactjs.org/docs/code-splitting.html#reactlazy

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

You have try this