javascript - Hente verdien fra <input>-element i typescript

Jeg prøver for øyeblikket å hente verdiene en bruker vil sette inn i et input-skjema. I vanlig JavaScript kan jeg bare målrette elementet etter id eller klasse, osv., og så kan jeg bare bruke .value-metoden for faktisk å få brukt den metoden. Av en eller annen grunn kan ikke TypeScript gjøre det, noe jeg ikke forstår fordi TypeScript er en supermengde av JavaScript. Finnes det en spesifikk måte å hente en verdi fra et input-element i ren TypeScript, eller må jeg bruke Angular eller noe slikt?

Typescript-kode:

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

Hvis du bruker en editor som VSCode for å skrive Typescript, har jeg funnet evnen til å inspisere kode veldig verdifull for å lære mer om hva som skjer i typingssystemet. I VSCode kan du høyreklikke på metoden (eller typen) og velge Gå til definisjon.

Ved å inspisere metoden i spørsmålet ditt, getElementById, kan du se at den returnerer et HTMLElement. Denne typen har ikke en value-egenskap. Dette gir mening siden getElementById kan returnere hvilket som helst HTMLElement på siden så lenge det har et id-attributt. Ikke alle HTMLElement har imidlertid en value-egenskap (for eksempel en div/span/p, osv).

Siden du vet hvilken type du forventer, men typesystemet kan ikke, for å få dette til å fungere, må du fortelle Typescript hvilken type element du forventer å velge. Du kan gjøre det ved å caste typen til det valgte elementet på følgende måte: const inputElement=<HTMLInputElement> document.getElementById("food-name-val"); eller const inputElement=document.getElementById("food-name-val") as HTMLInputElement;

Nå, siden Typescript gjenkjenner det valgte elementet som en HTMLInputElement, vil det ikke oppstå feil når du får tilgang til value-egenskapen på det.

I ditt tilfelle vil det se slik ut: let foodName=(document.getElementById("food-name-val") as HTMLInputElement).value;

Svar #2

Ja, TypeScript har dette «lille problemet», men det er for sikkerhet.
Du kan få inputverdien ved å gjøre noe slikt:

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

Du kan se mer om denne casting <> tingen her: TypeScript: casting HTMLElement

Håper det fungerer!

Svar #3

Du kan få verdien av et input i TypeScript. For et tall,

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

Strenger;

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

Det er viktig å kaste HTMLElement til HTMLInputElement, ellers eksisterer ikke 'value'-egenskapen for HTMLElement i TypeScript, og TypeScript-kompilatoren vil vise en feil.

// 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 ...
});

Relaterte artikler