chore(typescript): uniformly access all index signature with index access. (#15206)

This is a strictness check that we are going to enforce in g3 internal
typescript, to aid with optimization. Generally it is also syntactically
a good idea to have visual indication when a type is accessed through an
index signature vs not.

Author: rkirov

src/cdk/drag-drop/directives/drag.ts

@@ -250,7 +250,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    const rootSelectorChange = changes.rootElementSelector;
+    const rootSelectorChange = changes['rootElementSelector'];
 
     // We don't have to react to the first change since it's being
     // handled in `ngAfterViewInit` where it needs to be deferred.

src/lib/datepicker/calendar-body.ts

@@ -105,14 +105,14 @@ export class MatCalendarBody implements OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    const columnChanges = changes.numCols;
+    const columnChanges = changes['numCols'];
     const {rows, numCols} = this;
 
-    if (changes.rows || columnChanges) {
+    if (changes['rows'] || columnChanges) {
       this._firstRowOffset = rows && rows.length && rows[0].length ? numCols - rows[0].length : 0;
     }
 
-    if (changes.cellAspectRatio || columnChanges || !this._cellPadding) {
+    if (changes['cellAspectRatio'] || columnChanges || !this._cellPadding) {
       this._cellPadding = `${50 * this.cellAspectRatio / numCols}%`;
     }
 

src/lib/datepicker/calendar.ts

@@ -318,7 +318,8 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    const change = changes.minDate || changes.maxDate || changes.dateFilter;
+    const change =
+        changes['minDate'] || changes['maxDate'] || changes['dateFilter'];
 
     if (change && !change.firstChange) {
       const view = this._getCurrentViewComponent();

src/lib/datepicker/datepicker-toggle.ts

@@ -92,7 +92,7 @@ export class MatDatepickerToggle<D> implements AfterContentInit, OnChanges, OnDe
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes.datepicker) {
+    if (changes['datepicker']) {
       this._watchStateChanges();
     }
   }

src/lib/dialog/dialog-content-directives.ts

@@ -76,7 +76,8 @@ export class MatDialogClose implements OnInit, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    const proxiedChange = changes._matDialogClose || changes._matDialogCloseResult;
+    const proxiedChange =
+        changes['_matDialogClose'] || changes['_matDialogCloseResult'];
 
     if (proxiedChange) {
       this.dialogResult = proxiedChange.currentValue;

src/lib/expansion/expansion-panel-header.ts

@@ -77,18 +77,18 @@ export class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
       private _changeDetectorRef: ChangeDetectorRef,
       @Inject(MAT_EXPANSION_PANEL_DEFAULT_OPTIONS) @Optional()
           defaultOptions?: MatExpansionPanelDefaultOptions) {
-
     const accordionHideToggleChange = panel.accordion ?
-      panel.accordion._stateChanges.pipe(filter(changes => !!changes.hideToggle)) : EMPTY;
+        panel.accordion._stateChanges.pipe(
+            filter(changes => !!changes['hideToggle'])) :
+        EMPTY;
 
     // Since the toggle state depends on an @Input on the panel, we
     // need to subscribe and trigger change detection manually.
-    this._parentChangeSubscription = merge(
-      panel.opened,
-      panel.closed,
-      accordionHideToggleChange,
-      panel._inputChanges.pipe(filter(changes => !!(changes.hideToggle || changes.disabled)))
-    )
+    this._parentChangeSubscription =
+        merge(
+            panel.opened, panel.closed, accordionHideToggleChange,
+            panel._inputChanges.pipe(filter(
+                changes => !!(changes['hideToggle'] || changes['disabled']))))
     .subscribe(() => this._changeDetectorRef.markForCheck());
 
     // Avoids focus being lost if the panel contained the focused element and was closed.

src/lib/icon/icon.ts

@@ -223,7 +223,7 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Aft
 
   ngOnChanges(changes: SimpleChanges) {
     // Only update the inline SVG icon if the inputs changed, to avoid unnecessary DOM operations.
-    if (changes.svgIcon) {
+    if (changes['svgIcon']) {
       if (this.svgIcon) {
         const [namespace, iconName] = this._splitIconName(this.svgIcon);
 

src/lib/select/select.ts

@@ -552,7 +552,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
   ngOnChanges(changes: SimpleChanges) {
     // Updating the disabled state is handled by `mixinDisabled`, but we need to additionally let
     // the parent form field know to run change detection when the disabled state changes.
-    if (changes.disabled) {
+    if (changes['disabled']) {
       this.stateChanges.next();
     }
   }