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

Question

这个小代码片段来自 Angular 中的 an example demonstrating the usage of the Web Speech API，这让我很难理解它。

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

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

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

而且我还想知道，这如何解决 SpeechRecognition 与 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 一起用于创建 class.

的新实例

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

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

What kind of a strange interface implementation is that?

interface

typescript

webspeech-api

angular