refactor: Consistently use index access on index signature types. (#28937)

This change helps highlight certain misoptimizations with Closure
compiler. It is also stylistically preferable to consistently use index
access on index sig types.

Roughly, when one sees '.foo' they know it is always checked for typos
in the prop name by the type system (unless 'any'), while "['foo']" is
always not.

Once all angular repos are conforming this will become a tsetse.info
check, enforced by bazel.

PR Close #28937

packages/animations/browser/src/render/css_keyframes/css_keyframes_driver.ts

@@ -45,7 +45,7 @@ export class CssKeyframesDriver implements AnimationDriver {
     let tab = '';
     keyframes.forEach(kf => {
       tab = TAB_SPACE;
-      const offset = parseFloat(kf.offset);
+      const offset = parseFloat(kf['offset']);
       keyframeStr += `${tab}${offset * 100}% {\n`;
       tab += TAB_SPACE;
       Object.keys(kf).forEach(prop => {

packages/compiler-cli/src/transformers/inline_resources.ts

@@ -65,7 +65,7 @@ export class InlineResourcesMetadataTransformer implements MetadataTransformer {
   updateDecoratorMetadata(loader: StaticResourceLoader, arg: MetadataObject): MetadataObject {
     if (arg['templateUrl']) {
       arg['template'] = loader.get(arg['templateUrl']);
-      delete arg.templateUrl;
+      delete arg['templateUrl'];
     }
 
     const styles = arg['styles'] || [];
@@ -76,7 +76,7 @@ export class InlineResourcesMetadataTransformer implements MetadataTransformer {
     styles.push(...styleUrls.map(styleUrl => loader.get(styleUrl)));
     if (styles.length > 0) {
       arg['styles'] = styles;
-      delete arg.styleUrls;
+      delete arg['styleUrls'];
     }
 
     return arg;

packages/compiler/src/aot/static_symbol_resolver.ts

@@ -420,18 +420,18 @@ export class StaticSymbolResolver {
             if (!filePath) {
               return {
                 __symbolic: 'error',
-                message:
+                message: `Could not resolve ${module} relative to ${
-                    `Could not resolve ${module} relative to ${self.host.getMetadataFor(sourceSymbol.filePath)}.`,
+                    self.host.getMetadataFor(sourceSymbol.filePath)}.`,
-                line: map.line,
+                line: map['line'],
-                character: map.character,
+                character: map['character'],
                 fileName: getOriginalName()
               };
             }
             return {
               __symbolic: 'resolved',
               symbol: self.getStaticSymbol(filePath, name),
-              line: map.line,
+              line: map['line'],
-              character: map.character,
+              character: map['character'],
               fileName: getOriginalName()
             };
           } else if (functionParams.indexOf(name) >= 0) {

packages/compiler/src/aot/summary_serializer.ts

@@ -249,7 +249,7 @@ class ToJsonSerializer extends ValueTransformer {
    */
   visitStringMap(map: {[key: string]: any}, context: any): any {
     if (map['__symbolic'] === 'resolved') {
-      return visitValue(map.symbol, this, context);
+      return visitValue(map['symbol'], this, context);
     }
     if (map['__symbolic'] === 'error') {
       delete map['line'];

packages/core/src/compiler/compiler_facade.ts

@@ -10,7 +10,7 @@ import {CompilerFacade, ExportedCompilerFacade} from './compiler_facade_interfac
 export * from './compiler_facade_interface';
 
 export function getCompilerFacade(): CompilerFacade {
-  const globalNg: ExportedCompilerFacade = global.ng;
+  const globalNg: ExportedCompilerFacade = global['ng'];
   if (!globalNg || !globalNg.ɵcompilerFacade) {
     throw new Error(
         `Angular JIT compilation failed: '@angular/compiler' not loaded!\n` +

packages/core/src/render3/styling/class_and_style_bindings.ts

@@ -568,7 +568,7 @@ export function updateStylingMap(
   const classesValue = classesPlayerBuilder ?
       (classesInput as BoundPlayerFactory<{[key: string]: any}|string>) !.value :
       classesInput;
-  const stylesValue = stylesPlayerBuilder ? stylesInput !.value : stylesInput;
+  const stylesValue = stylesPlayerBuilder ? stylesInput !['value'] : stylesInput;
 
   let classNames: string[] = EMPTY_ARRAY;
   let applyAllClasses = false;

packages/forms/src/form_builder.ts

@@ -70,8 +70,8 @@ export class FormBuilder {
         updateOn = options.updateOn != null ? options.updateOn : undefined;
       } else {
         // `options` are legacy form group options
-        validators = options.validator != null ? options.validator : null;
+        validators = options['validator'] != null ? options['validator'] : null;
-        asyncValidators = options.asyncValidator != null ? options.asyncValidator : null;
+        asyncValidators = options['asyncValidator'] != null ? options['asyncValidator'] : null;
       }
     }