Enhance type safety of the front-end code

[fraxken]

Context

The front-end code lives in ./public and is a modern ES module application built with
LitElement web components. The jsconfig.json currently has checkJs disabled:

{
  "compilerOptions": {
    "checkJs": false,
    ...
  }
}

Enabling it will surface type errors across all .js files that need to be resolved
with JSDoc annotations or small code fixes.

Goal

Any help is welcome to enhance the type safety of the current front-end code by enabling
checkJs in ./public/jsconfig.json.

There are a lot of issues across all .js files that need to be resolved and this is a
good opportunity for new contributors. We do not expect PRs with a lot of changes —
very focused, per-component or per-file contributions are strongly preferred and easier
to review.

How to get started

1. Fork the repository and enable checkJs: true in ./public/jsconfig.json
2. Run npx tsc --noEmit -p ./public/jsconfig.json to see all errors
3. Pick one unclaimed file or component from the task list below, fix its errors, and open a PR

Tip

Please do not comment on this issue to claim a task before starting work on it.

Tasks

Core

• core/events.js
• core/i18n.js
• core/network-navigation.js

Common

• common/utils.js
• common/scorecard.js
• common/scrollbar-style.js

Root

• main.js
• websocket.js

Components

Standalone

• components/bundlephobia/bundlephobia.js
• components/expandable/expandable.js
• components/file-box/file-box.js
• components/gauge/gauge.js
• components/icon/icon.js
• components/legend/legend.js
• components/locked-navigation/locked-navigation.js
• components/locker/locker.js
• components/navigation/navigation.js
• components/network-breadcrumb/network-breadcrumb.js
• components/npm-avatar/npm-avatar.js
• components/popup/popup.js
• components/root-selector/root-selector.js
• components/wiki/wiki.js

items-list

• components/items-list/items-list.js
• components/items-list/view-model.js

package

• components/package/package.js
• components/package/header/header.js
• components/package/pannels/index.js
• components/package/pannels/overview/overview.js
• components/package/pannels/files/files.js
• components/package/pannels/licenses/licenses.js
• components/package/pannels/licenses/view-model.js
• components/package/pannels/scripts/scripts.js
• components/package/pannels/scorecard/scorecard.js
• components/package/pannels/vulnerabilities/vulnerabilities.js
• components/package/pannels/warnings/warnings.js
• components/package/pannels/warnings/code-fetcher.js

search-command

• components/search-command/search-command.js
• components/search-command/search-chip.js
• components/search-command/search-command-panels.js
• components/search-command/search-command-styles.js
• components/search-command/filters.js

views

• components/views/home/home.js
• components/views/home/maintainers/maintainers.js
• components/views/home/report/report.js
• components/views/search/search.js
• components/views/search/search-view-styles.js
• components/views/settings/settings.js
• components/views/tree/tree.js
• components/views/tree/tree-card.js
• components/views/tree/tree-connectors.js
• components/views/tree/tree-layout.js
• components/views/tree/tree-styles.js
• components/views/warnings/warnings.js

[zeearth]

working on public/websocket.js

[zeearth]

working on public/common/utils.js