build: fix type checking issues in test code (angular#60481)

Fixes some type checking issues in our own testing code that weren't showing up, because `strictTemplates` was turned off.

PR Close angular#60481

Author: crisbeto

modules/benchmarks/src/class_bindings/class_bindings.component.ts

@@ -33,5 +33,5 @@ import {Component, Input} from '@angular/core';
 })
 export class ClassBindingsComponent {
   @Input() msg: string = '';
-  @Input() list: string[] | null = null;
+  @Input() list: {i: number; text: string}[] | null = null;
 }

modules/benchmarks/src/ng_template_outlet_context/ng2/BUILD.bazel

@@ -1,12 +1,11 @@
-load("//tools:defaults.bzl", "app_bundle", "http_server", "ng_module")
 load("@npm//@angular/build-tooling/bazel/benchmark/component_benchmark:benchmark_test.bzl", "benchmark_test")
+load("//tools:defaults.bzl", "app_bundle", "http_server", "ng_module")
 
 package(default_visibility = ["//modules/benchmarks:__subpackages__"])
 
 ng_module(
     name = "ng2",
     srcs = glob(["*.ts"]),
-    strict_templates = True,
     tsconfig = "//modules/benchmarks:tsconfig-build.json",
     deps = [
         "//modules/benchmarks/src:util_lib",

modules/playground/src/gestures/index.ts

@@ -20,16 +20,16 @@ class GesturesCmp {
   pinchScale: number = 1;
   rotateAngle: number = 0;
 
-  onSwipe(event: HammerInput): void {
-    this.swipeDirection = event.deltaX > 0 ? 'right' : 'left';
+  onSwipe(event: Event): void {
+    this.swipeDirection = (event as unknown as HammerInput).deltaX > 0 ? 'right' : 'left';
   }
 
-  onPinch(event: HammerInput): void {
-    this.pinchScale = event.scale;
+  onPinch(event: Event): void {
+    this.pinchScale = (event as unknown as HammerInput).scale;
   }
 
-  onRotate(event: HammerInput): void {
-    this.rotateAngle = event.rotation;
+  onRotate(event: Event): void {
+    this.rotateAngle = (event as unknown as HammerInput).rotation;
   }
 }
 

modules/playground/src/jsonp/app/jsonp_comp.ts

@@ -9,6 +9,10 @@
 import {HttpClient} from '@angular/common/http';
 import {Component} from '@angular/core';
 
+interface Person {
+  name: string;
+}
+
 @Component({
   selector: 'jsonp-app',
   template: `
@@ -20,8 +24,8 @@ import {Component} from '@angular/core';
   standalone: false,
 })
 export class JsonpCmp {
-  people: Object;
+  people: Person[];
   constructor(http: HttpClient) {
-    http.jsonp<Object>('./people.json', 'callback').subscribe((res: Object) => (this.people = res));
+    http.jsonp('./people.json', 'callback').subscribe((res: Person[]) => (this.people = res));
   }
 }

modules/playground/src/key_events/index.ts

@@ -35,7 +35,7 @@ export class KeyEventsApp {
     event.preventDefault();
   }
 
-  onShiftEnter(event: KeyboardEvent): void {
+  onShiftEnter(event: Event): void {
     this.shiftEnter = true;
     event.preventDefault();
   }

packages/core/test/acceptance/authoring/signal_inputs_spec.ts

@@ -179,7 +179,7 @@ describe('signal inputs', () => {
       template: 'input:{{input()}}',
     })
     class InputComp {
-      input = input.required<string>();
+      input = input.required<number>();
 
       constructor() {
         this.input();

packages/core/test/bundling/animation_world/index.ts

@@ -25,21 +25,21 @@ import {BrowserModule, platformBrowser} from '@angular/platform-browser';
   standalone: false,
 })
 class MakeColorGreyDirective {
-  @HostBinding('style.background-color') private _backgroundColor: string | null = null;
-  @HostBinding('style.color') private _textColor: string | null = null;
+  @HostBinding('style.background-color') protected backgroundColor: string | null = null;
+  @HostBinding('style.color') protected textColor: string | null = null;
 
   on() {
-    this._backgroundColor = 'grey';
-    this._textColor = 'black';
+    this.backgroundColor = 'grey';
+    this.textColor = 'black';
   }
 
   off() {
-    this._backgroundColor = null;
-    this._textColor = null;
+    this.backgroundColor = null;
+    this.textColor = null;
   }
 
   toggle() {
-    this._backgroundColor ? this.off() : this.on();
+    this.backgroundColor ? this.off() : this.on();
   }
 }
 
@@ -57,7 +57,7 @@ class BoxWithOverriddenStylesComponent {
     this.onInActive();
   }
 
-  @HostListener('click', ['$event'])
+  @HostListener('click')
   toggle() {
     if (this.active) {
       this.onInActive();

packages/core/test/bundling/todo/index.ts

@@ -95,7 +95,7 @@ class TodoStore {
       <h1>todos</h1>
       <input class="new-todo" placeholder="What needs to be done?" autofocus=""
              [value]="newTodoText"
-             (keyup)="$event.code == 'Enter' ? addTodo() : newTodoText = $event.target.value">
+             (keyup)="$event.code == 'Enter' ? addTodo() : newTodoText = $any($event.target).value">
     </header>
     <section *ngIf="todoStore.todos.length > 0" class="main">
       <input *ngIf="todoStore.todos.length"
@@ -117,7 +117,7 @@ class TodoStore {
                  class="edit" #editedtodo
                  [value]="todo.title"
                  (blur)="stopEditing(todo, editedtodo.value)"
-                 (keyup)="todo.title = $event.target.value"
+                 (keyup)="todo.title = $any($event.target).value"
                  (keyup)="$event.code == 'Enter' && updateEditingTodo(todo, editedtodo.value)"
                  (keyup)="$event.code == 'Escape' && cancelEditingTodo(todo)">
         </li>

packages/core/test/bundling/todo_i18n/index.ts

@@ -88,7 +88,7 @@ class TodoStore {
       <h1>todos</h1>
       <input class="new-todo" i18n-placeholder placeholder="What needs to be done?" autofocus=""
              [value]="newTodoText"
-             (keyup)="$event.code == 'Enter' ? addTodo() : updateNewTodoValue($event.target.value)">
+             (keyup)="$event.code == 'Enter' ? addTodo() : updateNewTodoValue($event)">
     </header>
     <section *ngIf="todoStore.todos.length > 0" class="main">
       <input *ngIf="todoStore.todos.length"
@@ -110,7 +110,7 @@ class TodoStore {
                  class="edit" #editedtodo
                  [value]="todo.title"
                  (blur)="updateEditedTodoValue(todo, editedtodo.value)"
-                 (keyup)="updateEditedTodoValue(todo, $event.target.value)"
+                 (keyup)="updateEditedTodoValue(todo, $any($event.target).value)"
                  (keyup)="$event.code == 'Enter' && updateEditedTodoValue(todo, editedtodo.value)"
                  (keyup)="$event.code == 'Escape' && cancelEditingTodo(todo)">
         </li>
@@ -192,8 +192,8 @@ class ToDoAppComponent {
     this.cdr.detectChanges();
   }
 
-  updateNewTodoValue(value: string) {
-    this.newTodoText = value;
+  updateNewTodoValue(event: Event) {
+    this.newTodoText = (event.target as HTMLInputElement).value;
     this.cdr.detectChanges();
   }
 }