React 18 and TypeScript

React 18 alpha has been released; but can we use it with TypeScript? The answer is "yes", but you need to do a couple of things to make that happen. This post will show you what to do.

Creating a React App with TypeScript

Let's create ourselves a vanilla React TypeScript app with Create React App:

Now let's upgrade the version of React to @next:

Which will leave you with entries in the package.json which use React 18. It will likely look something like this:

If we run yarn start we'll find ourselves running a React 18 app. Exciting!

Using the new APIs

So let's try using ReactDOM.createRoot API. It's this API that opts our application into using new features of React 18. We'll open up index.tsx and make this change:

If we were running JavaScript alone, this would work. However, because we're using TypeScript as well, we're now confronted with an error:

Property 'createRoot' does not exist on type 'typeof import("/code/my-app/node_modules/@types/react-dom/index")'. TS2339

This is the TypeScript compiler complaining that it doesn't know anything about ReactDOM.createRoot. This is because the type definitions that are currently in place in our application don't have that API defined.

Let's upgrade our type definitions:

We might reasonably hope that everything should work now. Alas it does not. The same error is presenting. TypeScript is not happy.

Telling TypeScript about the new APIs

If we take a look at the PR that added support for the APIs, we'll find some tips. If you look at one of the next.d.ts you'll find this info, courtesy of Sebastian Silbermann:

ts import {} from 'react/next' ts ///

Let's try the first item on the list. We'll edit our tsconfig.json and add a new entry to the "compilerOptions" section:

If we restart our build with yarn start we're now presented with a different error:

Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | Document | DocumentFragment | Comment'. Type 'null' is not assignable to type 'Element | Document | DocumentFragment | Comment'. TS2345

Now this is actually nothing to do with issues with our new React type definitions. They are fine. This is TypeScript saying "it's not guaranteed that document.getElementById('root') returns something that is not null... since we're in strictNullChecks mode you need to be sure root is not null".

We'll deal with that by testing we do have an element in play before invoking ReactDOM.createRoot`:

Now that change is made, we have a working React 18 application, using TypeScript. Enjoy!

This post was originally published on LogRocket.