How to make the module work with Typescript ?

[mathildebuenerd]

I would like to use that module with Typescript, but for now I always get an error "Cannot find name for SpeechRecognition()". I couldn't find the @types to add to my package.json file.

Here's my index.ts code :

let app = {
    initialize: function () {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    onDeviceReady: function() {
        console.log("The device is ready");
        const recognition = new SpeechRecognition();
        recognition.lang = "fr-FR";
        recognition.continuous = true;
        recognition.interimResults = false;
        let button = document.querySelector('#startSpeechRecognition');
        button.addEventListener('click', function() {
            recognition.start();
        });
        recognition.onresult = function(event) {
            if (event.results.length > 0) {
                console.log(event.results[0][0].transcript);
            }
        }
    }
};
app.initialize();

Platform and Version (eg. Android 5.0 or iOS 9.2.1)

I am on Android 7.1.1, Samsung Galaxy J3. Cordova version is 8.0.0 and the Android platform on Cordova is 7.0.0. Plugin version is 0.3.0.

Thanks

[texano00]

@mathildebuenerd my workaround was to add this declaration

declare const SpeechRecognition: any;

on the top.

Let me say if it works.

[mathildebuenerd]

Yes it works! Thanks!

[undercontr]

Another solution comes after 5 years :)

npm install --save @types/dom-speech-recognition

Will add necessary typings to the TypeScript project.

[M-Yankov]

Another solution comes after 5 years :)

npm install --save @types/dom-speech-recognition

Will add necessary typings to the TypeScript project.

Still gives me the error: error TS2304: Cannot find name 'SpeechRecognition'. Do i need anything else except installing the package?
It happens on ng serve command

[undercontr]

How do you access SpeechRecognition class? From which object global or window?

[M-Yankov]

global object:

    let recognition = new SpeechRecognition();
    recognition.lang = 'en-US';
    recognition.interimResults = false;
    recognition.maxAlternatives = 1;

    // recognition.onresult = (event) => {
    //   this.transcribedSpeech += event.results[0][0].transcript.toLowerCase();
    // }

    recognition.onerror = () => recognition.stop();
    recognition.onend = () => recognition.stop();
    recognition.onspeechend = () => recognition.stop();

First VS Code warned me that the name doesn't exists. After installing the package VS Code was good, but then running the command ng-server --port 8080 fails with that message.

[undercontr]

@M-Yankov Angular may want you to access the SpeechRecognition class from the window or global object.

[M-Yankov]

The solution was to add in tsconfig.json :

angularCompilerOptions: {
   types: [ 'types/dom-speech-recognition' ]
}

[lionelspagna]

@M-Yankov I'm trying but not working, can u provide complete file of tsconfig.json? Angular report "TS2688: Cannot find type definition file for 'types/dom-speech-recognition'.
The file is in the program because:
Entry point of type library 'types/dom-speech-recognition' specified in compilerOptions"

[M-Yankov]

@M-Yankov I'm trying but not working, can u provide complete file of tsconfig.json? Angular report "TS2688: Cannot find type definition file for 'types/dom-speech-recognition'. The file is in the program because: Entry point of type library 'types/dom-speech-recognition' specified in compilerOptions"

All of the options were there configured before I start work on the project. I Only added angularCompilerOptions.types...

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "strictPropertyInitialization": false,
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "types": ["@types/dom-speech-recognition"]
  }
}