Invalid warning for Browser Extensions API listener

Hello,

Am in the process of converting a large JS project to TS.

I'm getting squigglies for lots of functions which used to be fine:

// @see https://developer.chrome.com/extensions/tabs#event-onUpdated
browser.tabs.onUpdated.addListener(function (tabId: number, info: Tabs.OnUpdatedChangeInfoType, tab: Tabs.Tab): void {
delayedUpdate(tabId, tabId, info, tab)
})
Argument type (tabId: number, info: Tabs.OnUpdatedChangeInfoType, tab: Tabs.Tab) => void is not assignable to parameter type ((this:MediaQueryList, ev: MediaQueryListEvent) => any) | null 

I think WebStorm is getting muddled, but I'm not sure whether to disable the check in case it disables other checks that are needed.

Strangely, it only happens on some listeners (I have about 6 in the file); see the one below is fine:

browser is part of the Browser Extensions API, and is wrapped by this library:

Can someone advise?

Thanks.

9 comments
Comment actions Permalink

could you share a sample project the issue can be repeated with?

0
Comment actions Permalink

Sure!

Just this code should work (be sure to `npm install` the dependency):

import { browser, Tabs } from 'webextension-polyfill-ts'

browser.tabs.onUpdated.addListener(function (tabId: number, info: Tabs.OnUpdatedChangeInfoType, tab: Tabs.Tab): void {
console.log(tabId, tabId, info, tab)
})
0
Comment actions Permalink

thanks!

works fine for me when using the provided example:

what declaration is opened when you Ctrl+click on addListener()?

0
Comment actions Permalink

Line 10192 of lib.dom.d.ts:

/** Stores information on a media query applied to a document, and handles sending notifications to listeners when the media query state change (i.e. when the media query test starts or stops evaluating to true). */
interface MediaQueryList extends EventTarget {
readonly matches: boolean;
readonly media: string;
onchange: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null;
/** @deprecated */
addListener(listener: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null): void;
/** @deprecated */
removeListener(listener: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null): void;
addEventListener<K extends keyof MediaQueryListEventMap>(type: K, listener: (this: MediaQueryList, ev: MediaQueryListEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof MediaQueryListEventMap>(type: K, listener: (this: MediaQueryList, ev: MediaQueryListEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

Maybe I need to flush caches?

 

0
Comment actions Permalink

are you sure that node_modules/webextension-polyfill-ts folder is included in indexing? Yes, invalidating caches may help

0
Comment actions Permalink

OK. Refactoring an entire project to TS right now, so will finish, get my build working then restart and report back.

Thanks!

0
Comment actions Permalink

Hi Elena,

Annoyingly, the error still remains after invalidating caches.

But... re-reading your replies and I figured it out!

  • I generally have node_modules excluded from indexing, and that was the problem
  • however, it looks like I can exclude the top-level folder BUT un-exclude nested folders!
  • that has enabled everything to just work as you demonstrated

Thanks for your patience in helping me track this down.

What are your thoughts on excluding node_modules?

I find it muddies my general project-wide search results, hence excluding, but this exclude > unexclude technique seems like a great compromise.

It would be cool if there was a way to do this automatically based on package.json...

0
Comment actions Permalink

>It would be cool if there was a way to do this automatically based on package.json...

 

it's just the way this works by default: the node_modules folder is auto-excluded from indexing, but direct dependencies listed in package.json (plus node_modules/@types, even if they aren't listed there) are added to JavaScript libraries and thus indexed

0
Comment actions Permalink

Oh! Did it always work this way?

I've been using WS for a long time; maybe this is habit I picked up somewhere along the way.

Thanks for the help :)

0

Please sign in to leave a comment.