どのような奇妙なインターフェイスの実装はそれですか？

Question

この小さなコードスニペットはan exampleで、Web Speech APIの使い方を示すもので、わかりにくいです。

TypeScriptがインターフェイスを定義して処理する方法について、私は多くのことを尋ねましたが、同様のスタイルの構文を説明で見つけることができませんでした。

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

私が解釈できない最後の2行です。もちろん、speechRecognitionはどういうわけかSpeechRecognitionインターフェイスになっていますが、私はそれがどうなったかは分かりません。これがうまく実装されているかどうかを知りたいのです。

---

そして、私はまた、どのようにこれが原因で、例えばwebkitSpeechRecognition対音声認識のためのベンダー接頭辞性質の問題を解決し、ことを知りたいのですが少し違った音声認識を定義するMozilla recommends：

var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition; 

Answer 1

を、私はあなたが混乱しているものと仮定し、実際にはJavaScriptではなく、活字体です。この機能はdestructing assignmentと呼ばれています。あなたは以下の目的を持っている場合

...

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

...あなたは...このよう

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

をそのpropertesをつかむ...または、上記の同等のことができ、

const {foo, bar, baz} = obj 

だから、あなたのケースでは、

：消滅の割り当てと

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

が次の行に

const webkitSpeechRecognition = (<IWindow>window).webkitSpeechRecognition 

に相当し、通常のコンストラクタコールは、クラスの新しいインスタンスを作成するためにnewと共に使用されます。

---

そして、あなたは正しい、それは少なくともないあなたがここで提供スニペットでは、ベンダープレフィックスを処理します。