从 typescript 中的 <input> 元素获取值

Posted 2023-03-13

【中文标题】从 typescript 中的 <input> 元素获取值

【英文标题】：Getting the value from <input> element in typescript

【发布时间】：2019-04-03 22:34:08

【问题描述】：

我目前正在尝试获取用户将插入输入表单的值。在 vanilla javascript 中，我可以通过 id 或 class 等来定位元素，然后我可以使用 .value 方法来实际使用该方法。出于某种原因，打字稿不能这样做，我不明白，因为打字稿是 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
);

【问题讨论】：

使用 as htmlInputElement 为我工作：***.com/a/52495421/470749

【参考方案1】：

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

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

您可以在此处查看有关此铸造 的更多信息：TypeScript: casting HTMLElement

希望它有效！

【讨论】：

@FanonX 你能把我的答案标记为“正确答案”吗？仅用于跟踪等。

【参考方案2】：

如果您使用像 VSCode 这样的编辑器来编写 Typescript，我发现检查代码的能力对于了解更多关于打字系统中发生的事情非常有价值。在 VSCode 中，您可以右键单击方法（或类型）并选择 Go to definition。

检查您的问题中的方法getElementById，您可以看到它返回一个HTMLElement。此类型没有 value 属性。这是有道理的，因为getElementById 可以返回页面上的任何HTMLElement，只要它具有id 属性。并非每个HTMLElement 都有value 属性（例如div/span/p 等）。

因为你知道你期望什么类型，但是类型系统不能，为了让它工作，你必须告诉 Typescript 你期望选择什么类型的元素。您可以通过强制转换所选元素的类型来做到这一点，如下所示： 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;

【讨论】：

像魅力一样工作:)

【参考方案3】：

您可以在 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 ...
);

【参考方案4】：

我发现以下代码更具可读性：

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

【讨论】：

这个“新”答案所做的唯一一件事就是重复一半其他答案已经说过的话，包括接受的答案。

嗯，是的，但对我来说，用括号进行投射并不是那么容易理解的。个人喜好就是一切。

这让我明白了有不同的写法，所以+1。从 .NET/Java 的背景来看，这种风格感觉更熟悉