如何使用 HTML 输入值构造 TypeScript 对象？答案

【问题标题】：How to construct TypeScript object with HTML input values?如何使用 HTML 输入值构造 TypeScript 对象？
【发布时间】：2015-11-02 12:49:36
【问题描述】：

这应该是非常基本的，但我无法通过它。

我有这样的课：

class MyObject {
    value: number;
    unit: string; 

    constructor(value: number, unit: string){
         this.value = value;
         this.unit = unit;
    }
}

然后在 HTML 中，

    <input id="myValue" type="number"></input>
    <input id="myUnit" type="text"></input>

我想使用 myValue 和 myUnit 创建一个“MyObject”类的对象。我该怎么做？

类似：

    var value = document.getElementById("myValue");
    var unit = document.getElementById("myUnit"); 
    myObject: MyObject = new MyObject(value, unit);

无法通过上述方式做到这一点。这个有什么办法吗？

【问题讨论】：

尝试将var value = document.getElementById("myValue"); 更改为var value = parseFloat(document.getElementById("myValue"));。 text-input 是一个字符串，但您需要一个类似于声明中的数字。
哦，将myObject: MyObject = new MyObject(value, unit); 更改为myObject = new MyObject(value, unit);。另一种创建对象的方式：var myObject:MyObject = new MyObject(value, unit);（注意“var”关键字）
我也在做 document.getElementById(".. ").nodeValue 以获得没有编译错误.. 它需要 nodeValue..for text 和 number.. parseFloat 对数字很好..运行后会更新...
啊，我的错。您忘记了前两行中的.value。变量value 和unit 持有HTMLElement (DOMElement) 类型的对象。您必须访问 .value 属性才能从中获取字符串。对不起。第一次没看到但是....这是javascript基础知识，与打字稿无关。
正确..我明白了。谢谢！

标签： typescript

【解决方案1】：

这是适用于 TypeScript 的最终答案（将 HTMLElement 转换为 HTMLInputElement 的参考：The property 'value' does not exist on value of type 'HTMLElement'）

var value = parseFloat((<HTMLInputElement>document.getElementById("myValue")).value);
var unit = (<HTMLInputElement>document.getElementById("myUnit")).value; 
myObject: MyObject = new MyObject(value, unit);

将 HTMLElement 转换为 HTMLInputElement 很重要，否则 TypeScript 中的 HTMLElement 不存在 'value' 属性，TypeScript 编译器将显示错误。

【讨论】：

【解决方案2】：

let value : number = parseFloat((<HTMLInputElement>document.getElementById("myValue")).value);
let unit : string = (<HTMLInputElement>document.getElementById("myUnit")).value; 

myObject: MyObject = new MyObject(value, unit);

也可以这样写：

let value : number = parseFloat((document.getElementById("myValue") as HTMLInputElement).value);
let unit : string = (document.getElementById("myUnit") as HTMLInputElement).value; 

myObject: MyObject = new MyObject(value, unit);

请注意，我没有使用 var，而是使用 let，这样可以更好地控制代码。

注意：使用 as 或通过直接投射由您决定。就我个人而言，我不太了解打字稿以了解具体区别。我的猜测是，使用 'as' 会像 C# 一样进行额外检查，但如果它不是 HTMLInputElement，它如何进行错误处理，我不知道。（也许有人可以对此发表评论）。

在打字稿教程中，他们也使用“as”：http://www.typescriptlang.org/docs/handbook/asp-net-4.html

【讨论】：

【解决方案3】：

改变：

var value = document.getElementById("myValue");
var unit = document.getElementById("myUnit"); 
myObject: MyObject = new MyObject(value, unit);

收件人：

var value = parseFloat(document.getElementById("myValue").value);
var unit = parseFloat(document.getElementById("myUnit").value); 
myObject: MyObject = new MyObject(value, unit);

【讨论】：

.value 在打字稿中不起作用。因此，必须按照以下答案将 HTMLElement 转换为 HTMLInputElement 来使其工作：stackoverflow.com/questions/12989741/…