在 Angular 11 中扩展 Angular DatePipe 错误，在 Angular 10 中工作

Question

最初，我对 DatePipe 进行了简单扩展，以从我们的标准（YYYYMMDD 格式）转换日期值，以便 Angular 中的 DatePipe 可以使用它。

export class SlsDatePipe extends DatePipe implements PipeTransform {
    constructor(Locale:string) {
        super(Locale);
    }

    /**
     * Convert the data from the numeric YYYYMMDD to the Javascript date format
     * @param DateValue SLS Formatted number in the YYYYMMDD style
     * @param args Angular Date Pipe args to control the output format
     * @returns Text output following the Javascript date() formats
     */
    public transform(DateValue:number, args:string):string | null {
    
        const DateString:string = DateValue.toString();
        const Year:number  = parseInt(DateString.substr(0, 4), 10);
        const Month:number = parseInt(DateString.substr(4, 2), 10) - 1;
        const Day:number   = parseInt(DateString.substr(6, 2), 10);
        const DateObject:Date = new Date(Year, Month, Day);

        return super.transform(DateObject, args);
}

在 class 中进行了一些额外的检查以确保格式正确等，但基本的问题都在那里。这在 Angular 10 中有效。我刚刚更新到 Angular 11，代码现在在转换时产生错误：

error TS2416: Property 'transform' in type 'SlsTimePipe' is not assignable to the same property in base type 'DatePipe'.
    Type '(TimeValue: number, args: string) => string' is not assignable to type '{ (value: string | number | Date, format?: string, timezone?: string, locale?: string): string; (value: null,
    format?: string, timezone?: string, locale?: string): null; (value: string | number | Date, for mat?: string, timezone?: string, locale?: string): string; }'.
    Type 'string' is not assignable to type 'null'.

Answer 1

Angular 11 在使用方法重载的地方带来 stricter types for DatePipe。

您可以通过为 transform 方法添加重载来降低 TypeScript 编译器的负担，例如：

transform(DateValue: null | undefined, args?: string): null;
transform(DateValue: number, args: string): string | null {
  ...
}

Answer 2

Yurzui 的回答对我不起作用。经过一段时间的斗争，我决定告诉 TypeScript 放弃任何：

transform(value: string | number | Date, timezone: string = null): any {
    return super.transform(value, DATE_FORMATTING_STRING, timezone);
}

Answer 3

重载应该

transform(value: null | undefined, format?: string): null;
transform(
    value: Date | string | number | null | undefined,
    format?: string,
): string | null; 
transform(
    value: Date | string | number | null | undefined,
    args?: string,
): string | null {
    //
}

在 Angular 11 中扩展 Angular DatePipe 错误，在 Angular 10 中工作

Extending Angular DatePipe errors in Angular 11, worked in Angular 10

pipe

angular

angular11