在Flow中细化HTML元素类型：能否将Node/Element细化为特定类型？

这个问题我熟！你遇到的是TypeScript里的类型缩小问题——虽然你判断了tagName === "A"，但TypeScript还没聪明到能仅凭tagName就把Node类型细化成HTMLAnchorElement，所以它依然认为node可能是普通Node，而普通Node没有href属性，自然就抛出Cannot get node.href because property href is missing in Node的错误了。

下面给你几种靠谱的解决办法：

1. 使用instanceof自动缩小类型（最推荐） #

TypeScript原生支持通过instanceof来做类型守卫，它会自动把node的类型细化成对应的HTML元素类型，代码写起来既简洁又安全：

function htmlToEntity(node: HTMLAnchorElement | Node) {
  if (node instanceof HTMLAnchorElement) {
    return createEntity(
      "LINK",
      "MUTABLE",
      { url: node.href }, // 这里不会再报错啦
    );
  }
  return undefined;
}

2. 手动类型断言（适合你确定判断逻辑没问题的场景） #

如果你坚持想用tagName判断，可以手动给node加上类型断言，告诉TypeScript“我确定现在它就是HTMLAnchorElement”：

function htmlToEntity(node: HTMLAnchorElement | Node) {
  if (node.tagName === "A") {
    // 手动断言为HTMLAnchorElement
    const anchorNode = node as HTMLAnchorElement;
    return createEntity(
      "LINK",
      "MUTABLE",
      { url: anchorNode.href },
    );
  }
  return undefined;
}

⚠️ 注意：这种方法需要你自己保证判断逻辑的准确性，如果后续代码改动导致判断失效，运行时可能会出问题。

3. 自定义类型守卫函数（适合复杂判断场景） #

如果你的判断逻辑更复杂（比如要同时检查多个属性），可以写一个自定义的类型守卫函数，让TypeScript明确知道什么时候类型可以被细化：

function isHTMLAnchorElement(node: Node): node is HTMLAnchorElement {
  return node.tagName === "A";
}

function htmlToEntity(node: HTMLAnchorElement | Node) {
  if (isHTMLAnchorElement(node)) {
    return createEntity(
      "LINK",
      "MUTABLE",
      { url: node.href }, // TypeScript会自动识别这里的类型
    );
  }
  return undefined;
}

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