如何使用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"类的Object.我怎么做 ？

就像是:

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

无法以上述方式执行此操作.有什么方法可以解决这个问题？

Answer 1

以下是TypeScript中的最终答案(将HTMLElement转换为HTMLInputElement的参考:属性'value'在'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编译器将显示错误.

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或直接转换取决于您。就我个人而言，我不太了解打字稿以了解具体的区别。我的猜测是，使用 'as' 会像 C# 一样进行额外的检查，但是如果它不是 HTMLInputElement，它是如何进行错误处理的，我不知道。（也许有人可以对此发表评论）。

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