다음에서 값으로다음에서 값으로타자기의 요소타자기의 요소

다음에서 값으로타자기의 요소

현재 사용자가 입력 양식에 삽입할 값을 가져오려고 합니다.바닐라 자바스크립트에서, 저는 단지 ID나 클래스 등으로 요소를 타겟팅할 수 있고, 그리고 나서 저는 그 방법을 실제로 사용하기 위해 .value 방법을 사용할 수 있습니다.어떤 이유에서인지 typescript는 그렇게 할 수 없습니다. typescript는 javascript의 상위 집합이기 때문에 이해할 수 없습니다.순수 타자기의 입력 요소에서 값을 얻는 구체적인 방법이 있습니까? 아니면 각도 같은 것을 사용해야 합니까?

유형 스크립트 코드:

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

VSCode와 같은 편집기를 사용하여 Typescript를 작성하는 경우에는 Typing 시스템에서 발생하는 작업에 대해 자세히 알아보는데 코드를 검사하는 기능이 매우 유용하다는 것을 알게 되었습니다.VSCode에서 Method(또는 유형)를 마우스 오른쪽 버튼으로 클릭하고 다음을 선택할 수 있습니다.Go to definition.

질문에 있는 방법을 검사하는 중입니다.getElementById당신은 그것이 반환하는 것을 볼 수 있습니다.HTMLElement이 유형에는 다음이 없습니다.value그 위에 있는 재산.이는 다음과 같습니다.getElementById아무 것이나HTMLElement그것이 있는 한 페이지에id기여하다.전부는 아닙니다.HTMLElement을 가지고 있음에도value속성(예: a)div/span/p등).

예상되는 유형을 알고 있지만 유형 시스템에서는 이 작업을 수행할 수 없기 때문에 유형 스크립트에 어떤 유형의 요소를 선택해야 합니다.선택한 요소의 유형을 다음과 같이 캐스팅하여 이 작업을 수행할 수 있습니다.const inputElement = <HTMLInputElement> document.getElementById("food-name-val");또는const inputElement = document.getElementById("food-name-val") as HTMLInputElement;

이제 Typescript가 선택한 요소를 인식하기 때문에HTMLInputElement액세스할 때 오류가 발생하지 않습니다.value그 위에 있는 재산.

당신의 경우는 다음과 같습니다.let foodName = (document.getElementById("food-name-val") as HTMLInputElement).value;

네, TypeScript에는 "작은 문제"가 있지만 안전을 위한 것입니다.
다음과 같은 작업을 수행하여 입력 값을 얻을 수 있습니다.

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

이 캐스팅에 대한 자세한 내용은 여기에서 확인할 수 있습니다.유형스크립트: HTML 요소 캐스팅

효과가 있기를 바랍니다!

TypeScript에서 입력값을 얻을 수 있습니다.숫자에 대해서는,

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

문자열;

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

HTMLElement를 HTMLInputElement에 캐스트하는 것이 중요합니다. 그렇지 않으면 TypeScript의 HTMLElement에 대한 'value' 속성이 존재하지 않으며 TypeScript 컴파일러에 오류가 표시됩니다.

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

다음 코드가 더 읽기 쉽다고 생각합니다.

const user: string = document.querySelector<HTMLInputElement>('input[name="user"]').value;

언급URL : https://stackoverflow.com/questions/53071851/getting-the-value-from-input-element-in-typescript