[英]error TS2339: JavaScript to Typescript error
ERROR in src/app/dashboard.component.ts(49,15): error TS2339: Property 'style' does not exist on type 'Element'.
src / app / dashboard.component.ts(49,15)中的错误:错误TS2339:“元素”类型上不存在属性“样式”。 src/app/dashboard.component.ts(50,16): error TS2339: Property 'textContent' does not exist on type 'EventTarget'.
src / app / dashboard.component.ts(50,16):错误TS2339:属性'textContent'在类型'EventTarget'上不存在。
This works as a javascript function, but the above are the errors I get when I try to use this in typescript. 这作为一个javascript函数,但上面是我尝试在打字稿中使用它时得到的错误。 I have tried changing var to let and adding .
我已经尝试更改var以允许和添加。 any other suggestions?
还有其他建议吗? Thanks.
谢谢。
dashboard.ts dashboard.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
})
dashboard.html dashboard.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>
The problem is that target
is typed as EventTarget
, and an element of image
which is a HTMLCollection
is typed as Element
. 问题是
target
被输入为EventTarget
,而作为HTMLCollection
的image
元素被输入为Element
。 Both of the properties you want to access are defined on HTMLElement
. 您要访问的两个属性都在
HTMLElement
上定义。 The simplest thing you can do is to use a type assertion to tell the compiler that in your case both of these are actually 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
})
Yo might also want to type hideDivs
correctly as well : Yo也可能也想正确输入
hideDivs
:
// a function to hide all divs
const hideDivs = function (divs : HTMLCollection) {
for (var div of divs) {
(div as HTMLElement).style.display = 'none';
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.