TS2339错误求助：JS转TS后Element/EventTarget属性不存在问题

这些错误本质是TypeScript的严格类型检查在起作用，和你把var改成let没关系，核心是类型不匹配的问题，给你几个实用的解决思路：

1. 类型断言（最直接的方式） #

直接告诉TypeScript你明确知道元素的具体类型，比如把Element断言为HTMLElement（因为style是HTMLElement的属性），把EventTarget断言为HTMLElement：

let w = document.getElementById('wrapper') as HTMLElement;
let button = document.getElementById('toggleButton') as HTMLElement;

button.addEventListener('click', function(e) {
  // 严格模式下最好加个非空判断，避免元素不存在时的报错
  if (w) {
    w.style.display = w.style.display === 'none' ? 'block' : 'none';
  }
  const target = e.target as HTMLElement;
  if (target) {
    target.textContent = target.textContent === 'Show' ? 'Hide' : 'Show';
  }
});

2. 类型缩小（更安全的方式） #

通过类型判断让TypeScript自动推断变量的具体类型，不用硬断言，代码更健壮：

let w = document.getElementById('wrapper');
let button = document.getElementById('toggleButton');

// 用可选链处理button可能为null的情况
button?.addEventListener('click', function(e) {
  // 判断w是HTMLElement类型，TS会自动缩小类型
  if (w instanceof HTMLElement) {
    w.style.display = w.style.display === 'none' ? 'block' : 'none';
  }
  // 同样判断事件目标是HTMLElement
  if (e.target instanceof HTMLElement) {
    e.target.textContent = e.target.textContent === 'Show' ? 'Hide' : 'Show';
  }
});

3. 非空断言（谨慎使用） #

如果你100%确定页面上一定存在这些元素，可以用!符号告诉TypeScript变量不会是null，再配合类型断言：

// 非空断言! + 类型断言
let w = document.getElementById('wrapper')! as HTMLElement;
let button = document.getElementById('toggleButton')!;

button.addEventListener('click', function(e) {
  w.style.display = w.style.display === 'none' ? 'block' : 'none';
  // 对事件目标做非空断言和类型断言
  const target = e.target! as HTMLElement;
  target.textContent = target.textContent === 'Show' ? 'Hide' : 'Show';
});

为什么会出现这些错误？ #

简单说：

• document.getElementById()返回的类型是Element | null，而Element基类没有style属性，style是HTMLElement特有的；
• 事件的e.target类型是EventTarget，它是一个通用接口，只有当目标是DOM元素（HTMLElement）时才会有textContent属性，TypeScript不会自动推断这一点。

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