我正在玩打字稿,我正在尝试创建一个脚本,在输入框中输入文本时将更新p元素.
html看起来如下:
<html>
<head>
</head>
<body>
<p id="greet"></p>
<form>
<input id="name" type="text" name="name" value="" onkeyup="greet('name')" />
</form>
</body>
<script src="greeter.js"></script>
</html>
和greeter.ts文件:
function greeter(person)
{
return "Hello, " + person;
}
function greet(elementId)
{
var inputValue = document.getElementById(elementId).value;
if (inputValue.trim() == "")
inputValue = "World";
document.getElementById("greet").innerText = greeter(inputValue);
}
当我编译时,tsc我得到以下"错误":
/home/bjarkef/sandbox/greeter.ts(8,53): The property 'value' does not exist on value of type 'HTMLElement'
但是编译器确实输出了一个javascript文件,它在chrome中运行得很好.
我怎么会得到这个错误？我该如何解决？
另外,在哪里可以'HTMLElement'根据打字稿查找哪些属性有效？
请注意我对javascript和打字稿很新,所以我可能会遗漏一些明显的东西.:)
我只是在VisualStudio 2012中测试打字稿并且它的类型系统有问题.我的html网站有一个带有id"mycanvas"的canvas标签.我正试图在这个画布上画一个矩形.这是代码
var canvas = document.getElementById("mycanvas");
var ctx: CanvasRenderingContext2D = canvas.getContext("2d");
ctx.fillStyle = "#00FF00";
ctx.fillRect(0, 0, 100, 100);
不幸的是,VisualStudio抱怨说
属性'getContext'在'HTMLElement'类型的值上不存在
它将第二行标记为错误.我认为这只是一个警告,但代码不编译.VisualStudio说
有构建错误.你想继续并运行最后一次成功的构建吗？
我根本不喜欢这个错误.为什么没有动态方法调用？毕竟方法getContext肯定存在于我的canvas元素上.但是我认为这个问题很容易解决.我刚刚为canvas添加了一个类型注释:
var canvas : HTMLCanvasElement = document.getElementById("mycanvas");
var ctx: CanvasRenderingContext2D = canvas.getContext("2d");
ctx.fillStyle = "#00FF00";
ctx.fillRect(0, 0, 100, 100);
但是类型系统仍然不满意.这是新的错误消息,这次是在第一行:
无法将'HTMLElement'转换为'HTMLCanvasElement':类型'HTMLElement'缺少类型'HTMLCanvasElement'的属性'toDataURL'
好吧,我全力以赴静态打字,但这使语言无法使用.类型系统要我做什么？
更新:
Typescript确实不支持动态调用,我的问题可以通过类型转换来解决.我的问题基本上是这个TypeScript的重复:铸造HTMLElement
我目前正在尝试获取用户将插入输入表单的值。在普通javascript中，我可以按id或class等来定位元素，然后可以使用.value方法来实际使用该方法。由于某种原因，打字稿无法做到这一点，我不理解，因为打字稿是javascript的超集。是否有从纯打字稿中的输入元素获取值的特定方法，还是我必须使用angular或其他工具？
打字稿代码：
interface IUserFoodOptions {
food: string;
calories: number;
foodDate: any;
}
class Food implements IUserFoodOptions {
food: string;
calories: number;
foodDate: any;
// store all the calories in an array and calculate the total amount of calories
caloriesArray: number[] = [];
// constructor
constructor(food: string, calories: number, foodDate: any) {
this.food = food;
this.calories = calories;
this.foodDate = foodDate;
}
}
// event listener for when the add food button is clicked
let addFood = document.getElementById("add-food-button").addEventListener("click", () => { …我正在尝试从打字稿中的 DOM 中按类名获取元素。我在这里做的事情似乎很简单，但控制台显示错误。
function showSlides() {
var i;
var slides = <HTMLElement[]<any>document.getElementsByClassName('slide');
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
}
预期的结果应该是一个包含 3 个项目的数组，它应该将显示样式更改为无，但实际结果是一个 JS 错误： Uncaught TypeError: Cannot read property 'style' of undefined.
目标/背景：我需要将一个变量的值从我的 Angular 应用程序发送到页面上 iFrame 内的 ChatServer（aspx 和 javascript）。它在不同的服务器上。
我尝试过的：我正在遵循以下解决方法：https : //stackoverflow.com/a/25098153/11187561
但是，我收到错误消息：HTMLElement 类型上不存在属性“contentWindow”
我接下来还尝试了什么：通过 SO，我发现/sf/answers/2692052051/
我将它放在 ngAfterViewInit 中，但仍然出现错误。
代码：
ngAfterViewInit() {
var frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, '*');
}