javascript - Hämta värdet från <input>-element i typescript

Jag försöker för närvarande få de värden som en användare skulle skriva in i ett formulärfält. I vanlig JavaScript kan jag bara rikta in mig på elementet med id eller klass, osv, och sedan kan jag bara använda .value-metoden för att faktiskt använda den metoden. Av någon anledning kan inte TypeScript göra det, vilket jag inte förstår eftersom TypeScript är ett superset av JavaScript. Finns det ett specifikt sätt att få ett värde från ett input-element i ren TypeScript eller måste jag använda Angular eller något sådant?

Typescript-kod:

interface IUserFoodOptions {
    food: string;
    calories: number;
    foodDate: any;
}

class Food implements IUserFoodOptions {
    food: string;
    calories: number;
    foodDate: any;

    // store all the calories in an array and calculate the total amount of calories
    caloriesArray: number[] = [];

    // constructor
    constructor(food: string, calories: number, foodDate: any) {
        this.food = food;
        this.calories = calories;
        this.foodDate = foodDate;
    }
}

// event listener for when the add food button is clicked
let addFood = document.getElementById("add-food-button").addEventListener("click", () => {
    // get the values from inputs and store them in an array
    let foodName = document.getElementById("food-name-val");
    let foodCalories = document.getElementById("calories-val");
    let dateVal = document.getElementById("date-val");

    // store these values in a list and display them below
    // user will have the ability to edit and delete them
    // am I create event listeners within event listeners
});

Svar #1

Om du använder en editor som VSCode för att skriva Typescript har jag upptäckt att möjligheten att inspektera kod är mycket värdefull för att lära sig mer om vad som händer i typningssystemet. I VSCode kan du högerklicka på metoden (eller typen) och välja Gå till definition.

Om man granskar metoden i din fråga, getElementById, kan man se att den returnerar ett HTMLElement. Denna typ har ingen value-egenskap. Detta är logiskt eftersom getElementById kan returnera vilket HTMLElement som helst på sidan så länge det har ett id-attribut. Dock har inte varje HTMLElement en value-egenskap (till exempel div/span/p osv).

Eftersom du vet vilken typ du förväntar dig, men typsystemet inte gör det, för att få detta att fungera måste du tala om för Typescript vilken typ av element du förväntar dig att välja. Du skulle göra det genom att casta typen på det valda elementet enligt följande: const inputElement=<HTMLInputElement> document.getElementById("food-name-val"); eller const inputElement=document.getElementById("food-name-val") as HTMLInputElement;

Nu, eftersom Typescript känner igen det valda elementet som ett HTMLInputElement, kommer det inte att ge ett fel när du får åtkomst till value-egenskapen på det.

I ditt fall skulle det se ut så här: let foodName=(document.getElementById("food-name-val") as HTMLInputElement).value;

Svar #2

Ja, TypeScript har det här "lilla problemet", men det är för säkerhetens skull.
Du kan få inmatningsvärdet genom att göra något liknande detta:

var inputValue = (<HTMLInputElement>document.getElementById(elementId)).value;

Du kan se mer om detta casting <> grej här: TypeScript: casting HTMLElement

Hoppas det fungerar!

Svar #3

Du kan få värdet av ett inputfält i TypeScript. För ett nummer,

var num = parseFloat((<HTMLInputElement>document.getElementById("myValue")).value);
                                 or 
let num : number = parseFloat((<HTMLInputElement>document.getElementById("myValue")).value);

Strängar;

var str = (<HTMLInputElement>document.getElementById("myUnit")).value; 
         or
let str : string = (<HTMLInputElement>document.getElementById("myUnit")).value;

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

// event listener for when the add food button is clicked
let addFood = document.getElementById("add-food-button").addEventListener("click", () => {
  // get the values from inputs and store them in an array
  let foodName = (<HTMLInputElement>document.getElementById("food-name-val")).value;
  let foodCalories = parseFloat((<HTMLInputElement>document.getElementById("calories-val")).value);
  let dateVal = (<HTMLInputElement>document.getElementById("date-val")).value;
  // And so on ...
});

Relaterade artiklar