Hur bygger man ett TypeScript-objekt med värden från HTML-input?

Det här borde vara mycket grundläggande men jag kan inte klara av det.

Jag har en klass som:

class MyObject {
    value: number;
    unit: string; 

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

Sedan i HTML,

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

Jag vill skapa ett objekt av klassen "MyObject" med myValue och myUnit. Hur gör jag det?

Något som:

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

Kan inte göra det på ovanstående sätt. Vad är sättet att gå vidare med detta?

Svar #1

Här är det slutliga svaret som fungerar i TypeScript (Referens för att casta HTMLElement till HTMLInputElement: Egenskapen 'value' finns inte på ett värde av typen 'HTMLElement')

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

Det var viktigt att kasta HTMLElement till HTMLInputElement, annars finns inte 'value'-egenskapen för HTMLElement i TypeScript och TypeScript-kompilatorn kommer att visa ett fel.

Svar #2

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

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

Det kan också skrivas så här:

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

Observera att jag inte har använt var utan istället let, vilket ger dig bättre kontroll över din kod.

Obs: att använda as eller direkt typcasting via <> är upp till dig. Personligen kan jag inte TypeScript tillräckligt bra för att veta den specifika skillnaden. Min gissning är att att använda 'as' gör en extra kontroll precis som i C#, men hur det hanterar fel om det inte är ett HTMLInputElement vet jag inte. (kanske någon kan kommentera det).

I TypeScript-handledningen använder de också "as": http://www.typescriptlang.org/docs/handbook/asp-net-4.html

Relaterade artiklar