I'm building a small Angular2 app and I'm trying to use a MediaRecorder object (https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder) like so:
var mediaRecorder = new MediaRecorder(stream);
However, TypeScript is telling me it cannot find name 'MediaRecorder'. I'm guessing this is down to my TypeScript configuration which I pulled directly from the QuickStart guide (https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html). The configuration looks like this:
{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true }, "compileOnSave": true }
I've seen various configurations around the web that include "target: es6" or "lib: es6" and also ones with modules other that "commonjs" but I'm new to this so I'm not really sure what is going on. When I've tried updating these values I get more errors.
Does anyone know how I can get this to work?
Your compiler doesn't know anything about the MediaRecorder object.
Simply declare it like this:
declare var MediaRecorder: any;
Until MediaRecorer lands in Typescript dom.lib any suffices for lazy people. But it evicts the whole point of TypeScript.
So why not an almost full blown type declaration :
Place this in an ambient declaration file, ex: index.d.ts
declare interface MediaRecorderErrorEvent extends Event { name: string; } declare interface MediaRecorderDataAvailableEvent extends Event { data : any; } interface MediaRecorderEventMap { 'dataavailable': MediaRecorderDataAvailableEvent; 'error': MediaRecorderErrorEvent ; 'pause': Event; 'resume': Event; 'start': Event; 'stop': Event; 'warning': MediaRecorderErrorEvent ; } declare class MediaRecorder extends EventTarget { readonly mimeType: string; readonly state: 'inactive' | 'recording' | 'paused'; readonly stream: MediaStream; ignoreMutedMedia: boolean; videoBitsPerSecond: number; audioBitsPerSecond: number; ondataavailable: (event : MediaRecorderDataAvailableEvent) => void; onerror: (event: MediaRecorderErrorEvent) => void; onpause: () => void; onresume: () => void; onstart: () => void; onstop: () => void; constructor(stream: MediaStream); start(); stop(); resume(); pause(); isTypeSupported(type: string): boolean; requestData(); addEventListener<K extends keyof MediaRecorderEventMap>(type: K, listener: (this: MediaStream, ev: MediaRecorderEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener<K extends keyof MediaRecorderEventMap>(type: K, listener: (this: MediaStream, ev: MediaRecorderEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; }
And yes type competition works:
TIP
Usually I configure in tsconfig.json a folder where I keep all jses or APIs that have no typedef
For example for a project layout like this
project/ @types <- a folder where I define my types index.d.ts src ... ... tsconfig.json
I write in tsconfig.json something like this :
{ "compilerOptions": { ... "typeRoots": [ "node_modules/@types", "./@types" ], ... }
