feat(common): Support of optional keys for the KeyValue pipe (angular#48814)

This commit is extending the capabilities of the KeyValue pipe by allowing interfaces with optional keys.

fixes angular#46867

PR Close angular#48814

Author: JeanMeche

goldens/public-api/common/index.api.md

@@ -390,6 +390,8 @@ export class KeyValuePipe implements PipeTransform {
     // (undocumented)
     transform<K extends string, V>(input: Record<K, V> | ReadonlyMap<K, V> | null | undefined, compareFn?: ((a: KeyValue<K, V>, b: KeyValue<K, V>) => number) | null): Array<KeyValue<K, V>> | null;
     // (undocumented)
+    transform<T>(input: T, compareFn?: T extends object ? (a: T[keyof T], b: T[keyof T]) => number : never): T extends object ? Array<KeyValue<keyof T, T[keyof T]>> : null;
+    // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<KeyValuePipe, never>;
     // (undocumented)
     static ɵpipe: i0.ɵɵPipeDeclaration<KeyValuePipe, "keyvalue", true>;

packages/common/src/pipes/keyvalue_pipe.ts

@@ -92,10 +92,17 @@ export class KeyValuePipe implements PipeTransform {
     input: Record<K, V> | null | undefined,
     compareFn?: ((a: KeyValue<string, V>, b: KeyValue<string, V>) => number) | null,
   ): Array<KeyValue<string, V>> | null;
+
   transform<K extends string, V>(
     input: Record<K, V> | ReadonlyMap<K, V> | null | undefined,
     compareFn?: ((a: KeyValue<K, V>, b: KeyValue<K, V>) => number) | null,
   ): Array<KeyValue<K, V>> | null;
+
+  transform<T>(
+    input: T,
+    compareFn?: T extends object ? (a: T[keyof T], b: T[keyof T]) => number : never,
+  ): T extends object ? Array<KeyValue<keyof T, T[keyof T]>> : null;
+
   transform<K, V>(
     input: undefined | null | {[key: string]: V; [key: number]: V} | ReadonlyMap<K, V>,
     compareFn: ((a: KeyValue<K, V>, b: KeyValue<K, V>) => number) | null = defaultComparator,

packages/common/test/pipes/keyvalue_pipe_spec.ts

@@ -99,6 +99,59 @@ describe('KeyValuePipe', () => {
       const pipe = new KeyValuePipe(defaultKeyValueDiffers);
       expect(pipe.transform(value)).toEqual(null);
     });
+
+    it('should accept an object with optional keys', () => {
+      interface MyInterface {
+        one: string;
+        two: number;
+        three: string;
+        four: string;
+      }
+      const myData: Partial<MyInterface> = {
+        one: 'One',
+        two: 2,
+        three: undefined,
+      };
+
+      const pipe = new KeyValuePipe(defaultKeyValueDiffers);
+      expect(pipe.transform(myData)?.length).toEqual(3);
+
+      const differ = (a: string | number | undefined, b: string | number | undefined): number => {
+        return 1;
+      };
+      expect(pipe.transform(myData, differ)?.length).toEqual(3);
+    });
+
+    it('should accept an nullable object with optional keys', () => {
+      interface MyInterface {
+        one?: string;
+        two?: string;
+        three?: string;
+      }
+
+      let value!: MyInterface | null;
+      const pipe = new KeyValuePipe(defaultKeyValueDiffers);
+      expect(pipe.transform(value)).toEqual(null);
+    });
+
+    it('should accept an nullable object with optional keys', () => {
+      interface MyInterface {
+        one?: string;
+        two?: string;
+        three?: string;
+      }
+
+      const value: MyInterface | null = {};
+      const pipe = new KeyValuePipe(defaultKeyValueDiffers);
+      expect(pipe.transform(value)?.length).toEqual(0);
+
+      // we use the random condition to make sure the typing includes null (else TS's inference is too smart and strips null)
+      const value2: MyInterface | null = Math.random() <= 1 ? {one: '1', three: '3'} : null;
+      const kv = pipe.transform(value2);
+      expect(kv?.length).toEqual(2);
+      expect(kv).toContain({key: 'one', value: '1'});
+      expect(kv).toContain({key: 'three', value: '3'});
+    });
   });
 
   describe('Map', () => {