title: Why custom pipe is giving Error: Property 'transform' in type 'EllipsisPipe' is not assignable to the same property in base type 'SlicePipe'
body: <p>I've created a custom pipe with the help of someone else's answer on stackoverflow. If <code>article.title</code> 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:</p>
  
  <ol>
  <li>How to make a cake</li>
  <li>How to make cold c...</li>
  <li>Making curry at ho...</li>
  <li>Tasty Spanish eggs</li>
  </ol>
  
  <p>Notice point 2 and 3 how extra characters are trimmed and replaced with 3 dots.</p>
  
  <p>Here's the code:</p>
  
  <p><strong>ellipses.pipe.ts</strong></p>
  
  <pre><code>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 &amp;&amp; value.length &gt; maxLength ? "..." : "";
      return super.transform(value, 0, maxLength) + suffix;
    }
  }
  </code></pre>
  
  <p><strong>Note:</strong> I tried <code>...implements PipeTransform</code> also.</p>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>@NgModule({
    declarations: [
      ...,
      EllipsisPipe // &lt;-------------------- included in app module
    ],
    imports: [
      ...
    ],
    providers: [...],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;h5 class="card-title"&gt;{{article.title | ellipsis:55}}&lt;/h5&gt;
  </code></pre>
  
  <p>Please correct my mistake. This question didn't help:
  <a href="https://stackoverflow.com/questions/41145287/custom-pipe-returns-an-error-typescript-angular2">Custom pipe returns an error. ::TypeScript &amp; Angular2</a>.</p>
  
  <p>PS: Complete error is:</p>
  
  <blockquote>
    <p>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'.</p>
  </blockquote>
  
  <p>One strange thing is that It is working on <a href="https://stackblitz.com/edit/angular-v8yp86" rel="nofollow noreferrer">stackblitz</a> but giving the above error on localhost:4200.</p>