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

这个小代码片段来自于演示Angular中的用法，这让我很难理解它

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

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

---

我想你所困惑的其实是JavaScript，而不是TypeScript。该特性称为

如果您有以下对象

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；

相当于

const webkitSpeechRecognition = (<IWindow>window).webkitSpeechRecognition

const webkitSpeechRecognition=（窗口）。webkitSpeechRecognition

在下一行中，通常的构造函数调用与

new

一起使用，以创建类的新实例

---

您是对的，它确实处理供应商前缀，至少在您提供的代码段中没有

const webkitSpeechRecognition = (<IWindow>window).webkitSpeechRecognition