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

Question

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

我有一门课，比如：

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);

不能用上面的方法做这件事。有什么办法呢？

Answer 1

改变：

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);

Answer 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或直接浇铸过孔

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

Answer 3

以下是TypeScript中的最终答案（将HtmleElement强制转换为HTMLInputElement的参考：HtmleElement类型的值上不存在属性“value”）

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编译器将显示错误。