TypeScript类型断言：用instanceof还是as关键字更合适？

在TypeScript里，当你明确知道目标类型时，到底该优先用instanceof做显式类型检查，还是用as关键字做类型断言？我们结合实际场景分析：

先看一个常见的报错场景：修改点击事件的event.target样式时，原始代码会编译报错：

function handleClick(event: MouseEvent) {
  event.target.style.display = "block"; 
}

报错原因是event.target的类型为EventTarget | null，这个类型并没有style属性，所以编译器不允许直接访问。

下面两种解决方案各有优劣，适用场景不同：

1. 使用instanceof做运行时类型检查 #

function handleClick(event: MouseEvent) {
  if (!(event.target && event.target instanceof HTMLElement)) return;
  event.target.style.display = "block"; 
}

这种方式的核心优势是兼顾编译时类型安全和运行时错误防护：

• 它会在运行时实际检查event.target是否为HTMLElement实例，避免了运行时因类型不匹配导致的报错。
• 编译器会自动根据检查结果收窄类型，不需要额外的断言操作，代码逻辑更可靠。
• 即使后续代码变动（比如事件意外绑定到非DOM元素上），也能提前拦截错误，避免线上问题。

2. 使用as关键字做类型断言 #

function handleClick(event: MouseEvent) {
  (event.target as HTMLElement).style.display = "block";
}

这种方式更简洁，但有明确的适用前提：

• 只有当你完全确定event.target一定是HTMLElement（比如事件明确绑定在DOM元素上，不存在其他可能性）时，才适合用这种方式。
• as只是向编译器传递“我确定这个变量是这个类型”的信息，不会做任何运行时检查。如果实际运行时类型不符合预期，会直接抛出Cannot read properties of undefined之类的错误。

总结 #

• 优先推荐instanceof的检查方式，尤其是在类型可能存在不确定性的场景，它能最大程度保证代码的安全性。
• 仅在100%确定类型不会出错的场景下，才考虑用as断言简化代码，减少冗余的检查逻辑。

内容的提问来源于stack exchange，提问作者hhimko