如何在 TypeScript 1.5 中启用/禁用按钮？答案

【问题标题】：How to enble/disable a button in TypeScript 1.5?如何在 TypeScript 1.5 中启用/禁用按钮？
【发布时间】：2021-03-26 15:06:11
【问题描述】：

使用 VS 2013。安装 TypeScript 1.5 并按照问题/建议进行升级后：

“您的项目使用的 TypeScript 版本比当前随 Visual Studio 安装的版本旧。如果您尝试构建项目，可能会出错。您希望我们升级项目文件中的 TypeScriptToolsVersion，这样您就不会又看到这个警告了吗？”

我遇到了一堆错误，例如：

错误 39 构建：“HTMLElement”类型上不存在属性“已禁用”。

关于以下陈述：

document.getElementById("btnExcel").disabled = false;

带有'禁用'卷曲下划线。

https://github.com/Microsoft/TypeScript/wiki/Breaking-Changes 指的是 1.5 版，它说： "resize、disabled、uniqueID、removeNode、fireEvent、currentStyle、runtimeStyle 的属性已从 HTMLElement 类型中移除"

现在我将那些“错误”的陈述改写如下：

document.getElementById("btnExcel").setAttribute('disabled', 'disabled');

在我看来这很奇怪。

这可以在 TypeScript 1.5 中以类型安全的方式更优雅地表达吗？你能举两个例子：启用和禁用吗？

感谢您的帮助！

【问题讨论】：

【解决方案1】：

应该有一种更简洁的方法来做到这一点：

var element = <HTMLInputElement> document.getElementById("btnExcel");
element.disabled = true;

或者，如果您更喜欢单衬：

(<HTMLInputElement> document.getElementById("btnExcel")).disabled = true;

看来getElementById之类的应该是泛型方法，接受类型参数。也就是说，通用方法不会给你任何类型转换没有的东西。

【讨论】：

【解决方案2】：

我正在使用 TypeScript v 3.7.something。在这里

(document.getElementById('button') as HTMLInputElement).disabled = false;

是首选。（由@Martin 的回答指导）

【讨论】：

【解决方案3】：

我在 Angular 9 中使用“typescript”：“~3.8.3”。要成功禁用按钮，请尝试：

let button = <HTMLButtonElement> document.getElementById('confirmBtn');
button.disabled = true;

【讨论】：

【解决方案4】：

使用<HTMLInputElement>解决的问题
试试这个吧..

var previous = <HTMLInputElement>document.getElementById('previous');

previous.disabled = true;

【讨论】：