fix(compiler-cli): infer type of event target for void elements (angular#62648)

Currently we infer the target of DOM events to be `EventTarget | null` which is consistent with the built-in types for `addEventListener`. This is due to the fact that users can dispatch custom events, or the event might've bubbled. However, this typing is also inconvenient for some other common use cases like `<input (input)="query($event.target.value)">`, because we don't have the ability to type cast in a template.

These changes aim to make some of the cases simpler by inferring the type of `$event.target` if the event is bound on a void element which guarantees that it couldn't have bubbled.

PR Close angular#62648

Author: crisbeto

packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts

@@ -1642,8 +1642,9 @@ class TcbUnclaimedOutputsOp extends TcbOp {
         // `HTMLElement.addEventListener` using `HTMLElementEventMap` to infer an accurate type for
         // `$event` depending on the event name. For unknown event names, TypeScript resorts to the
         // base `Event` type.
-        const handler = tcbCreateEventHandler(output, this.tcb, this.scope, EventParamType.Infer);
         let target: ts.Expression;
+        let domEventAssertion: ts.Expression | undefined;
+
         // Only check for `window` and `document` since in theory any target can be passed.
         if (output.target === 'window' || output.target === 'document') {
           target = ts.factory.createIdentifier(output.target);
@@ -1652,11 +1653,52 @@ class TcbUnclaimedOutputsOp extends TcbOp {
         } else {
           target = elId;
         }
+
+        // By default the target of an event is `EventTarget | null`, because of bubbling
+        // and custom events. This can be inconvenient in some common cases like `input` elements
+        // since we don't have the ability to type cast in templates. We can improve the type
+        // checking for some of these cases by inferring the target based on the element it was
+        // bound to. We can only do this safely if the element is a void element (e.g. `input` or
+        // `img`), because we know that it couldn't have bubbled from a child. The event handler
+        // with the assertion would look as follows:
+        //
+        // ```
+        // const _t1 = document.createElement('input');
+        //
+        // _t1.addEventListener('input', ($event) => {
+        //   ɵassertType<typeof _t1>($event.target);
+        //   handler($event.target);
+        // });
+        // ```
+        if (
+          this.target instanceof TmplAstElement &&
+          this.target.isVoid &&
+          ts.isIdentifier(target)
+        ) {
+          domEventAssertion = ts.factory.createCallExpression(
+            this.tcb.env.referenceExternalSymbol('@angular/core', 'ɵassertType'),
+            [ts.factory.createTypeQueryNode(target)],
+            [
+              ts.factory.createPropertyAccessExpression(
+                ts.factory.createIdentifier(EVENT_PARAMETER),
+                'target',
+              ),
+            ],
+          );
+        }
+
         const propertyAccess = ts.factory.createPropertyAccessExpression(
           target,
           'addEventListener',
         );
         addParseSpanInfo(propertyAccess, output.keySpan);
+        const handler = tcbCreateEventHandler(
+          output,
+          this.tcb,
+          this.scope,
+          EventParamType.Infer,
+          domEventAssertion,
+        );
         const call = ts.factory.createCallExpression(
           /* expression */ propertyAccess,
           /* typeArguments */ undefined,
@@ -3476,10 +3518,15 @@ function tcbCreateEventHandler(
   tcb: Context,
   scope: Scope,
   eventType: EventParamType | ts.TypeNode,
+  assertionExpression?: ts.Expression,
 ): ts.Expression {
   const handler = tcbEventHandlerExpression(event.handler, tcb, scope);
   const statements: ts.Statement[] = [];
 
+  if (assertionExpression !== undefined) {
+    statements.push(ts.factory.createExpressionStatement(assertionExpression));
+  }
+
   // TODO(crisbeto): remove the `checkTwoWayBoundEvents` check in v20.
   if (event.type === ParsedEventType.TwoWay && tcb.env.config.checkTwoWayBoundEvents) {
     // If we're dealing with a two-way event, we create a variable initialized to the unwrapped

packages/compiler-cli/src/ngtsc/typecheck/test/type_check_block_spec.ts

@@ -41,6 +41,12 @@ describe('type check blocks', () => {
     expect(tcb(TEMPLATE)).toContain('(-1)');
   });
 
+  it('should assert the type for DOM events bound on void elements', () => {
+    const result = tcb(`<input (input)="handleInput($event.target.value)">`);
+    expect(result).toContain('i1.ɵassertType<typeof _t1>($event.target);');
+    expect(result).toContain('(this).handleInput((((($event).target)).value));');
+  });
+
   it('should handle keyed property access', () => {
     const TEMPLATE = `{{a[b]}}`;
     expect(tcb(TEMPLATE)).toContain('(((this).a))[((this).b)]');
@@ -371,7 +377,7 @@ describe('type check blocks', () => {
     const block = tcb(TEMPLATE);
     expect(block).not.toContain('"div"');
     expect(block).toContain(
-      'var _t2 = document.createElement("button"); ' + 'var _t1 = _t2; ' + '_t2.addEventListener',
+      'var _t1 = document.createElement("button"); ' + 'var _t2 = _t1; ' + '_t1.addEventListener',
     );
   });
 

packages/compiler-cli/test/ngtsc/template_typecheck_spec.ts

@@ -8492,5 +8492,51 @@ suppress
         expect(diags.length).toBe(0);
       });
     });
+
+    describe('DOM event target type inference', () => {
+      beforeEach(() => {
+        env.tsconfig({strictTemplates: true});
+      });
+
+      it('should infer the type of the event target when bound on a void element', () => {
+        env.write(
+          'test.ts',
+          `
+          import {Component} from '@angular/core';
+
+          @Component({template: '<input (input)="handleEvent($event.target)">'})
+          export class TestCmp {
+            handleEvent(value: string) {}
+          }
+        `,
+        );
+
+        const diags = env.driveDiagnostics();
+        expect(diags.length).toBe(1);
+        expect(diags[0].messageText).toBe(
+          `Argument of type 'HTMLInputElement' is not assignable to parameter of type 'string'.`,
+        );
+      });
+
+      it('should not infer the type of the event target when bound on a non-void element', () => {
+        env.write(
+          'test.ts',
+          `
+          import {Component} from '@angular/core';
+
+          @Component({template: '<div (click)="handleEvent($event.target)"></div>'})
+          export class TestCmp {
+            handleEvent(value: string) {}
+          }
+        `,
+        );
+
+        const diags = env.driveDiagnostics();
+        expect(diags.length).toBe(1);
+        expect((diags[0].messageText as ts.DiagnosticMessageChain).messageText).toBe(
+          `Argument of type 'EventTarget | null' is not assignable to parameter of type 'string'.`,
+        );
+      });
+    });
   });
 });