在使用 iframe 时键入安全的方法来检查 instanceof？

Question

我有一个由 Flow 检查的代码库类型，并且我使用instanceof了很多来进行类型改进。我现在需要让我的代码在元素来自 iframe 时工作，并且instanceof在这种情况下不起作用，因为每个窗口都有自己的实例。我试图定义一个getOwnElement助手来获取Element，defaultView但如果我使用检索Element到instanceof的流检查失败：declare function getOwnElement(node: Element): Element;function getOwnElement(node) {  return node.ownerDocument.defaultView.Element;}const ownElement = getOwnElement(element);element instanceof ownElement && element; // element is marked as `empty`所以现在我想知道我应该如何更新我的代码以保持它的类型安全并使用 iframe？

Answer 1

我有两个建议。两者都不是完全类型安全的，但缺乏安全性包含在易于测试和手动验证的小函数中。两者都有这样的风险，如果你传入一个不相关的对象，node.ownerDocument.defaultView.Element你会得到不正确的结果，但这似乎是一个很小的风险。我没有在运行时测试过这些，但是任何需要的调整都应该是相对较小的。

declare class Element {};

function asElement(node: any): ?Element {

  const OwnElement = node?.ownerDocument?.defaultView?.Element;

  if (OwnElement != null && node instanceof OwnElement) {

    return node;

  } else {

    return null;

  }

}

function doThingWithElement(whatever: mixed): void {

  const element = asElement(whatever);

  if (element != null) {

    (element: Element);

    // Expected error

    (element: string);

  }

}

在这个例子中，asElement是一个函数，它在考虑 iframe 问题的情况下执行 instanceof 检查，并且当且仅当它通过检查时才返回参数。然后，您可以使用普通的空值检查进行细化。

declare class Element {};

declare function isElement(node: any): boolean %checks (node instanceof Element);

function isElement(node) {

  const OwnElement = node?.ownerDocument?.defaultView?.Element;

  return OwnElement != null && node instanceof OwnElement;

}

function doThingWithElement(whatever: mixed): void {

  if (isElement(whatever)) {

    (whatever: Element);

    // Expected error

    (whatever: string);

  }

}

这将创建一个isElement函数，您可以直接使用它来执行细化。

顺便说一句，Element如果类的实例是Element类型，而不是类本身。Class<Element>是类本身的类型，但在右侧具有动态创建的类的情况下，Flow 似乎不执行类型改进。