Question

这个小代码片段来自an example，展示了Angular中Web Speech API的使用情况，这让我很难理解它。

我一直在谷歌搜索TypeScript如何定义和处理接口，但找不到类似样式的语法和解释。

interface IWindow extends Window {
  webkitSpeechRecognition: any;
  SpeechRecognition: any;
}
...
const { webkitSpeechRecognition }: IWindow = <IWindow>window;   // ??
const speechRecognition = new webkitSpeechRecognition();        // ??
...

这是我无法解释的最后两行。我看到结果当然是speechRecognition以某种方式成为一个SpeechRecognition接口，但我不知道它是如何发生的，我想知道这是一个很好的实现还是有更漂亮的方式。< / p>

我还想知道，这是如何解决 SpeechRecognition vs webkitSpeechRecognition 的供应商前缀属性的问题，因为例如Mozilla recommends以不同的方式定义SpeechRecognition：

var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;

Answer 1

我认为你所困惑的实际上是JavaScript，而不是TypeScript。该功能称为destructing assignment。

如果你有以下物品......

const obj = {foo: 1, bar: 2, baz: 3}

......你可以抓住这样的财产......

const foo = obj.foo
const bar = obj.bar
const baz = obj.baz

...或者等同于上述，具有破坏性赋值：

const {foo, bar, baz} = obj

所以，在你的情况下，

const { webkitSpeechRecognition }: IWindow = <IWindow>window;

相当于

const webkitSpeechRecognition = (<IWindow>window).webkitSpeechRecognition

在下一行中，通常的构造函数调用与new一起用于创建类的新实例。

你是对的，它确实处理了供应商前缀，至少不在你在这里提供的代码段中。

这是一个什么样的奇怪的接口实现？

1 个答案: