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

@@ -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. */
@@ -21,9 +22,7 @@ export interface BreakpointState {
    * A key boolean pair for each query provided to the observe method,
    * with its current matched state.
    */
-  breakpoints: {
-    [key: string]: boolean;
-  };
+  breakpoints: {[key: string]: boolean;};
 }
 
 /** The current state of a layout breakpoint. */
@@ -60,7 +59,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 +70,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 +98,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 +130,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', }},