По какой причине выдает ошибка в TypeScript?

Question

[laravel_creative_3103]

Имеется интерфейс, в котором указаны следующие:

export interface Post {
  title: string;
  text: string;
}

Также имеется переменная, которая реализует данный интерфейс:

AllPosts: Post[] = [
    { title: 'Компьютер', text: 'Это самый лучший компьютер' },
    { title: 'Ноутбук', text: 'Ноутбук это то, через чего удобно работать' },
    { title: 'Телефон', text: 'Сейчас все сидят в инстаграмме и телеграамме' },
  ];

Пытаюсь реализовать метод transform, и компилятор выкидывает ошибку:

export class SearchingPipe implements PipeTransform {
  transform(posts: Post[], search: string, searhcField: string = 'title') {
    if (!search.trim()) {
      return posts;
    }

    return posts.filter((post) => {
     
      return post[searhcField] //вот здесь такое сообщение:
//Элемент неявно имеет тип "any", так как выражение типа "string" не может использоваться для индексации типа "Post".
//В типе "Post" не обнаружена сигнатура индекса с параметром типа "string".ts(7053)
        .toLocaleLowerCase()
        .includes(search.toLocaleLowerCase());
    });
  }
}

Нужно ли мне в интерфейсе или же в самом методе что-то дополнить, чтоб устранить ошибку?

Answer 1

[Алексей Ярков]

А так?
searhcField: keyof Post

Comments

[laravel_creative_3103]

да сработало. Спасибо!

[laravel_creative_3103]

но, уже в самом html такая ошибка,

<div
    *ngFor="let post of AllPosts | search : search : searhcField <!-- вот здесь -->; let i = index"

<!--  Argument of type 'string' is not assignable to parameter of type 'keyof Post | undefined'.ngtsc(2345) -->
    class="card"
  >
    <p>{{ i + 1 }}. {{ post.title }}</p>
    <p>{{ post.text }}</p>
  </div>

Answer 2

[Антон Иванов]

export interface Post {
  [key: string]: string;
  title: string;
  text: string;
}

Answer 3

[Дмитрий Беляев]

function isPostField(field: string): field is keyof Post {
  return field === 'title' || field === 'text';
}

export class SearchingPipe implements PipeTransform {
  transform(posts: Post[], search: string, searhcField: string = 'title') {
    if (!isPostField(searhcField) || !search.trim()) {
      return posts;
    }

    return posts.filter((post) => {
     
      return post[searhcField]
        .toLocaleLowerCase()
        .includes(search.toLocaleLowerCase());
    });
  }
}