如何获取克隆元素的outerHTML？TypeScript类型报错解决方案

这个问题我之前也碰到过，TypeScript的类型检查在这里确实会严格卡你一下，不过有几个简单的解决办法，咱们一个个来看：

方案1：类型断言（安全转换类型） #

既然你确定目标节点肯定是Element类型，那直接用类型断言把Node转换成Element就行，这样TypeScript就会认可outerHTML属性了。

如果想简单直接，可以这么写：

const table = document.querySelector('#myTable') as Element;
const clonedTable = table.cloneNode(false); // 此时clonedTable的类型是Element
return clonedTable.outerHTML;

要是想更严谨（避免找不到元素导致的报错），可以先做类型判断：

const table = document.querySelector('div.file div.data table');
if (table instanceof Element) {
  const clonedTable = table.cloneNode(false);
  return <div id="overworld-viewer"
              dangerouslySetInnerHTML={{ __html: clonedTable.outerHTML }} />;
}
// 这里可以加个兜底，比如返回空div或者提示
return <div id="overworld-viewer">Table not found</div>;

方案2：从上游锁定Element类型 #

其实querySelector支持泛型，你可以直接指定它返回Element类型，这样后续克隆的节点自然也是Element，不用再转换：

// 用泛型指定返回Element|null
const table = document.querySelector<Element>('div.file div.data table');
if (table) {
  const clonedTable = table.cloneNode(false);
  return <div id="overworld-viewer"
              dangerouslySetInnerHTML={{ __html: clonedTable.outerHTML }} />;
}

或者直接给变量声明类型：

const table: Element | null = document.querySelector('div.file div.data table');

方案3：用React的方式替代dangerouslySetInnerHTML #

其实在React里，尽量避免用dangerouslySetInnerHTML——毕竟名字里都带“dangerously”了，不仅有XSS风险，也不符合React的声明式渲染思路。

如果你的需求只是克隆一个空的table标签（不带子元素），不如直接用JSX复刻这个table的结构，把原table的属性提取出来就行：

render() {
  const tableElement = document.querySelector('div.file div.data table');
  // 提取你需要的table属性，比如class、id、style等
  const tableProps = tableElement instanceof Element ? {
    className: tableElement.className,
    id: tableElement.id,
    ...Object.fromEntries(
      Array.from(tableElement.attributes).map(attr => [attr.name, attr.value])
    )
  } : {};

  // 直接用JSX渲染空table，效果和克隆节点一样
  return <div id="overworld-viewer">
    <table {...tableProps} />
  </div>;
}

这种写法既安全，又符合React的开发习惯，还能完全避开类型问题。

内容的提问来源于stack exchange，提问作者Andrew Cheong