Javascript 从<；输入>；typescript中的元素

我目前正在尝试获取用户将插入到输入表单中的值。在普通javascript中，我可以通过id或类等将元素作为目标，然后我可以使用.value方法来实际使用该方法。出于某种原因，typescript无法做到这一点，我不理解这一点，因为typescript是javascript的超集。在纯typescript中是否有一种从输入元素获取值的特定方法，或者我是否必须使用angular或其他方法

打字脚本代码：

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

是的，TypeScript有一个“小问题”，但这是为了安全
您可以通过以下方式获取输入值：

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

var-inputValue=（document.getElementById（elementId））.value；

你可以在这里看到更多关于这个角色的信息：

---

希望它能起作用

如果您使用VSCode这样的编辑器来编写Typescript，我发现检查代码的能力对于了解打字系统中发生的事情非常有价值。在VSCode中，您可以右键单击方法（或类型），然后选择“转到定义”

检查问题中的方法，

getElementById

，可以看到它返回一个

HTMLElement

。此类型没有

值

属性。这是有意义的，因为

getElementById

可以返回页面上的任何

HTMLElement

，只要它具有

id

属性。并非每个

HTMLElement

都有

值

属性（例如

div

/

span

/

p

等）

因为你知道你期望的是什么类型，但是类型系统不能，为了让它工作，你必须告诉Typescript你期望选择什么类型的元素。您可以通过如下方式强制转换所选元素的类型来实现这一点：

const inputElement=document.getElementById（“食品名称val”）
或
const inputElement=document.getElementById（“食品名称val”）作为HTMLInputElement

现在，由于Typescript将所选元素识别为
HTMLInputElement
，因此在访问该元素上的
值
属性时不会出错

在您的情况下，这看起来像：
让foodName=（document.getElementById（“food name val”）作为HTMLInputElement）值
您可以在TypeScript中获取输入值。
对于一个数字

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

var num=parseFloat（（document.getElementById（“myValue”））.value）；
或
让num:number=parseFloat（（document.getElementById（“myValue”））.value）；

弦

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

var str=（document.getElementById（“myUnit”）.value；
或
让str:string=（document.getElementById（“myUnit”）.value；

将HtmleElement强制转换为HTMLInputElement很重要，否则TypeScript中HtmleElement的“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 ...
});

//单击添加食物按钮时的事件侦听器
让addFood=document.getElementById（“添加食物按钮”）.addEventListener（“单击”，（）=>{
//从输入中获取值并将其存储在数组中
让foodName=（document.getElementById（“food name val”））.value；
让foodCalories=parseFloat（（document.getElementById（“calories val”））.value）；
让dateVal=（document.getElementById（“date val”））.value；
//等等。。。
});
@FanonX你能把我的答案标记为“正确答案”吗？仅用于跟踪等。使用
作为HTMLInputElement
对我有效：就像一个符咒一样有效：）