TS2740错误：VNode类型缺失HTMLElement属性问题排查

错误提示 #

TS2740：(TS) 类型'VNode'缺少类型'HTMLElement'的以下属性：accessKey、accessKeyLabel、autocapitalize、dir及另外283个属性。

出错代码 #

import { init, classModule, propsModule, styleModule, eventListenersModule, h} from 'snabbdom';
const patch = init([classModule, propsModule, styleModule, eventListenersModule]);
let tasks: string[] = [];
function view() {
  return h('div#app', [
    h('input#new-task', {
      props: { type: 'text', placeholder: 'Add a new task' },
    }),
    h('button', { on: { click: addTask } }, 'Add Task'),
    h('ul#task-list', tasks.map((task, index) =>
      h('li', { key: index }, task)
    )),
  ]);
}
function addTask() {
  const newTask = (document.getElementById('new-task') as HTMLInputElement).value;
  if (newTask.trim() !== '') {
    tasks.push(newTask);
    updateView();
    (document.getElementById('new-task') as HTMLInputElement).value = '';
  }
}
function updateView() {
  const newVNode = view();
  patch(oldVNode, newVNode);
  oldVNode = newVNode;
}
let oldVNode = document.getElementById('app') || document.body;
updateView();

问题原因 #

oldVNode初始值来自document.getElementById('app')或document.body，属于HTMLElement类型；但在updateView函数中，它被重新赋值为view()返回的VNode类型。TypeScript的静态类型检查不允许同一变量持有完全不兼容的类型，因此触发了TS2740错误。

解决方案 #

给oldVNode显式声明联合类型HTMLElement | VNode，让TypeScript明确该变量可接受两种类型的值：

修改后的关键代码：

// 先导入VNode类型
import { VNode, init, classModule, propsModule, styleModule, eventListenersModule, h} from 'snabbdom';

// ... 其他代码不变 ...

// 声明联合类型
let oldVNode: HTMLElement | VNode = document.getElementById('app') || document.body;
updateView();

修改后，TypeScript能正确识别oldVNode的类型范围，不会再抛出类型不匹配的错误。

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