在处理对 DOM 元素的引用时，我可以信任 Typescript 吗？

Question

以下函数获取对 DOM 元素的引用，然后执行操作：

function getElementAndDoStuff() {
  // element: HTMLElement | null
  const element = document.getElementById('id');

  if(!element) throw new Error('Error.');

  // element: HTMLElement
  element;
}

throwing 行之后，element 被 TypeScript 认为是 HTMLElement，但是该元素随时可能从 DOM 中消失，所以信任 TypeScript 安全吗？

即使我们不是在抛出线之后访问 element，而是在两者之间放置随机函数调用和 asyn/await？

是否存在信任 TypeScript 不安全的情况？

Answer 1

相信它是安全的，因为无论它是否在 DOM 中，它仍然是一个 HTMLElement。

const element = document.querySelector('div');
console.log(element instanceof HTMLElement);
element.remove();
console.log(element instanceof HTMLElement);

<div>div</div>

如果该元素未附加到 DOM，并且您尝试执行需要当前在 DOM 中的元素的操作，您将收到警告。例如，你不能做

const parent = document.querySelector('parent');
parent.appendChild(element);

不将其更改为

const parent = document.querySelector('parent');
if(!parent) throw new Error('Error.');
parent.appendChild(element);

Even if instead of accessing element right after the throwing line, we put random function calls and asyn/await in between?

是的，这是安全的，只要变量永远不会被重新分配 - 它永远不会从 HTMLElement 变为其他东西，所以保持它的类型，无论其他代码运行什么，都是安全的。

Are there cases when it's not safe to trust TypeScript?

编程的每个水龙头通常都有边缘情况。没有什么是 100% 完美的。 TypeScript，由人类编写，has bugs。但是考虑到它已经工作了这么久，很多东西都已经修复了，而且大多数仍然存在的东西在编写脚本的正常过程中是相对不常见的。

根据我的经验，TypeScript 问题更频繁地出现在没有程序员的一点额外帮助的情况下，TypeScript 无法正确推断类型，尽管有类型断言或类型保护或类似的东西。反过来 - 尽管 TypeScript 将类型推断为 B 而绝对不是 A，但类型是 A - 在体面的代码库中更加不寻常（例如，抛出 anys 和ass 自由）。我已经写了相当多的 TS，但不记得我上次运行进入那个问题是什么时候了，即使我曾经有过。经常有 false-positive 类型警告，很少有 false-negative 类型推断。

在处理对 DOM 元素的引用时，我可以信任 Typescript 吗？

Can I trust Typescript when dealing with a reference to a DOM element?

javascript

event-loop

typescript