이상한 인터페이스 구현의 종류는 무엇입니까?

Question

이 작은 코드 스 니펫은 an example이고, 각도는 Web Speech API이며, 이해하기 힘듭니다.

저는 TypeScript가 인터페이스를 정의하고 처리하는 방법에 대해 많은 검색을 해왔지만 설명이있는 유사한 스타일의 구문을 찾을 수 없었습니다.

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

이것은 내가 해석 할 수없는 마지막 두 행입니다. 물론 speechRecognition이 어떤 식 으로든 SpeechRecognition 인터페이스가되는 결과를 보았습니다.하지만 어떻게 된 것인지 알 수 없으며, 이것이 훌륭한 구현인지, 아니면 더 좋은 방법인지 알고 싶습니다.

---

그리고 나는 또한이 webkitSpeechRecognition 대 SpeechRecognition에 대한 공급 업체 접두사 속성의 문제를 해결하는 방법, 알고 싶습니다 예를 들어, 때문에 Mozilla recommends는 SpeechRecognition에게 조금 다르게 정의 :

var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition; 

Answer 1

당신이에 대해 혼란스러워 어떤 가정 실제로 자바 스크립트가 아닌 타이프 라이터입니다. 이 기능의 이름은 destructing assignment입니다.

다음과 같은 목적이있는 경우 ...

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

이 ...이 같은 그 propertes 잡을 수 있습니다 ...

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와 함께 사용됩니다.

---

그리고 네가 맞다면, 여기에 나와있는 스 니펫에는 없지만 공급 업체 접두어를 처리해야합니다.