SpeechRecognition and SpeechSynthesis in TypeScript

Question

I was able to run SpeechRecognition in TypeScript by creating interface as below, and it is working fine:

namespace CORE{
    export interface IWindow extends Window{
        webkitSpeechRecognition: any;
    }
}

I tried to use the same way for SpeechSynthesis, but field, and the below code did not work:

namespace CORE{
    export interface IWindow extends Window{
        SpeechSynthesisUtterance: any;
        speechSynthesis: any;
    }
}

my questions are:

1. Is the way i used to define the SpeechRecognition is the best practice to be followed with TypeScript, or there is a better way.
   2. How to work with SpeechSynthesis in TypeScript.

for reference, below is my working code for SpeechRecognition:

namespace CORE{
    export interface IWindow extends Window{
        webkitSpeechRecognition: any;
    }
}

namespace CORE{
     export class speakRecognation{
    //    spoken:string;
        constructor(input:HTMLInputElement){
            var audio = new Audio('/sounds/sound.mp3');
            //Voice recognition

            const {webkitSpeechRecognition}: IWindow = <IWindow>window;
            const recognition = new webkitSpeechRecognition();
            recognition.continuous = false;
            recognition.interimResults = true;

            input.addEventListener("click", function(){
                audio.play();
                recognition.start();
                });

            recognition.onstart = function () {
                recognition.recognizing = true;
            };

            recognition.onresult = function (event) {
            var interim_transcript = '';
                for (var i = event.resultIndex; i < event.results.length; ++i) {
                    if (event.results[i].isFinal) {
                        var result = event.results[i][0].transcript;
                        input.value = result;
                      //  input.disable=false;
                        Program.execute(result);
                        recognition.stop();

                    } else {
                        interim_transcript += event.results[i][0].transcript;
                        input.value = interim_transcript;
                    }
                    }
            };

           recognition.onerror = function (event) {
                input.value = "Something went wrong. Try reloading the page.";
            }

            recognition.onnomatch = function (event) {
                input.value = "no match";
            }

           input.addEventListener("blur", function(e) {
                recognition.stop();
                input.value='';
            });

            input.addEventListener('keypress', function (e) {
                recognition.stop();
                var key = e.which || e.keyCode;
                if (key === 13) { // 13 is enter
                    Program.execute(input.value);
                }
            });
        }
    }
}

and below my trial in doing the SpeachSynthesis;

namespace CORE{
    export interface IWindow extends Window{
        SpeechSynthesisUtterance: any;
        SpeechSynthesis: any;
    }
}

namespace CORE{
     export class speakSynthesis{
         constructor(input:String){
                 if ('speechSynthesis' in window) {
                    console.log('Your browser supports speech synthesis.');
                // speak('hi');
                } else {
                    alert('Sorry your browser does not support speech synthesis. Try this in <a href="https://www.google.com/chrome/browser/desktop/index.html">Google Chrome</a>.');
                }
        const {SpeechSynthesisUtterance}: IWindow = <IWindow>window;
        const {SpeechSynthesis}: IWindow = <IWindow>window;

       // Create a new instance of SpeechSynthesisUtterance.
        var msg = new SpeechSynthesisUtterance();
        // Set the text.
        msg.text = input;
       // Set the attributes.
        msg.lang = 'en-US';
       // msg.voice = 'native'; msg.voice = 'Google US English'; //  'Google UK English Female' 
        msg.voice = 'Google US English' 
        msg.volume = 1;
        msg.rate = 1;
        msg.pitch = 1;
       //  msg.onend = function(event) { console.log('Speech complete'); }
        // Queue this utterance.
        var talk = new SpeechSynthesis();
        window.talk.speak(msg);
        }
     }
}

the exact error I get so far is as shown in the pic.

Answer 1

Thanks to this, I found the solution to add the speechSynthesis to the Window variable:

(<any>window).speechSynthesis.speak(msg);
// OR
(window as any).talk.speak(msg);

Moreover, i found another error in my code, which is: The speechSynthesis should start with small s, my mistake was capital S

I liked to post the answer, in case someone in the future needed it.