Definitelytyped: React.lazy type definition not found for lazy, Suspense

[nishila2]

I have upgraded React version to 16.6.0 and @types/react version to 16.4.18. But I couldn't find type definition for lazy, Suspense in that. I am using typescript version 2.9.2. can anybody know this issues ort facing the same?

https://github.com/DefinitelyTyped/DefinitelyTyped

30031

30054

[Barbiero]

@types/react has not been upgraded yet. both #30054 and #29990 have not been merged yet and so haven't been released into @types/react.

A workaround is to cast React to any so you can use them without errors(but without typings either):

const lazy = (React as any).lazy
const Suspense = (React as any).Suspense

[Jessidhia]

This can also be put in a local .d.ts file which has copies of the definitions of the new functions/types as I wrote them in the PRs.

This doesn't include the _changes_ to existing types because you can't do that through module augmentation.

Make sure to remove this once @types/react is finally updated; you'll know it because you'll get build errors about redefining types.

// this is important, otherwise you'll completely replace the `'react'` module
export {}

declare module 'react' {
  export interface ExoticComponent<P = {}> {
    /**
     * # WARNING
     *
     * Exotic components are not actually callable
     *
     * @deprecated Exotic components are not callable
     */
    (props: P): (ReactElement<any>|null)
    readonly $$typeof: symbol
  }

  export type ComponentProps<T extends ComponentType<any>> =
    T extends ComponentType<infer P> ? P : {}
  export type ComponentPropsWithRef<T extends ComponentType<any>> =
    T extends ComponentClass<infer P>
      ? P & ClassAttributes<InstanceType<T>>
      : T extends SFC<infer P>
        ? P
        : {}

  export function memo<P extends object> (
    Component: SFC<P>,
    propsAreEqual?: (prevProps: Readonly<P & { children?: ReactNode }>, nextProps: Readonly<P & { children?: ReactNode }>) => boolean
  ): ExoticComponent<P>
  export function memo<T extends ComponentType<any>> (
    Component: T,
    propsAreEqual?: (prevProps: Readonly<ComponentProps<T>>, nextProps: Readonly<ComponentProps<T>>) => boolean
  ): ExoticComponent<ComponentPropsWithRef<T>>

    /**
   * This feature is not yet available for server-side rendering.
   * Suspense support will be added in a later release.
   */
  export const Suspense: ExoticComponent<{
    children?: ReactNode

    /** A fallback react tree to show when a Suspense child (like React.lazy) suspends */
    fallback: NonNullable<ReactNode>|null

    // I tried looking at the code but I have no idea what it does.
    // https://github.com/facebook/react/issues/13206#issuecomment-432489986
    /**
     * Not implemented yet, requires unstable_ConcurrentMode
     */
    // maxDuration?: number
  }>

  export function lazy<T extends ComponentType<any>>(
    factory: () => Promise<{ default: T }>
  ): ExoticComponent<ComponentPropsWithRef<T>>
}

[nishila2]

Thank you for your support. As I got the answer I am closing this issue.

[mustafawm]

Hi @Jessidhia

• I pasted your answer to my root directory temp.react.d.ts
• I have export default memo(DatePickerField);
• when I import it to another file <Datpicker /> it's still not showing TS def/suggestions (first screenshot)

Am I missing something?
_PS: the file d.ts file is included in tsconfig: "include": ["./global.d.ts", "./temp.react.d.ts", "src"], _

as apposed to not-memozied ones:

[nishila2]

Its already in the latest react version. could you please check that.

On Wed, Dec 18, 2019 at 10:03 PM mustafa [e-mail] wrote:

Hi @Jessidhia https://github.com/Jessidhia

• I pasted your answer to my root directory temp.react.d.ts
• I have export default memo(DatePickerField);
• when I import it to another file it's still not
  showing TS def/suggestions (first screenshot)

Am I missing something?
PS: the file d.ts file is included in tsconfig: "include":
["./global.d.ts", "./temp.react.d.ts", "src"],

[image: Screen Shot 2019-12-18 at 11 29 25 pm]
https://user-images.githubusercontent.com/13101565/71104362-3e565600-21ee-11ea-8708-94b4189e09ed.png

as apposed to not-memozied ones:
[image: Screen Shot 2019-12-18 at 11 32 01 pm]
https://user-images.githubusercontent.com/13101565/71104621-aad15500-21ee-11ea-847f-bb0f8e43b961.png

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30129?email_source=notifications&email_token=ABG33AHRXYMEB3XNYHUBOBDQZJGGPA5CNFSM4GAFFXHKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHGWRLQ#issuecomment-567109806,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABG33ACNNQYDBVM7IFQPFELQZJGGPANCNFSM4GAFFXHA
.

--

Thanks and Regards
Nishil Athikkal
Kerala, INDIA
[phone]
[email protected]

[mustafawm]

I'm using the latest version of @types/react 16.9.17

it's still not showing the suggestions (only import ComponentName like in the pic above) and when ctrl/cmd+click component, it pops up a window showing the momo() call -- _which makes sense since it's wrapped in memo_

[nishila2]

Can you uninstall (permentantly delete) all node modules and install them
again. Use latest react versions.

On Sat, 21 Dec, 2019, 9:17 AM mustafa, [e-mail] wrote:

I'm using the latest version of @types/react 16.9.17

it's still not showing the suggestions (only import ComponentName like in
the pic above) and when ctrl/cmd+click component, it pops up a window
showing the momo() call -- which makes sense since it's wrapped in memo

[image: Screen Shot 2019-12-21 at 10 46 17 am]
https://user-images.githubusercontent.com/13101565/71302571-1f6ae600-23df-11ea-9594-18529d105850.png

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30129?email_source=notifications&email_token=ABG33AATMBZFT3VLHXHZBGLQZWGVVA5CNFSM4GAFFXHKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHOUKIY#issuecomment-568149283,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABG33AGXYYNCJ5AE34OPYN3QZWGVVANCNFSM4GAFFXHA
.

[mustafawm]

Thanks @nishila2 , I did.. still same issue.
_I am using the latest version of all packages_

I tried codesandbox react+ts and it seems to work there so I must be missing something :

Will look into it later and update this thread here (hopefully with + news).