feat(ivy): type checking of event bindings (#33125)
Until now, the template type checker has not checked any of the event bindings that could be present on an element, for example ``` <my-cmp (changed)="handleChange($event)" (click)="handleClick($event)"></my-cmp> ``` has two event bindings: the `change` event corresponding with an `@Output()` on the `my-cmp` component and the `click` DOM event. This commit adds functionality to the template type checker in order to type check both kind of event bindings. This means that the correctness of the bindings expressions, as well as the type of the `$event` variable will now be taken into account during template type checking. Resolves FW-1598 PR Close #33125
This commit is contained in:
@ -80,3 +80,7 @@ export enum ChangeDetectionStrategy {
|
||||
|
||||
export const CUSTOM_ELEMENTS_SCHEMA: any = false;
|
||||
export const NO_ERRORS_SCHEMA: any = false;
|
||||
|
||||
export class EventEmitter<T> {
|
||||
subscribe(generatorOrNext?: any, error?: any, complete?: any): unknown { return null; }
|
||||
}
|
||||
|
@ -106,6 +106,42 @@ export declare class CommonModule {
|
||||
expect(diags[0].messageText).toEqual(`Type 'string' is not assignable to type 'number'.`);
|
||||
});
|
||||
|
||||
it('should check event bindings', () => {
|
||||
env.write('test.ts', `
|
||||
import {Component, Directive, EventEmitter, NgModule, Output} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'test',
|
||||
template: '<div dir (update)="update($event); updated = true" (focus)="update($event); focused = true"></div>',
|
||||
})
|
||||
class TestCmp {
|
||||
update(data: string) {}
|
||||
}
|
||||
|
||||
@Directive({selector: '[dir]'})
|
||||
class TestDir {
|
||||
@Output() update = new EventEmitter<number>();
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
declarations: [TestCmp, TestDir],
|
||||
})
|
||||
class Module {}
|
||||
`);
|
||||
|
||||
const diags = env.driveDiagnostics();
|
||||
expect(diags.length).toBe(3);
|
||||
expect(diags[0].messageText)
|
||||
.toEqual(`Argument of type 'number' is not assignable to parameter of type 'string'.`);
|
||||
expect(diags[1].messageText)
|
||||
.toEqual(`Property 'updated' does not exist on type 'TestCmp'. Did you mean 'update'?`);
|
||||
// Disabled because `checkTypeOfDomEvents` is disabled by default
|
||||
// expect(diags[2].messageText)
|
||||
// .toEqual(
|
||||
// `Argument of type 'FocusEvent' is not assignable to parameter of type 'string'.`);
|
||||
expect(diags[2].messageText).toEqual(`Property 'focused' does not exist on type 'TestCmp'.`);
|
||||
});
|
||||
|
||||
it('should check basic usage of NgIf', () => {
|
||||
env.write('test.ts', `
|
||||
import {CommonModule} from '@angular/common';
|
||||
|
Reference in New Issue
Block a user