Question

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

Flow显然不会验证内置于较新浏览器但尚未被本地识别的类型，即MediaRecorder和navigator.mediaDevices。我的代码做了非常简单的事情（有效）：

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

尝试将这些结果用于以下错误：

无法调用navigator.mediaDevices.getUserMedia，因为undefined [1]中缺少属性getUserMedia。

同样，尝试分配新的MediaRecorder（流）导致＆＃34;无法解析名称MediaRecorder＆＃34;。 [见答案更新]

理想的解决方案是＆＃34;需要这个npm库来定义Web Apis的流程类型。＆＃34;解决方案的另一个理想部分是＆＃34;这就是你如何定义你不会拥有的东西，Flow本身并不理解。＆＃34;我甚至可能会从简单的＆＃34中受益;这就是你告诉Flow忽略这个对象＆＃34;，这似乎让我失望了。

这显然是一个非常简单的问题，应该很容易解决，但不幸的是，很难在＆＃34; Flow＆＃34;上搜索文档。因为它的名字很常见。事实上，我们不能在SO上使用它作为标记。（我怀疑正确的标签是＆＃34; facebook-flow＆＃34;如果我可以创建标签，我不能。;）

帮助？也许这个问题真的应该是＆＃34;如何在没有Google将我的搜索重定向到流体动力学的情况下搜索Flow文档？＆＃34;

发布问题后的更新和学习

对于初学者，请注意，Flow附带了浏览器内置WebApi函数（如MediaRecorder）的定义，但您必须完全限定它们：＆＃34; window.MediaRecorder＆＃34;。一旦你意识到这一点，它似乎很明显;您不应该从全局命名空间引用对象。如果您经常跳语言，这很容易忘记，而且MDN和其他官方文档站点的示例经常忽略＆＃34;窗口这一事实并没有帮助。在窗口或导航器中根据您的路径。

另外，供参考：

您要搜索的标签是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/。每当我对内置类型有疑问时，我就会开始。

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

发布问题后的更新和学习

1 个答案: