TypescriptとReact 18の環境でcreateRootのエラー除去

5127 ワード
React18 React TypeScript TypeScript テキストリンク

Typescript と React 18 の環境で、createRootにて
Property 'createRoot' does not exist on type のエラーを取る方法がわからなかったので、いろいろ調べた結果、公式が一番良かった。

Typescript 初心者なので全然わからなかったが、ちょっと、かじった人ならすぐわかるんだろうなぁ。

Create React App: で Typescriptベースのテンプレートを作成する。
createRootを使うように修正する。
rootElement がnull になる対策だけを入れたが、createRoot でエラー発生。

対策前

index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const rootElement = document.getElementById('root');
// https://blog.logrocket.com/how-to-use-typescript-with-react-18-alpha/
if (!rootElement) throw new Error('Failed to find the root element');
const root = ReactDOM.createRoot(rootElement);
root.render(<App/>);

対策後

index.tsx
import React from 'react';
// https://reactjs.org/docs/react-dom-client.html
import * as ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const rootElement = document.getElementById('root');
// https://blog.logrocket.com/how-to-use-typescript-with-react-18-alpha/
if (!rootElement) throw new Error('Failed to find the root element');
const root = ReactDOM.createRoot(rootElement);
root.render(<App/>);