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

Question

我在其他人对 Whosebug 的回答的帮助下创建了一个自定义管道。如果 article.title 大于 55 个字符，那么它应该在 55 个字符后被修剪，三个点应该像尾巴一样。例如：

如何做蛋糕
如何制作冷盘...
在家做咖喱...
美味的西班牙鸡蛋

注意点 2 和 3 如何修剪多余的字符并用 3 个点替换。

代码如下：

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;
  }
}

注：我也试过...implements PipeTransform。

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>

请纠正我的错误。这个问题没有帮助： .

PS：完整的错误是：

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'.

一件奇怪的事情是，它正在 stackblitz 上工作，但在 localhost:4200 上出现上述错误。

Answer 1

您可以执行以下任一实施：

在HTML中，使用这个：

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

将管道代码更改为：

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;
}}

在您的代码中，transform 函数与父 class 即 SlicingPipe 中的现有函数发生冲突。简单地说，实现 PipeTransform 接口并在 SlicePipe 中调用适当的函数就可以完成这项工作。

PipeTransform 实际上也是可选的。 (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.

请查看其他答案，其中包含指向好文章的链接。

Answer 2

错误是由于覆盖了 EllipsisPipe 中 SlicePipe 的方法 transform。

Transform in Slice pipe 的方法签名为

<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;

但是你的签名是

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

尝试实现 PipeTransform

的 transform 方法

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

Answer 3

您也可以（除了已经提出的解决方案之外）尝试对基础 class 使用类型脚本函数重载，实际上您可以尝试添加满足当前 [=27] 的方法签名列表=] 和 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;
}

部分资源：

Demystifying Function Overloading in TypeScript

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

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

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

typescript

angular-pipe

angular