refactor: add support for noImplicitAny (#13381)

Enables the `noImplicitAny` compiler option and fixes all of the resulting compiler errors.

Fixes #13330.

Author: crisbeto

package-lock.json

@@ -61,6 +61,7 @@
     "@types/fs-extra": "^4.0.3",
     "@types/glob": "^5.0.33",
     "@types/gulp": "3.8.32",
+    "@types/gulp-util": "^3.0.34",
     "@types/hammerjs": "^2.0.35",
     "@types/jasmine": "^2.8.8",
     "@types/merge2": "^0.3.30",

package.json

@@ -7,7 +7,11 @@
  */
 
 import {InjectionToken} from '@angular/core';
-import {ComponentType, Overlay, ScrollStrategy, BlockScrollStrategy} from '@angular/cdk/overlay';
+import {
+  ComponentType,
+  Overlay,
+  ScrollStrategy,
+} from '@angular/cdk/overlay';
 import {DialogRef} from './dialog-ref';
 import {CdkDialogContainer} from './dialog-container';
 import {DialogConfig} from './dialog-config';
@@ -31,7 +35,7 @@ export const DIALOG_CONTAINER =
 
 /** @docs-private */
 export function MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay):
-    () => BlockScrollStrategy {
+    () => ScrollStrategy {
   return () => overlay.scrollStrategies.block();
 }
 

src/cdk-experimental/dialog/dialog-injectors.ts

@@ -14,7 +14,8 @@ import {
   Injector,
   Inject,
   ComponentRef,
-  OnDestroy
+  OnDestroy,
+  Type
 } from '@angular/core';
 import {ComponentPortal, PortalInjector, TemplatePortal} from '@angular/cdk/portal';
 import {of as observableOf, Observable, Subject, defer} from 'rxjs';
@@ -28,6 +29,7 @@ import {
   Overlay,
   OverlayRef,
   OverlayConfig,
+  ScrollStrategy,
 } from '@angular/cdk/overlay';
 import {startWith} from 'rxjs/operators';
 
@@ -45,6 +47,8 @@ import {
  */
 @Injectable()
 export class Dialog implements OnDestroy {
+  private _scrollStrategy: () => ScrollStrategy;
+
   /** Stream that emits when all dialogs are closed. */
   get _afterAllClosed(): Observable<void> {
     return this._parentDialog ? this._parentDialog.afterAllClosed : this._afterAllClosedBase;
@@ -68,8 +72,10 @@ export class Dialog implements OnDestroy {
   constructor(
       private overlay: Overlay,
       private injector: Injector,
-      @Inject(DIALOG_REF) private dialogRefConstructor,
-      @Inject(DIALOG_SCROLL_STRATEGY) private _scrollStrategy,
+      @Inject(DIALOG_REF) private dialogRefConstructor: Type<DialogRef<any>>,
+      // TODO(crisbeto): the `any` here can be replaced
+      // with the proper type once we start using Ivy.
+      @Inject(DIALOG_SCROLL_STRATEGY) scrollStrategy: any,
       @Optional() @SkipSelf() private _parentDialog: Dialog,
       @Optional() location: Location) {
 
@@ -79,6 +85,8 @@ export class Dialog implements OnDestroy {
     if (!_parentDialog && location) {
       location.subscribe(() => this.closeAll());
     }
+
+    this._scrollStrategy = scrollStrategy;
   }
 
   /** Gets an open dialog by id. */

src/cdk-experimental/dialog/dialog.ts

@@ -8,6 +8,7 @@
     "noUnusedParameters": true,
     "strictNullChecks": true,
     "strictFunctionTypes": true,
+    "noImplicitAny": true,
     "importHelpers": true,
     "newLine": "lf",
     "module": "es2015",

src/cdk-experimental/tsconfig-build.json

@@ -66,12 +66,10 @@ describe('CdkAccordion', () => {
 
 @Component({template: `
   <cdk-accordion [multi]="multi">
-    <cdk-accordion-item #item1></cdk-accordion-item>
-    <cdk-accordion-item #item2></cdk-accordion-item>
+    <cdk-accordion-item></cdk-accordion-item>
+    <cdk-accordion-item></cdk-accordion-item>
   </cdk-accordion>`})
 class SetOfItems {
-  @ViewChild('item1') item1;
-  @ViewChild('item2') item2;
   multi: boolean = false;
 }
 

src/cdk/accordion/accordion.spec.ts

@@ -27,5 +27,5 @@ export interface TreeDataNodeFlattener<T> {
    * Put node descendants of node in array.
    * If `onlyExpandable` is true, then only process expandable descendants.
    */
-  nodeDescendents(node: T, nodes: T[], onlyExpandable: boolean);
+  nodeDescendents(node: T, nodes: T[], onlyExpandable: boolean): void;
 }

src/cdk/collections/tree-adapter.ts

@@ -57,7 +57,7 @@ describe('dragging utilities', () => {
     });
 
     it('should not do anything if the source array is empty', () => {
-      const a = [];
+      const a: number[] = [];
       const b = [3, 4, 5];
 
       transferArrayItem(a, b, 0, 0);

src/cdk/drag-drop/drag-utils.spec.ts

@@ -28,7 +28,7 @@ import {
   SkipSelf,
   ViewContainerRef,
 } from '@angular/core';
-import {Observable, Subject, Subscription} from 'rxjs';
+import {Observable, Subject, Subscription, Observer} from 'rxjs';
 import {take} from 'rxjs/operators';
 import {DragDropRegistry} from './drag-drop-registry';
 import {
@@ -206,15 +206,16 @@ export class CdkDrag<T = any> implements AfterViewInit, OnDestroy {
    * Emits as the user is dragging the item. Use with caution,
    * because this event will fire for every pixel that the user has dragged.
    */
-  @Output('cdkDragMoved') moved: Observable<CdkDragMove<T>> = Observable.create(observer => {
-    const subscription = this._moveEvents.subscribe(observer);
-    this._moveEventSubscriptions++;
-
-    return () => {
-      subscription.unsubscribe();
-      this._moveEventSubscriptions--;
-    };
-  });
+  @Output('cdkDragMoved') moved: Observable<CdkDragMove<T>> =
+      Observable.create((observer: Observer<CdkDragMove<T>>) => {
+        const subscription = this._moveEvents.subscribe(observer);
+        this._moveEventSubscriptions++;
+
+        return () => {
+          subscription.unsubscribe();
+          this._moveEventSubscriptions--;
+        };
+      });
 
   constructor(
     /** Element that the draggable is attached to. */
@@ -470,7 +471,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnDestroy {
    * Updates the item's position in its drop container, or moves it
    * into a new one, depending on its current drag position.
    */
-  private _updateActiveDropContainer({x, y}) {
+  private _updateActiveDropContainer({x, y}: Point) {
     // Drop container that draggable has been moved into.
     let newContainer = this.dropContainer._getSiblingContainerFromPosition(this, x, y);
 

src/cdk/drag-drop/drag.ts

@@ -137,7 +137,7 @@ export class FakeMediaQueryList {
   /** The callback for change events. */
   addListenerCallback?: (mql: MediaQueryListEvent) => void;
 
-  constructor(public matches, public media) {}
+  constructor(public matches: boolean, public media: string) {}
 
   /** Toggles the matches state and "emits" a change event. */
   setMatches(matches: boolean) {

src/cdk/layout/breakpoints-observer.spec.ts

@@ -98,7 +98,10 @@ export class BreakpointObserver implements OnDestroy {
     }
 
     const mql: MediaQueryList = this.mediaMatcher.matchMedia(query);
-    let queryListener;
+
+    // TODO(jelbourn): change this `any` to `MediaQueryListEvent` once Google has upgraded to
+    // TypeScript 3.1 (the type is unavailable before then).
+    let queryListener: any;
 
     // Create callback for match changes and add it is as a listener.
     const queryObservable = fromEventPattern<MediaQueryList>(
@@ -108,8 +111,6 @@ export class BreakpointObserver implements OnDestroy {
       // have MediaQueryList inherit from EventTarget, which causes inconsistencies in how Zone.js
       // patches it.
       (listener: Function) => {
-        // TODO(jelbourn): change this `any` to `MediaQueryListEvent` once Google has upgraded to
-        // TypeScript 3.1 (the type is unavailable before then).
         queryListener = (e: any) => this.zone.run(() => listener(e));
         mql.addListener(queryListener);
       },

src/cdk/layout/breakpoints-observer.ts

@@ -19,7 +19,7 @@ import {
   OnDestroy,
   Output,
 } from '@angular/core';
-import {Observable, Subject, Subscription} from 'rxjs';
+import {Observable, Subject, Subscription, Observer} from 'rxjs';
 import {debounceTime} from 'rxjs/operators';
 
 /**
@@ -65,7 +65,7 @@ export class ContentObserver implements OnDestroy {
   observe(elementOrRef: Element | ElementRef<Element>): Observable<MutationRecord[]> {
     const element = elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;
 
-    return Observable.create(observer => {
+    return Observable.create((observer: Observer<MutationRecord[]>) => {
       const stream = this._observeElement(element);
       const subscription = stream.subscribe(observer);
 

src/cdk/observers/observe-content.ts

@@ -8,8 +8,7 @@
 
 import {PositionStrategy} from './position/position-strategy';
 import {Direction, Directionality} from '@angular/cdk/bidi';
-import {ScrollStrategy} from './scroll/scroll-strategy';
-import {NoopScrollStrategy} from './scroll/noop-scroll-strategy';
+import {ScrollStrategy, NoopScrollStrategy} from './scroll/index';
 
 
 /** Initial configuration used when creating an overlay. */
@@ -62,9 +61,13 @@ export class OverlayConfig {
 
   constructor(config?: OverlayConfig) {
     if (config) {
-      Object.keys(config)
-        .filter(key => typeof config[key] !== 'undefined')
-        .forEach(key => this[key] = config[key]);
+      Object.keys(config).forEach(k => {
+        const key = k as keyof OverlayConfig;
+
+        if (typeof config[key] !== 'undefined') {
+          this[key] = config[key];
+        }
+      });
     }
   }
 }

src/cdk/overlay/overlay-config.ts

@@ -114,6 +114,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   private _offsetX: number;
   private _offsetY: number;
   private _position: FlexibleConnectedPositionStrategy;
+  private _scrollStrategyFactory: () => ScrollStrategy;
 
   /** Origin for the connected overlay. */
   @Input('cdkConnectedOverlayOrigin') origin: CdkOverlayOrigin;
@@ -165,8 +166,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   @Input('cdkConnectedOverlayViewportMargin') viewportMargin: number = 0;
 
   /** Strategy to be used when handling scroll events while the overlay is open. */
-  @Input('cdkConnectedOverlayScrollStrategy') scrollStrategy: ScrollStrategy =
-      this._scrollStrategy();
+  @Input('cdkConnectedOverlayScrollStrategy') scrollStrategy: ScrollStrategy;
 
   /** Whether the overlay is open. */
   @Input('cdkConnectedOverlayOpen') open: boolean = false;
@@ -219,9 +219,11 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
       private _overlay: Overlay,
       templateRef: TemplateRef<any>,
       viewContainerRef: ViewContainerRef,
-      @Inject(CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY) private _scrollStrategy,
+      @Inject(CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY) scrollStrategyFactory: any,
       @Optional() private _dir: Directionality) {
     this._templatePortal = new TemplatePortal(templateRef, viewContainerRef);
+    this._scrollStrategyFactory = scrollStrategyFactory;
+    this.scrollStrategy = this._scrollStrategyFactory();
   }
 
   /** The associated overlay reference. */

src/cdk/overlay/overlay-directives.ts

@@ -10,7 +10,7 @@ import {Direction, Directionality} from '@angular/cdk/bidi';
 import {ComponentPortal, Portal, PortalOutlet, TemplatePortal} from '@angular/cdk/portal';
 import {ComponentRef, EmbeddedViewRef, NgZone} from '@angular/core';
 import {Location} from '@angular/common';
-import {Observable, Subject, merge, SubscriptionLike, Subscription} from 'rxjs';
+import {Observable, Subject, merge, SubscriptionLike, Subscription, Observer} from 'rxjs';
 import {take, takeUntil} from 'rxjs/operators';
 import {OverlayKeyboardDispatcher} from './keyboard/overlay-keyboard-dispatcher';
 import {OverlayConfig} from './overlay-config';
@@ -42,15 +42,16 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
    */
   private _previousHostParent: HTMLElement;
 
-  private _keydownEventsObservable: Observable<KeyboardEvent> = Observable.create(observer => {
-    const subscription = this._keydownEvents.subscribe(observer);
-    this._keydownEventSubscriptions++;
+  private _keydownEventsObservable: Observable<KeyboardEvent> =
+      Observable.create((observer: Observer<KeyboardEvent>) => {
+        const subscription = this._keydownEvents.subscribe(observer);
+        this._keydownEventSubscriptions++;
 
-    return () => {
-      subscription.unsubscribe();
-      this._keydownEventSubscriptions--;
-    };
-  });
+        return () => {
+          subscription.unsubscribe();
+          this._keydownEventSubscriptions--;
+        };
+      });
 
   /** Stream of keydown events dispatched to this overlay. */
   _keydownEvents = new Subject<KeyboardEvent>();

src/cdk/overlay/overlay-ref.ts

@@ -16,7 +16,7 @@ import {
   validateHorizontalPosition,
   validateVerticalPosition,
 } from './connected-position';
-import {Observable, Subscription, Subject} from 'rxjs';
+import {Observable, Subscription, Subject, Observer} from 'rxjs';
 import {OverlayReference} from '../overlay-reference';
 import {isElementScrolledOutsideView, isElementClippedByScrolling} from './scroll-clip';
 import {coerceCssPixelValue, coerceArray} from '@angular/cdk/coercion';
@@ -122,15 +122,16 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
   private _previousPushAmount: {x: number, y: number} | null;
 
   /** Observable sequence of position changes. */
-  positionChanges: Observable<ConnectedOverlayPositionChange> = Observable.create(observer => {
-    const subscription = this._positionChanges.subscribe(observer);
-    this._positionChangeSubscriptions++;
-
-    return () => {
-      subscription.unsubscribe();
-      this._positionChangeSubscriptions--;
-    };
-  });
+  positionChanges: Observable<ConnectedOverlayPositionChange> =
+      Observable.create((observer: Observer<ConnectedOverlayPositionChange>) => {
+        const subscription = this._positionChanges.subscribe(observer);
+        this._positionChangeSubscriptions++;
+
+        return () => {
+          subscription.unsubscribe();
+          this._positionChangeSubscriptions--;
+        };
+      });
 
   /** Ordered list of preferred positions, from most to least desirable. */
   get positions() {
@@ -705,7 +706,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
   private _calculateBoundingBoxRect(origin: Point, position: ConnectedPosition): BoundingBoxRect {
     const viewport = this._viewportRect;
     const isRtl = this._isRtl();
-    let height, top, bottom;
+    let height: number, top: number, bottom: number;
 
     if (position.overlayY === 'top') {
       // Overlay is opening "downward" and thus is bound by the bottom viewport edge.
@@ -745,7 +746,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
         (position.overlayX === 'end' && !isRtl) ||
         (position.overlayX === 'start' && isRtl);
 
-    let width, left, right;
+    let width: number, left: number, right: number;
 
     if (isBoundedByLeftViewportEdge) {
       right = viewport.right - origin.x + this._viewportMargin;
@@ -770,7 +771,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
       }
     }
 
-    return {top, left, bottom, right, width, height};
+    return {top: top!, left: left!, bottom: bottom!, right: right!, width, height};
   }
 
   /**

src/cdk/overlay/position/flexible-connected-position-strategy.ts

@@ -144,22 +144,24 @@ describe('BlockScrollStrategy', () => {
   it('should not clobber user-defined scroll-behavior', skipIOS(() => {
     const root = documentElement;
     const body = document.body;
+    const rootStyle = root.style as CSSStyleDeclaration & {scrollBehavior: string};
+    const bodyStyle = body.style as CSSStyleDeclaration & {scrollBehavior: string};
 
-    root.style['scrollBehavior'] = body.style['scrollBehavior'] = 'smooth';
+    rootStyle.scrollBehavior = bodyStyle.scrollBehavior = 'smooth';
 
     // Get the value via the style declaration in order to
     // handle browsers that don't support the property yet.
-    const initialRootValue = root.style['scrollBehavior'];
-    const initialBodyValue = root.style['scrollBehavior'];
+    const initialRootValue = rootStyle.scrollBehavior;
+    const initialBodyValue = rootStyle.scrollBehavior;
 
     overlayRef.attach(componentPortal);
     overlayRef.detach();
 
-    expect(root.style['scrollBehavior']).toBe(initialRootValue);
-    expect(body.style['scrollBehavior']).toBe(initialBodyValue);
+    expect(rootStyle.scrollBehavior).toBe(initialRootValue);
+    expect(bodyStyle.scrollBehavior).toBe(initialBodyValue);
 
     // Avoid bleeding styles into other tests.
-    root.style['scrollBehavior'] = body.style['scrollBehavior'] = '';
+    rootStyle.scrollBehavior = bodyStyle.scrollBehavior = '';
   }));
 
   /**