Problem with extended DecimalPipe after upgrading to Angular 11-CodePudding

Upgrading from Angular 10 to 11 and running into a problem with an extension we have on the DecimalPipe.

The pipe code:

 export class CustomNumberFormatPipe extends DecimalPipe implements PipeTransform {

 transform(value: string): string | null {
    if (!value) {
        return null;
    }
    value = value.toString().replace(/,/g, '');
    return super.transform(value);
}

and the error:

 Property 'transform' in type 'CustomNumberFormatPipe' is not assignable to the same property in base type 'DecimalPipe'.
 Type '(value: string) => string' is not assignable to type '{ (value: string | number, 
 digitsInfo?: string, locale?: string): string; (value: null, digitsInfo?: string, locale?: 
 string): null; (value: string | number, digitsInfo?: string, locale?: string): 
 string; }'.
 Type 'string' is not assignable to type 'null'.

and the DecimalType definition:

 export declare class DecimalPipe implements PipeTransform {
   private _locale;
   constructor(_locale: string);
   transform(value: number | string, digitsInfo?: string, locale?: string): string | null;
   transform(value: null | undefined, digitsInfo?: string, locale?: string): null;
   transform(value: number | string | null | undefined, digitsInfo?: string, locale?: string): string | null;
   static ɵfac: ɵngcc0.ɵɵFactoryDef<DecimalPipe, never>;
   static ɵpipe: ɵngcc0.ɵɵPipeDefWithMeta<DecimalPipe, "number">;

}

The only solution I've found so far is to modify the actual DecimalPipe in common but I don't really feel confident doing that. Thanks in advance.

CodePudding user response：

just go to the DecimalPipe declaration and copy its transform signature to your pipe:

transform(value: number | string, digitsInfo?: string, locale?: string): string | null;
transform(value: null | undefined, digitsInfo?: string, locale?: string): null;
transform(value: number | string | null | undefined, digitsInfo?: string, locale?: string): string | null {
    if (!value) {
        return null;
    }
    value = value.toString().replace(/,/g, '');
    return super.transform(value);
}