1

这个小代码片段来自一个示例，演示了 Angular 中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 建议对 SpeechRecognition进行一些不同的定义：

var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
4

1 回答 1

3

我假设您感到困惑的是 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).webkitSpeechRecognition

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

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

于 2017-12-15T04:34:58.523 回答