错误 TS2339：JavaScript 到 Typescript 错误

Question

---

src/app/dashboard.component.ts(49,15) 中的错误：错误 TS2339：类型“Element”上不存在属性“style”。src/app/dashboard.component.ts(50,16)：错误 TS2339：类型“EventTarget”上不存在属性“textContent”。

---

这是一个 javascript 函数，但上面是我尝试在打字稿中使用它时遇到的错误。我尝试将 var 更改为 let 并添加 . 还有其他建议吗？谢谢。

仪表板.ts

var w = document.getElementById('wrapper');
var button = document.getElementById('randomize');
var image = w.children; // inner elements, your quotes divs

// a function to hide all divs
var hideDivs = function(divs) {
  for (var div of divs) {
    div.style.display = 'none';
  }
}

hideDivs(image); // hide all initially

// on click
button.addEventListener('click', function(event) {
  var rnd = Math.floor(Math.random() * image.length); // get random index
  hideDivs(image); // hide all quotes
  image[rnd].style.display = 'block'; // show random quote
  event.target.textContent = 'Click one more time!'; // set button text. event.target is the button you've clicked
})

仪表板.html

  <div id="wrapper">
  <div class="image" img scr='../../assets/mood.jpg'></div>
  <div class="image" img scr='../../assets/mood.jpg'></div>
  <div class="image" img scr='../../assets/mood.jpg'></div>
  <div class="image" img scr='../../assets/mood.jpg'></div>
  <div class="image" img scr='../../assets/mood.jpg'></div>
</div>
<button id='randomize'>Next</button>

Answer 1

问题是 的target类型为EventTarget，并且其中的元素image为 aHTMLCollection的类型为Element。您要访问的两个属性均在 上定义HTMLElement。您可以做的最简单的事情是使用类型断言告诉编译器，在您的情况下，这两个实际上都是HTMLElement

// on click
button.addEventListener('click', function (event) {
    var rnd = Math.floor(Math.random() * image.length); // get random index
    hideDivs(image); // hide all quotes

    (image[rnd] as HTMLElement).style.display = 'block'; // show random quote
    (event.target as HTMLElement).textContent = 'Click one more time!'; // set button tqext. event.target is the button you've clicked
})

hideDivs您可能还想正确输入：

// a function to hide all divs
const hideDivs = function (divs : HTMLCollection) {
    for (var div of divs) {
        (div as HTMLElement).style.display = 'none';
    }
}