Why custom pipe is giving Error: Property 'transform' in type 'EllipsisPipe' is not assignable to the same property in base type 'SlicePipe'

user_11163977 0
Viewed 4435

I've created a custom pipe with the help of someone else's answer on stackoverflow. If article.title is larger than 55 characters then it should get trimmed after 55 characters and three dots should be there like a tail. For e.g:

  1. How to make a cake
  2. How to make cold c...
  3. Making curry at ho...
  4. Tasty Spanish eggs

Notice point 2 and 3 how extra characters are trimmed and replaced with 3 dots.

Here's the code:

ellipses.pipe.ts

import { Pipe } from '@angular/core';
import { SlicePipe } from '@angular/common';

@Pipe({
  name: 'ellipsis'
})
export class EllipsisPipe extends SlicePipe {
  constructor () {
    super();
  }
  transform(value: string, maxLength: number): any {
    const suffix = value && value.length > maxLength ? "..." : "";
    return super.transform(value, 0, maxLength) + suffix;
  }
}

Note: I tried ...implements PipeTransform also.

app.module.ts

@NgModule({
  declarations: [
    ...,
    EllipsisPipe // <-------------------- included in app module
  ],
  imports: [
    ...
  ],
  providers: [...],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<h5 class="card-title">{{article.title | ellipsis:55}}</h5>

Please correct my mistake. This question didn't help: Custom pipe returns an error. ::TypeScript & Angular2.

PS: Complete error is:

ERROR in src/app/pipes/ellipsis.pipe.ts(11,3): error TS2416: Property 'transform' in type 'EllipsisPipe' is not assignable to the same property in base type 'SlicePipe'. Type '(value: string, maxLength: number) => any' is not assignable to type '{ (value: readonly T[], start: number, end?: number): T[]; (value: string, start: number, end?: number): string; (value: null, start: number, end?: number): null; (value: undefined, start: number, end?: number): undefined; }'. Types of parameters 'value' and 'value' are incompatible. Type 'readonly any[]' is not assignable to type 'string'.

One strange thing is that It is working on stackblitz but giving the above error on localhost:4200.

angular-pipe angular typescript
3 Answers

You can do either one of these implementations:

  1. In the HTML, use this:

    {{item | slice:0:15}} {{ item.length > 15 ? "...": "" }}

  2. Change the pipe code to this:

    export class EllipsisPipe implements PipeTransform {
 transform(value: string, maxLength: number): any {
const suffix = value && value.length > maxLength ? "..." : "";
return new SlicePipe().transform(value, 0, maxLength) + suffix;
}}

In your code, the transform function was clashing with the existing functions in the parent class aka SlicingPipe. Simply, implementing the PipeTransform interface and calling the appropriate function in SlicePipe can do the job.

PipeTransform is also actually optional. (https://angular.io/guide/pipes)

The PipeTransform interface The transform method is essential to a pipe. The PipeTransform interface defines that method and guides both tooling and the compiler. Technically, it's optional; Angular looks for and executes the transform method regardless.

Please see the other answers which have links to nice articles.

user_33898280

You can also (in addition to already proposed solutions) try to use type script function overloading for the base class, actually you can try to add a list of method signatures that satisfy both current class and base class

transform(value: string, start: number, end?: number): string;
transform(value: null, start: number, end?: number): null;
transform(value: string, maxLength: number): any {
  const suffix = value && value.length > maxLength ? '...' : '';
  return super.transform(value, 0, maxLength) + suffix;
}

Some resources:

Stackblitz: https://stackblitz.com/edit/angular-kj9rtgcustompipe-mfv6es

user_32440640

The Error is due to overriding of method transform from SlicePipe in your EllipsisPipe.

Transform in Slice pipe has method signatures as

  • <T>(value: readonly T[], start: number, end?: number): T[];

  • (value: string, start: number, end?: number): string;

  • (value: null,start: number, end?: number): null;
  • (value: undefined, start: number, end?: number): undefined;

But your signature is 

transform(value: string, maxLength: number): any

Try implementing transform method of PipeTransform

import { Pipe, PipeTransform } from '@angular/core';
import { SlicePipe } from '@angular/common';

@Pipe({
  name: 'ellipsis'
})
export class EllipsisPipe extends SlicePipe implements PipeTransform {
 transform(value, maxLength): any {
    const suffix = value && value.length > maxLength ? "..." : "";
    return super.transform(value, 0, maxLength) + suffix;
  }
}

Stackblitz: https://stackblitz.com/edit/angular-kj9rtgcustompipe

user_80292110
Related