feat(core): Allow typeguards on QueryList.filter (#48042)

JeanMeche · dylhunn · commit b2327f4df12c · 2023-04-03T19:35:35.000-07:00
To match the behaviour of Array.filter, typeguards can now be used on QueryList.filter to narrow the return type. Fixes #38446 BREAKING CHANGE: QueryList.filter now supports type guard functions, which will result in type narrowing. Previously if you used type guard functions, it resulted in no changes to the return type. Now the type would be narrowed, which might require updates to the application code that relied on the old behavior. PR Close #48042
diff --git a/goldens/public-api/core/index.md b/goldens/public-api/core/index.md
@@ -1199,7 +1199,9 @@ export class QueryList<T> implements Iterable<T> {
     destroy(): void;
     // (undocumented)
     readonly dirty = true;
-    filter(fn: (item: T, index: number, array: T[]) => boolean): T[];
+    filter<S extends T>(predicate: (value: T, index: number, array: readonly T[]) => value is S): S[];
+    // (undocumented)
+    filter(predicate: (value: T, index: number, array: readonly T[]) => unknown): T[];
     find(fn: (item: T, index: number, array: T[]) => boolean): T | undefined;
     // (undocumented)
     readonly first: T;
diff --git a/packages/core/src/linker/query_list.ts b/packages/core/src/linker/query_list.ts
@@ -92,6 +92,8 @@ export class QueryList<T> implements Iterable<T> {
    * See
    * [Array.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
    */
+  filter<S extends T>(predicate: (value: T, index: number, array: readonly T[]) => value is S): S[];
+  filter(predicate: (value: T, index: number, array: readonly T[]) => unknown): T[];
   filter(fn: (item: T, index: number, array: T[]) => boolean): T[] {
     return this._results.filter(fn);
   }
diff --git a/packages/core/test/linker/query_list_spec.ts b/packages/core/test/linker/query_list_spec.ts
@@ -139,6 +139,13 @@ import {fakeAsync, tick} from '@angular/core/testing';
       expect(queryList.some(item => item === 'four')).toEqual(false);
     });
 
+    it('should support guards on filter', () => {
+      const qList = new QueryList<'foo'|'bar'>();
+      qList.reset(['foo']);
+      const foos: Array<'foo'> = queryList.filter((item): item is 'foo' => item === 'foo');
+      expect(qList.length).toEqual(1);
+    });
+
     it('should be iterable', () => {
       const data = ['one', 'two', 'three'];
       queryList.reset([...data]);

Original file line number	Diff line number	Diff line change
`@@ -92,6 +92,8 @@ export class QueryList<T> implements Iterable<T> {`
`92`	`92`	`* See`
`93`	`93`	`* [Array.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)`
`94`	`94`	`*/`
	`95`	`+ filter<S extends T>(predicate: (value: T, index: number, array: readonly T[]) => value is S): S[];`
	`96`	`+ filter(predicate: (value: T, index: number, array: readonly T[]) => unknown): T[];`
`95`	`97`	`filter(fn: (item: T, index: number, array: T[]) => boolean): T[] {`
`96`	`98`	`return this._results.filter(fn);`
`97`	`99`	`}`