chore: improve type safety in breakpoint observer

* Fixes a workaround where we cast the MediaQueryList event listener to any because TypeScript didn't have proper types before TS 3.1. There is still some signature issue with our current TypeScript version, but at least we can now type all other declarations, and just have a missing type for `removeListener`. This has been fixed with microsoft/TypeScript@40bd7c8

Author: devversion

src/cdk/layout/breakpoints-observer.ts

@@ -98,28 +98,25 @@ export class BreakpointObserver implements OnDestroy {
     }
 
     const mql: MediaQueryList = this.mediaMatcher.matchMedia(query);
-
-    // TODO(jelbourn): change this `any` to `MediaQueryListEvent` once Google has upgraded to
-    // TypeScript 3.1 (the type is unavailable before then).
-    let queryListener: any;
+    let queryListener: (event: MediaQueryListEvent) => void;
 
     // Create callback for match changes and add it is as a listener.
-    const queryObservable = fromEventPattern<MediaQueryList>(
-      // Listener callback methods are wrapped to be placed back in ngZone. Callbacks must be placed
-      // back into the zone because matchMedia is only included in Zone.js by loading the
-      // webapis-media-query.js file alongside the zone.js file.  Additionally, some browsers do not
+    const queryObservable = fromEventPattern<MediaQueryListEvent>((listener: Function) => {
+      // Listener callback methods are wrapped to be placed back in ngZone. Callbacks must be
+      // placed back into the zone because matchMedia is only included in Zone.js by loading the
+      // webapis-media-query.js file alongside the zone.js file. Additionally, some browsers do not
       // have MediaQueryList inherit from EventTarget, which causes inconsistencies in how Zone.js
       // patches it.
-      (listener: Function) => {
-        queryListener = (e: any) => this.zone.run(() => listener(e));
-        mql.addListener(queryListener);
-      },
-      () => mql.removeListener(queryListener))
-      .pipe(
-        startWith(mql),
-        map((nextMql: MediaQueryList) => ({query, matches: nextMql.matches})),
-        takeUntil(this._destroySubject)
-      );
+      mql.addListener(queryListener = event => this.zone.run(() => listener(event)));
+    }, () => {
+      // TODO(devversion): This cast to "any" is just needed because our current TypeScript
+      // version does have a wrong `removeListener` signature. Remove when updating to v3.2.1
+      mql.removeListener(queryListener as any);
+    }).pipe(
+      startWith({query, matches: mql.matches}),
+      map(nextMql => ({query, matches: nextMql.matches})),
+      takeUntil(this._destroySubject)
+    );
 
     // Add the MediaQueryList to the set of queries.
     const output = {observable: queryObservable, mql};

test/browser-providers.js

@@ -6,8 +6,6 @@
  *   - local: Launches the browser locally on the current operating system.
  *   - BS: Launches the browser within BrowserStack
  *   - SL: Launches the browser within Saucelabs
- *
- * TODO(devversion): rename this to "browserstack" and "saucelabs".
  */
 const browserConfig = {
   'ChromeHeadlessCI':  { unitTest: {target: 'local', }},