迹忆客 专注技术分享

使用非空断言或类型断言来解决 React.js 错误“Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'”，例如 const root = createRoot(rootElement!) 。

下面是产生该错误的示例

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>,
);

这里的问题是 document.getElementById 方法的返回类型是 HTMLElement | null 。

如果提供的 id 在 DOM 中不存在，则该方法返回 null。

另一方面，createRoot 方法的预期参数类型是 Element | DocumentFragment，因此提供的参数类型与预期的参数类型不匹配。

解决错误的一种方法是使用非空 (!) 断言运算符。

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>,
);

非 null (!) 断言运算符从类型中删除 null 和 undefined 而不进行任何显式类型检查。

当你使用这种方法时，你基本上告诉 TypeScript rootElement 变量永远不会为空或未定义。 因此，rootElement 变量的类型变为 HTMLElement 而不是 HTMLElement | null 。

或者，我们可以使用简单的类型断言。

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>,
);

当我们有关于 TypeScript 无法知道的值的类型的信息时，使用类型断言。

我们实际上是在告诉 TypeScript，rootElement 变量存储了一个 Element 类型的值，不用担心它。

我们从错误消息中确定了正确的类型：“'HTMLElement | null' 类型的参数不可分配给'Element | DocumentFragment' 类型的参数”。

有了这个错误消息，TypeScript 告诉我们：函数的预期参数类型是 Element | DocumentFragment，但您使用 HTMLElement | null 类型的参数调用该函数。

类型不兼容，因为参数类型可能为 null。

为了解决这个错误，我们必须使传入的参数和预期的参数类型兼容。