打字稿表单重置（）不起作用答案

【问题标题】：Typescript form reset() not working打字稿表单重置（）不起作用
【发布时间】：2018-08-11 10:22:32
【问题描述】：

我正在使用 typescript 重置表单，但它无法正常工作或 typescript 编译器（1.0.3 版本）无法识别 reset() 函数。编译器报错

Build: Interface 'HTMLFormElement' incorrectly extends interface 'HTMLElement'. C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.4\lib.d.ts

这是打字稿代码

var resetForm =document.getElementById(dirtyFormID);
resetForm.reset();

当我将上述代码复制到 js 文件时，它运行良好。

这是什么原因？

【问题讨论】：

一个元素通常没有reset() 功能，只有表单元素。你没有明确说你有一个表单元素
var resetForm: HTMLFormElement = <HTMLFormElement>document.getElementById(dirtyFormID);?

【解决方案1】：

由于函数getElementById 返回一个更通用的类型HTMLElement，您需要手动声明特定版本：

var dirtyFormID = 'something';
var resetForm = <HTMLFormElement>document.getElementById(dirtyFormID);
resetForm.reset();

【讨论】：

【解决方案2】：

使用打字稿。

为避免 Google Chrome 错误“resetForm.reset 不是函数”，我在 HTML 代码中指定了按钮元素的类型“reset”。已指定：

type = 'reset'

让我的功能运行良好。

【讨论】：

【解决方案3】：

请注意document.getElementById 返回HTMLElement（就像这里已经说过的那样）。您应该将您的 HTMLElement 转换为 HTMLFormElement

铸造应该是这样的：

var resetForm:HTMLFormElement;
resetForm= <HTMLFormElement>document.getElementById('your form id');
if(resetForm)
    resetForm.reset();

【讨论】：