How to install react beta types for typescript project?

390 Views Asked by At

As of now react 18 has entered beta state. I used npm install react@beta react-dom@beta to install beta version and then used npm install @types/react @types/react-dom --save-dev to install the types. I am following this article https://blog.logrocket.com/how-to-use-typescript-with-react-18-alpha/ except the part where it uses @next tag install react and react-dom. But when I checked inside node_modules/@types/react I cannot find next.d.ts file which was supposed to contain the updated definitions. Surprisingly I couldn't find a lot of information online about using typescript with latest react beta. Any help is appreciated, thanks.

2

There are 2 best solutions below

1
jsejcksn On

From the current head commit in the DefinitelyTyped repository:

@types/react/next.d.ts lines 1–24:

/**
 * These are types for things that are present in the upcoming React 18 release.
 *
 * Once React 18 is released they can just be moved to the main index file.
 *
 * To load the types declared here in an actual project, there are three ways. The easiest one,
 * if your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section,
 * is to add `"react/next"` to the `"types"` array.
 *
 * Alternatively, a specific import syntax can to be used from a typescript file.
 * This module does not exist in reality, which is why the {} is important:
 *
 * ```ts
 * import {} from 'react/next'
 * ```
 *
 * It is also possible to include it through a triple-slash reference:
 *
 * ```ts
 * /// <reference types="react/next" />
 * ```
 *
 * Either the import or the reference only needs to appear once, anywhere in the project.
 */
0
smit On

Thanks for all the responses. I managed to get the definitions when I installed react and react-dom with next tag.

npm i react@next react-dom@next