使用 @ts-check 在 JS 文件中键入断言元素答案

【问题标题】：Type assert an element in a JS file with @ts-check使用 @ts-check 在 JS 文件中键入断言元素
【发布时间】：2021-05-24 00:11:22
【问题描述】：

我有一个带有 // @ts-check 指令的 JS 文件，使用 JSDoc cmets 来表示类型。

问题是从document 检索元素时类型检查失败。

所以我们在 HTML 中：

<input id="myInput">...

当我在 JS 中获取此元素时，类型检查会引发错误：

// @ts-check
const myInput = document.getElementById('myInput');
myInput.value = 'foobar';

“HTMLElement”类型上不存在属性“值”

如果我使用 JSDoc @type 注释指定预期类型，那么也会引发错误：

// @ts-check

/** @type {HTMLInputElement} */
const myInput = document.getElementById('myInput');
myInput.value = 'foobar';

类型“HTMLElement”不可分配给类型“HTMLInputElement”。
“HTMLElement”类型中缺少属性“accept”。

如果我在 TS 中，我可以使用 document.getElementById('myInput') as HTMLInputElement 告诉它我期待这种类型。

如何在 JS 中使用 @ts-check 执行此操作？

【问题讨论】：

【解决方案1】：

解决此问题的方法是将@type 声明放在变量和检索之间，并添加()。

像这样：

// @ts-check

const myInput = /** @type {HTMLInputElement} */ (document.getElementById('myInput'));
myInput.value = 'foobar';

这种语法相当笨拙和可怕，但他们有closed the bug 所以我猜上面的语法是处理这个问题的官方方法。

【讨论】：

【解决方案2】：

如果你想绝对确定，你可以使用运行时检查，这也让 typescript 相信赋值是安全的。

const myInput = document.getElementById('myInput');
if (myInput instanceof HTMLInputElement) {
    myInput.value = 'foobar';
}

【讨论】：

干杯，但在这种情况下，我特别不想要运行时检查，因为在myInput 不是HTMLInputElement 的基本不可能的情况下，除了抛出之外我无事可做一个例外。腰带和背带很好，但我有很多元素，这意味着很多腰带和背带，感觉就像在浪费时间。