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

Question

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.

Answer 1

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.

Answer 2

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:

• Demystifying Function Overloading in TypeScript
• Typescript child class function overloading

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