Машинопись: метод не определен при реализации интерфейса

Question

У меня есть интерфейс

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

То, что я хочу использовать для фильтрации вещи в Angular2 трубе. Это реализовано так:

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 никогда даже не вызывается. Я также принимаю en error

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