如何解决Angular型管道
这几天我遇到的许多自定义管道都是any键入的，但是由于我和我的团队想利用IntelliSense的优点，我一直在尝试键入一些管道，没有运气。
我监视了名为slice的内置Angular管道，该管道的定义如下：transform<T>(value: ReadonlyArray<T>,start: number,end?: number): Array<T>;。
基于此，我制作了一个简单的示例，用于组合两个数组：
import { Pipe,PipeTransform } from '@angular/core';
@Pipe({
name: 'concat'
})
export class ConcatPipe implements PipeTransform {
public transform<T>(
arr1: ReadonlyArray<T>,arr2: ReadonlyArray<T>,): Array<T> {
return [...arr1,...arr2];
}
}
问题
当我尝试在我的HTML模板中使用管道和访问属性时，我的IDE（VS代码）报告以下错误：Identifier 'fileStatus' is not defined. 'T' does not contain such a member。在这种特殊情况下，“ fileStatus”是我要在数组成员上尝试访问的属性。
问题
这不是键入管道的正确方法吗？这是不可能的（就像内置slice管道一样）吗？
更新
正如“ Antoniossss”在他的答案中指出的那样，实际实现仅声明类型化的变体，并且在实际实现中仍使用any。我已经更新了代码，如下所示，但仍未提供IntelliSense，并且错误仍然存在。
import { Pipe,PipeTransform } from '@angular/core';
@Pipe({
name: 'concat'
})
export class ConcatPipe implements PipeTransform {
public transform<T>(arr1: ReadonlyArray<T>,arr2: ReadonlyArray<T>): Array<T>;
public transform(
arr1: any[],arr2: any[],): any[] {
return [...arr1,...arr2];
}
}
解决方法
如果您查看SlicePipe的实际代码，您会发现类型声明的变体仅声明用于提示，但未实现
transform<T>(value: ReadonlyArray<T>,start: number,end?: number): Array<T>;
transform(value: string,end?: number): string;
transform(value: null,end?: number): null;
transform(value: undefined,end?: number): undefined;
transform(value: any,end?: number): any {
if (value == null) return value;
if (!this.supports(value)) {
throw invalidPipeArgumentError(SlicePipe,value);
}
return value.slice(start,end);
}
private supports(obj: any): boolean {
return typeof obj === 'string' || Array.isArray(obj);
}
所有神奇的事情都发生在PipeTransform界面-transform(value: any,end?: number)的无类型变体中。
您将必须执行相同的操作
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
