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.

Author: devversion

src/cdk/layout/breakpoints-observer.ts

@@ -6,11 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {coerceArray} from '@angular/cdk/coercion';
 import {Injectable, NgZone, OnDestroy} from '@angular/core';
 import {MediaMatcher} from './media-matcher';
 import {combineLatest, concat, Observable, Subject, Observer} from 'rxjs';
 import {debounceTime, map, skip, startWith, take, takeUntil} from 'rxjs/operators';
-import {coerceArray} from '@angular/cdk/coercion';
 
 
 /** The current state of a layout breakpoint. */
@@ -60,7 +60,7 @@ export class BreakpointObserver implements OnDestroy {
    * @param value One or more media queries to check.
    * @returns Whether any of the media queries match.
    */
-  isMatched(value: string | string[]): boolean {
+  isMatched(value: string|string[]): boolean {
     const queries = splitQueries(coerceArray(value));
     return queries.some(mediaQuery => this._registerQuery(mediaQuery).mql.matches);
   }
@@ -71,7 +71,7 @@ export class BreakpointObserver implements OnDestroy {
    * @param value One or more media queries to check.
    * @returns A stream of matches for the given queries.
    */
-  observe(value: string | string[]): Observable<BreakpointState> {
+  observe(value: string|string[]): Observable<BreakpointState> {
     const queries = splitQueries(coerceArray(value));
     const observables = queries.map(query => this._registerQuery(query).observable);
 
@@ -103,23 +103,24 @@ export class BreakpointObserver implements OnDestroy {
     const mql: MediaQueryList = this._mediaMatcher.matchMedia(query);
 
     // Create callback for match changes and add it is as a listener.
-    const queryObservable = new Observable<MediaQueryList>((observer: Observer<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
-      // have MediaQueryList inherit from EventTarget, which causes inconsistencies in how Zone.js
-      // patches it.
-      const handler = (e: any) => this._zone.run(() => observer.next(e));
-      mql.addListener(handler);
-
-      return () => {
-        mql.removeListener(handler);
-      };
-    }).pipe(
-      startWith(mql),
-      map((nextMql: MediaQueryList) => ({query, matches: nextMql.matches})),
-      takeUntil(this._destroySubject)
-    );
+    const queryObservable =
+        new Observable<MediaQueryListEvent>((observer: Observer<MediaQueryListEvent>) => {
+          // 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.
+          const handler: (event: MediaQueryListEvent) => void = e =>
+              this._zone.run(() => observer.next(e));
+          mql.addListener(handler);
+
+          return () => {
+            mql.removeListener(handler);
+          };
+        })
+            .pipe(
+                map((nextMql: MediaQueryListEvent) => ({query, matches: nextMql.matches})),
+                startWith({query, matches: mql.matches}), takeUntil(this._destroySubject));
 
     // Add the MediaQueryList to the set of queries.
     const output = {observable: queryObservable, mql};
@@ -134,6 +135,6 @@ export class BreakpointObserver implements OnDestroy {
  */
 function splitQueries(queries: string[]): string[] {
   return queries.map((query: string) => query.split(','))
-                .reduce((a1: string[], a2: string[]) => a1.concat(a2))
-                .map(query => query.trim());
+      .reduce((a1: string[], a2: string[]) => a1.concat(a2))
+      .map(query => query.trim());
 }

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', }},