error TS2339: Property 'catch' does not exist on type 'PromiseLike<void>'

Question

I am using WebRTC in Angular 2.

In TypeScript 1.x , I can use this successfully.

   navigator.mediaDevices.getUserMedia(constraints)
      .then(myStream => {
        this.myStream = myStream;
      })
      .catch(error => {
        console.log(error);
      });

But after updating to TypeScript 2.x , I got this error in my terminal when I run npm run watch :

error TS2339: Property 'catch' does not exist on type 'PromiseLike'.

My IDE WebStore shows red too:

I already did npm install --save-dev @types/webrtc .

My tsconfig.json file:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "module": "commonjs",
    "removeComments": true,
    "sourceMap": true,
    "lib": ["es6", "dom"],
    "types": [
      "body-parser",
      "compression",
      "express",
      "express-session",
      "mime",
      "node",
      "serve-static",
      "webrtc",
      "ws"
    ]
  },
  "include": [
    "node_modules/@types/**/*.d.ts",
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "!node_modules/@types/**/*.d.ts"
  ],
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

I am using universal-starter as start, so my nodemon.json and package.json are same with them, just has more packages.

How can I get rid of that error?

Answer 1

The build-in library dom declares the issue causing definition (see lib.dom.d.ts ):

getUserMedia(constraints: MediaStreamConstraints): PromiseLike<MediaStream>;

whereas @types/webrtc declares your expected definition (see MediaStream.d.ts ):

getUserMedia(constraints: MediaStreamConstraints): Promise<MediaStream>;

There is an open issue in the TypeScript repository.