Attempting to use speech synthesis in Angular2 with the IWindow interface

Question

I am trying to use speech synthesis http://blog.teamtreehouse.com/getting-started-speech-synthesis-api

First, I expanded the window using the interface:

window.interface.ts

export interface IWindow extends Window { webkitSpeechRecognition: any; speechSynthesis: any; } 

Next, I made a window service:

window.service.ts

 import { Injectable } from '@angular/core'; import { IWindow } from '../interfaces/window-interface'; function _window() : IWindow { return window; } @Injectable() export class WindowService { get nativeWindow() : any { return _window(); } } 

Now in the component I'm trying to implement it .... without success ..

app.component

 import { Component, OnInit, ViewChild } from '@angular/core'; import { WindowService } from '../../providers/window.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['.app.component.scss'] }) export class AppComponent implements OnInit { constructor(private _router: Router, private _window: WindowService ) { } sayIt() { var utterance = new SpeechSynthesisUtterance('Hello World'); this._window.speechSynthesis.speak(utterance); } } 

TS error:

 Cannot find name 'SpeechSynthesisUtterance'.) Property 'speechSynthesis' does not exist on type 'WindowService'.) 

I also used this article for speech recognition: Angular2: Web Speech API - Voice Recognition

An error still occurs - The 'speechSynthesis' property does not exist in the 'Window' type

Answer 1

This can be done as shown below.

  var msg = new SpeechSynthesisUtterance("hello world"); (<any>window).speechSynthesis.speak(msg) 

Get help here

Speech Recognition and SpeechSynthesis in TypeScript