Невозможно сопоставить в TypeScript

В настоящее время я следую учебнику и застрял перед этой ошибкой:

TS2345: аргумент типа «OperatorFunction<WorkerData, WorkerData>» невозможно назначить параметру типа «OperatorFunction<Object, WorkerData>». Тип «Объект» можно назначить очень немногим другим типам. Вы хотели вместо этого использовать тип «любой»? В типе «Объект» отсутствуют следующие свойства типа «WorkerData»: элементы, мета, ссылки.

WorkerData — это простой интерфейс, расположенный в том же файле:

export interface WorkerData {
  items: Worker[],
  meta: {
    totalItems: number;
    itemCount: number;
    itemsPerPage: number;
    totalPages: number;
    currentPage: number;
  }, 
  links: {
    first: string;
    previous: string;
    next: string;
    last: string;
  }
};

функция, которая возвращает эту ошибку, такова:

findAll(page: number, size: number): Observable<WorkerData> {
    let params = new HttpParams();
    params = params.append('page', String(page));
    params = params.append('limit', String(size));
    return this.http.get('/api/worker', {params}).pipe(
      map((userData: WorkerData) => userData),
      catchError(err => throwError(err)),
    )
  }

Эта функция. предполагается возвращать JSON с массивом Worker и некоторыми метаданными. Если я изменю карту((userData: WorkerData) => userData) на карту((userData: Any) => userData), если я сделаю все параметры в интерфейсе не механическими, это сработает, но вернет что-то вроде этого:

_Observable {
  source: _Observable {
    source: _Observable {
      source: [_Observable],
      operator: [Function (anonymous)]
    },
    operator: [Function (anonymous)]
  },
  operator: [Function (anonymous)]
}

Если кому-то интересно, серия уроков называется «Blog Project V-09». Возможно, это поможет. Если вам нужна дополнительная информация, я буду рад ее предоставить. Также при необходимости я могу опубликовать это в git. заранее спасибо

Не ответ, но зачем там вообще использовать map? Вы просто сопоставляете данные сами с собой. Вместо этого попробуйте this.http.get<WorkerData>('/api/worker', {params}).pipe(

Carcigenicate 25.05.2024 20:54

Вы не показываете тип Worker в массиве items, но если это не встроенный тип для Web Workers, не давайте своим типам те же имена, что и встроенные типы. Кроме того, данные, получаемые по сети во время выполнения, не могут иметь форму, известную во время компиляции. Вы предполагаете, что конечная точка возвращает JSON с этой формой.

Jared Smith 25.05.2024 21:30
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
57
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Метод http.get по умолчанию не знает, какой тип возвращается, поэтому попробуйте следующий код, он основан на официальной документации Angular.

return this.http.get<WorkerData>('/api/worker', { params }).pipe(
  map((userData: WorkerData) => userData),
  catchError(err => throwError(err)),
);

Документация Angular

Это сомнительный совет. Из самой документации, на которую вы ссылаетесь: «Указание типа ответа — это объявление TypeScript о том, что он должен обрабатывать ваш ответ как заданный тип. Это проверка во время сборки, которая не гарантирует, что сервер действительно отвечает объектом. этого типа Сервер должен гарантировать, что возвращается тип, указанный API сервера». Нет никакой гарантии, что ответ имеет такую ​​форму, и ОП должен проверить, а не просто предполагать.

Jared Smith 25.05.2024 21:32

Я согласен с Джаредом: если у вас надежный дизайн, это не должно быть проблемой, и в этом суть TypeScript.

Marco 25.05.2024 22:11

Другие вопросы по теме