使用@ ts-check将元素转换为JS文件

Question

我有一个带有// @ts-check矫正的JS文件，使用JSDoc注释来表示类型。

问题是，从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告诉我我希望使用这种类型。

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

Answer 1

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

像这样：

// @ts-check

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

此语法相当笨拙且令人恐惧，但是它们closed the bug非常有用，所以我猜上面的语法是处理此问题的 official 方法。

Answer 2

如果您想绝对确定，可以使用运行时检查，这也可以使打字稿确信分配是安全的。

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