타이프 : 인터페이스

Question

구현할 때 방법은 내가 Angular2 파이프 물건을 필터링 할 때 사용할 인터페이스

export interface IFilterable{ 
passesFilter(f : string, isFilter: boolean): boolean; 
} 

가 정의되지 않는다. 그것은 다음과 같이 구현 것 :

import {IFilterable} from './i-filterable'; 
import {Contains} from '../helpers/pipe-helpers'; 

export class Server extends Dto implements IFilterable { 
name: string; 
hostname: string; 
ips: string; 
operatingSystem: string; 
sitesCount: number; 
databasesCount: number; 

passesFilter(f: string, isFilter: boolean): boolean { 
    console.log('in server'); 
    if (!f || f === '') return isFilter; 
    f = f.toLowerCase(); 

    return Contains(this.name, f) || 
     Contains(this.hostname, f) || 
     Contains(this.ips, f) || 
     Contains(this.operatingSystem, f); 
} 
} 

가져 오는 기능을 포함하고 있습니다.

파이프는 정의되지 않은 파이프 인쇄이

import { Pipe, PipeTransform } from '@angular/core'; 
import {Contains} from '../helpers/pipe-helpers'; 
import {IFilterable} from '../models/i-filterable'; 

@Pipe({ name: 'serverFilter' }) 
export class ServerFilterPipe implements PipeTransform { 
    transform(values: IFilterable[], search: string, isFilter: boolean):  IFilterable[] { 
    console.log(search + ' search' + isFilter + values); 
    return values.filter(value => { 
    console.log(value.passesFilter); 
    return value.passesFilter(search, isFilter) 
    }); 
} 
} 

두 번째 CONSOLE.LOG처럼 보이는, 그리고 passesFilter에있는 사람은 결코도 호출되지됩니다. 나 또한 오류가 발생합니다

TypeError: setting a property that has only a getter 

내가 뭔가 잘못하고있는 중이거나 TS 에서처럼 사용하기가 정말 안좋은 인터페이스입니까?

편집 : 추상 클래스로 동일한 것을 구현합니다.

export abstract class Dto { 
abstract passesFilter(f: string, isFilter: boolean): boolean; 
} 

서버

import {Dto} from './dto'; 
import {Contains} from '../helpers/pipe-helpers'; 

export class Server extends Dto { 
name: string; 
hostname: string; 
ips: string; 
operatingSystem: string; 
sitesCount: number; 
databasesCount: number; 

passesFilter(f: string, isFilter: boolean): boolean { 
    console.log('in server'); 
    if (!f || f === '') return isFilter; 
    f = f.toLowerCase(); 

    return Contains(this.name, f) || 
     Contains(this.hostname, f) || 
     Contains(this.ips, f) || 
     Contains(this.operatingSystem, f); 
} 
} 

파이프

import { Pipe, PipeTransform } from '@angular/core'; 
import {Dto} from '../models/dto'; 

@Pipe({ name: 'serverFilter' }) 
export class ServerFilterPipe implements PipeTransform { 
transform(values: Dto[], search: string, isFilter: boolean): Dto[] { 
console.log(search + ' search' + isFilter + values); 
return values.filter(value => { 
    console.log(value.passesFilter); 
    return value.passesFilter(search, isFilter) 
}); 
} 
} 

파이프 - 헬퍼

export function Contains(val: string, cmp: string) { 
    return val ? val.toLowerCase().indexOf(cmp) >= 0 : false; 
} 

Answer 1

우리는 당신의 파이프의 입력을 볼 수 없습니다 .. values '은 때로 믿을 수 어쩌면 t 유형 IFilterable에서?! 어쨌든 난 .. 라운드 첫 번째 파이프 동안 어쩌면 그 정의되지 않은 .. 그것을 사용하기 전에

@Pipe({ name: 'serverFilter' }) 
export class ServerFilterPipe implements PipeTransform { 
    transform(values: IFilterable[], search: string, isFilter: boolean): IFilterable[] { 
     console.log(search + ' search' + isFilter + values); 
     if (!values || !values.length) return []; // check that input ! 

     return values.filter(value => { 
     if (!value || !value.passesFilter) return false; // check that value ! 

     console.log(value.passesFilter); 
     return value.passesFilter(search, isFilter) 
     }); 
    } 
} 

그리고 당신에 대한 힌트를 값을 확인합니다 :

if (!f || f === '') return isFilter;

이 검사는 중복 ... !''입니다 참된.

UPDATE

확인이 plunker : https://plnkr.co/edit/IhM4rKqD3VvEZVBdimzK?p=preview