如何使用 HTML 输入值构造 TypeScript 对象？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31922386/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to construct TypeScript object with HTML input values?
提问by Anmol Gupta
This should be very basic but I am unable to get through it.
这应该是非常基本的，但我无法通过它。
I have a class like:
我有一个类：
class MyObject {
value: number;
unit: string;
constructor(value: number, unit: string){
this.value = value;
this.unit = unit;
}
}
Then in HTML,
然后在 HTML 中，
<input id="myValue" type="number"></input>
<input id="myUnit" type="text"></input>
I want to create an Object of "MyObject" class using myValue and myUnit. How do I do that ?
我想使用 myValue 和 myUnit 创建一个“MyObject”类的对象。我怎么做 ？
Something like:
就像是：
var value = document.getElementById("myValue");
var unit = document.getElementById("myUnit");
myObject: MyObject = new MyObject(value, unit);
Unable to do it the above way. What's the way to go about with this ?
无法通过上述方式做到这一点。有什么办法可以解决这个问题？
回答by Anmol Gupta
Here is the final answer which works in TypeScript (Reference for casting HTMLElement to HTMLInputElement: The property 'value' does not exist on value of type 'HTMLElement')
这是适用于 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);
It was important to cast HTMLElement to HTMLInputElement, otherwise 'value' property doesn't exist for HTMLElement in TypeScript and TypeScript compiler will show error.
将 HTMLElement 转换为 HTMLInputElement 很重要，否则 TypeScript 中的 HTMLElement 不存在“value”属性，并且 TypeScript 编译器将显示错误。
回答by juFo
let value : number = parseFloat((<HTMLInputElement>document.getElementById("myValue")).value);
let unit : string = (<HTMLInputElement>document.getElementById("myUnit")).value;
myObject: MyObject = new MyObject(value, unit);
It could also be written like this:
也可以这样写：
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);
Note that I have not used varbut instead let, which gives you better control over your code.
请注意，我没有使用var而是使用let，这可以让您更好地控制代码。
Note: using asor direct casting via <>is up to you. Personally I don't know typescript that well to know the specific difference. My guess is that using 'as' does an extra check just like C#, but how it does error handling in case it is not an HTMLInputElement, I don't know that. (maybe somebody can comment on that).
注意：通过<>使用as或直接转换取决于您。就我个人而言，我不太了解打字稿以了解具体的区别。我的猜测是，使用 'as' 会像 C# 一样进行额外检查，但是如果它不是 HTMLInputElement，它是如何进行错误处理的，我不知道。（也许有人可以对此发表评论）。
In the typescript tutorial they also use "as": http://www.typescriptlang.org/docs/handbook/asp-net-4.html
在打字稿教程中，他们也使用“as”：http: //www.typescriptlang.org/docs/handbook/asp-net-4.html
回答by basarat
Change :
改变 ：
var value = document.getElementById("myValue");
var unit = document.getElementById("myUnit");
myObject: MyObject = new MyObject(value, unit);
To:
到：
var value = parseFloat(document.getElementById("myValue").value);
var unit = parseFloat(document.getElementById("myUnit").value);
myObject: MyObject = new MyObject(value, unit);
