feat(compiler): support safe keyed read expressions (#41911)

Currently we support safe property (`a?.b`) and method (`a?.b()`) accesses, but we don't handle safe keyed reads (`a?.[0]`) which is inconsistent. These changes expand the compiler in order to support safe key read expressions as well.

PR Close #41911

packages/core/test/acceptance/integration_spec.ts

@@ -1955,6 +1955,36 @@ describe('acceptance integration tests', () => {
     expect(content).toContain(`<span title="Your last name is Baggins">`);
   });
 
+  it('should handle safe keyed reads inside templates', () => {
+    @Component({
+      template: `
+      <span [title]="'Your last name is ' + (unknownNames?.[0] || 'unknown')">
+        Hello, {{ knownNames?.[0]?.[1] }}!
+        You are a Balrog: {{ species?.[0]?.[1]?.[2]?.[3]?.[4]?.[5] || 'unknown' }}
+        You are an Elf: {{ speciesMap?.[keys?.[0] ?? 'key'] }}
+        You are an Orc: {{ speciesMap?.['key'] }}
+      </span>
+    `
+    })
+    class App {
+      unknownNames: string[]|null = null;
+      knownNames: string[][] = [['Frodo', 'Bilbo']];
+      species = null;
+      keys = null;
+      speciesMap: Record<string, string> = {key: 'unknown'};
+    }
+
+    TestBed.configureTestingModule({declarations: [App]});
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+    const content = fixture.nativeElement.innerHTML;
+
+    expect(content).toContain('Hello, Bilbo!');
+    expect(content).toContain('You are a Balrog: unknown');
+    expect(content).toContain('You are an Elf: unknown');
+    expect(content).toContain(`<span title="Your last name is unknown">`);
+  });
+
   it('should handle nullish coalescing inside host bindings', () => {
     const logs: string[] = [];