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,12 @@
  * 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 {asapScheduler, combineLatest, Observable, Subject, Observer} from 'rxjs';
+import {asapScheduler, combineLatest, Observable, Observer, Subject} from 'rxjs';
 import {debounceTime, map, startWith, takeUntil} from 'rxjs/operators';
-import {coerceArray} from '@angular/cdk/coercion';
+
+import {MediaMatcher} from './media-matcher';
 
 
 /** The current state of a layout breakpoint. */
@@ -60,7 +61,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,23 +72,22 @@ 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);
 
-    return combineLatest(observables).pipe(
-      debounceTime(0, asapScheduler),
-      map((breakpointStates: InternalBreakpointState[]) => {
-        const response: BreakpointState = {
-          matches: false,
-          breakpoints: {},
-        };
-        breakpointStates.forEach((state: InternalBreakpointState) => {
-          response.matches = response.matches || state.matches;
-          response.breakpoints[state.query] = state.matches;
-        });
-        return response;
-      }));
+    return combineLatest(observables)
+        .pipe(debounceTime(0, asapScheduler), map((breakpointStates: InternalBreakpointState[]) => {
+                const response: BreakpointState = {
+                  matches: false,
+                  breakpoints: {},
+                };
+                breakpointStates.forEach((state: InternalBreakpointState) => {
+                  response.matches = response.matches || state.matches;
+                  response.breakpoints[state.query] = state.matches;
+                });
+                return response;
+              }));
   }
 
   /** Registers a specific query to be listened for. */
@@ -100,23 +100,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};
@@ -131,6 +132,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', }},