JIYIK CN >

Use non-null assertions or type assertions to resolve the React.js error "Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'", for example const root = createRoot(rootElement!).

The following is an example that produces this error

import App from './App';

import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';

const rootElement = document.getElementById('root');

// Argument of type 'HTMLElement | null' is not
// assignable to parameter of type 'Element | DocumentFragment'.
// Type 'null' is not assignable to type 'Element | DocumentFragment'.ts(2345)
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

The problem here is the return type of document.getElementById method is HTMLElement | null.

If the provided id does not exist in the DOM, the method returns null.

On the other hand, the expected parameter type of the createRoot method is Element | DocumentFragment, so the provided parameter type does not match the expected parameter type.

One way to fix the error is to use the non-null (!)assertion operator.

import App from './App';

import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';

const rootElement = document.getElementById('root');

//  non-null (!) assertion
const root = createRoot(rootElement!);

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

The not-null (!) assertion operator removes null and undefined from a type without doing any explicit type checking.

When you use this approach, you are basically telling TypeScript that the rootElement variable will never be null or undefined. Therefore, rootElementthe type of the variable becomes % HTMLElementinstead of % HTMLElement | null.

Alternatively, we can use simple type assertions.

import App from './App';

import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';

const rootElement = document.getElementById('root');

// 使用类型断言
const root = createRoot(rootElement as Element);

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Type assertions are used when we have information about the type of a value that TypeScript cannot know about.

We are actually telling TypeScript that the rootElement variable stores a value of type Element and that we don’t need to worry about it.

We determined the correct type from the error message: "Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'".

With this error message, TypeScript is telling us: the expected parameter type of the function is Element | DocumentFragment, but you called the function with an argument of type HTMLElement | null.

The types are incompatible because the parameter type may be null.

To fix this error, we must make the passed in argument type compatible with the expected argument type.