javascript - 如何让 Flow 在 React 应用程序中验证 Web API？

Question

我在一个简单的 React 项目中使用 Flow 静态类型检查。这有效。我想打开新的多媒体 Web API。这不。

Flow 显然不会验证内置于较新浏览器中但尚未本地识别的类型，即 MediaRecorder 和 navigator.mediaDevices。我的代码做了非常琐碎的事情(有效)，如下所示:

navigator.mediaDevices.getUserMedia({video: true, audio: true})
    .then(blah blah blah

尝试使用这些结果会导致错误，例如:

Cannot call navigator.mediaDevices.getUserMedia because property getUserMedia is missing in undefined [1].

类似地，尝试分配新的 MediaRecorder(stream) 会导致“无法解析名称 MediaRecorder”。 [请参阅答案更新]

理想的解决方案是“需要这个 npm 库来定义 Web API 的流类型。”该解决方案的另一个理想部分是“这就是您如何为您不拥有但 Flow 本身无法理解的事物定义类型。”我什至可能会受益于一个简单的“这就是你告诉 Flow 忽略这个对象的方式”，这似乎让我失望了。

这显然是一个非常简单的问题，应该很容易解决，但不幸的是，搜索有关“Flow”的文档非常困难，因为它的名字太常见了。事实上，如此常见，以至于我们不能将其用作 SO 上的标签。 (如果我可以创建标签，我怀疑正确的标签将是“facebook-flow”，但我不能。;))

帮忙？也许问题真正应该是“如何在 Google 不将我的搜索重定向到流体动力学的情况下搜索 Flow 文档？”

自发布问题以来的更新和学习

对于初学者，请注意 Flow 附带了浏览器内置 WebApi 函数(例如 MediaRecorder)的定义，但您必须完全限定地引用它们:“window.MediaRecorder”。一旦你意识到这一点，它就显得微不足道了。您不应该引用全局 namespace 中的对象。如果您经常切换语言，那么很容易忘记这一点，而且 MDN 和其他官方文档站点上的示例经常省略“窗口”这一事实也无济于事。将您的路径 Root 于窗口或导航器中。

另外，供引用:

The tag you are searching for is flowtype – trixn

Answer 1

您可以通过首先断言 navigator.mediaDevices 存在来让代码片段传递流。以下内容将起作用:

if (navigator.mediaDevices) {
  navigator.mediaDevices.getUserMedia({ video: true, audio: true })
}

如果您咨询flow definition for Navigator ，mediaDevices 属性是一个可选对象 (mediaDevices?: Object)

正如您所说， navigator.mediaDevices 尚未在所有浏览器中实现，因此该属性是可选的是有意义的，因为它可能存在也可能不存在，具体取决于代码运行的位置。因此，Flow 会让您在使用 mediaDevices 之前检查它是否存在，从而防止 Safari 中出现运行时错误。

我向您推荐的一个资源是 https://www.saltycrane.com/flow-type-cheat-sheet/latest/ 。每当我对内置类型有疑问时，我都会从这里开始。