Блог

Главная - Вопросы по программированию - Ошибка в IDE (VSCode) при вызове подписки на RxJS с типизированным параметром

Ошибка в IDE (VSCode) при вызове подписки на RxJS с типизированным параметром

#angular #rxjs #subscribe

#угловатый #rxjs #Подписка

Вопрос:

Я пробую некоторые функции RxJS в Angular и скопировал некоторый код из учебника (ссылка). Мой проект настроен в «строгом» режиме. Приложение просто регистрирует координаты щелчка в консоли (я сделал Stackblitz: link)

Как локально, так и в Stackblitz приложение работает, НО локально моя среда разработки отображает ошибку. В строке 25 AppComponent, внутри subscribe , onClick подчеркнуто, и я получаю « No overload matches this call «. Проблема, по-видимому, связана с определением типа MouseEvent в строке 12. Если я изменю его на any , ошибка исчезнет.

Мои предположения:

  1. код работает, потому что при переносе TS в JS типизация теряется (так эффективно, как если бы у меня было any в моем последнем вызове)
  2. Stackblitz не показывает ошибку, потому что его проверки ограничений не так эффективны, как проверки из VSCode

Мои вопросы:

  • верны ли мои предположения?
  • как я должен написать свой код, чтобы НЕ получить ошибку IDE? Должен ли я использовать какое-то приведение к «любому»? Разве это не соответствовало бы цели использования «строгого» режима?

Ответ №1:

Вы можете сделать это следующим образом:

 const eventListener = <K extends keyof DocumentEventMap>(type: K) => 
  bindCallback<K, DocumentEventMap[K]>(document.addEventListener)(type);

Stackblitz: https://stackblitz.com/edit/angular-ivy-pzxguu?file=src/app/app.component.ts

Вместо этого вы также можете использовать fromEvent from rxjs:

 import { fromEvent } from 'rxjs';

...

fromEvent(document, 'click').subscribe(...);

Комментарии:

1. ммм, но вся цель этого примера — использовать «bindCallback». Чтобы использовать «FromEvent», мне нужно было бы избавиться от «bindCallback», насколько я вижу (?)

2. спасибо, Майк, я попробую это позже. И вы бы сказали, что мои предположения (особенно те, которые касаются переноса) верны?

3. Еще раз привет. Я попробовал ваш фрагмент, но я не могу привести его к чему-либо «рабочему». Теперь я получаю сообщение об ошибке непосредственно при «подписке». Я не уверен, что понимаю, что он делает. Возможно, пример кода, который я взял из Medium, был не самым лучшим, теперь я понимаю, что статье 2 года, и, похоже, все немного изменилось. Я думаю, я посмотрю на какой-нибудь новый материал для изучения RxJS. Не могли бы вы просто сказать мне, были ли мои предположения правильными? тогда я мог бы принять ваш ответ (в идеале рабочий stackblitz или объяснение того, что вы сделали, также было бы здорово, если это не требует слишком многого)

4. Прошу прощения, я допустил опечатку, сейчас я обновляю и тоже добавлю stackblitz

5. Ваши предположения по существу верны. Единственное, что проверка ошибок выполняется с помощью typescript, а не VSCode / stackblitz, так что на самом деле stackblitz имеет менее строгую конфигурацию tsconfig.json