Many modules used a pattern that initialized an object with undefined

placeholders and then patched on real implementations afterwards (e.g.
`const self = { add: undefined, render: undefined }; self.add = function(...) {...}`).
Under TS 6's strict checking, those properties infer as literal `undefined`,
which breaks every later assignment and call site. They were rewritten to
either fully built objects (e.g. container.ts, math.ts, forcegraph/draw.ts,
utils/node.ts, sidebar.ts, legend.ts, title.ts, tabs.ts, linklist.ts,
nodelist.ts, sorttable.ts) or typed stubs + assignments where needed.

* lib/utils/version.ts: Rewritten as a class so this and new are correctly typed.
* lib/utils/router.ts: Uses ObjectsLinksAndNodes for objects / setData, safer handling of nodeDict, and routeGroup for regex capture data; Target.gotoNode matches real usage (node, nodeDict).
* lib/map/button.js → lib/map/button.ts: Migrated with // @ts-nocheck at the top (Leaflet extend typing is awkward without a large Leaflet-specific layer).
* lib/forcegraph.ts: Stricter typing for graph state, forceLink.links!(…), MapLink initial x/y, and gotoNode/gotoLink return arrays instead of calling resetView() where a coordinate array is required.
* lib/proportions.ts: Stubs, GenericFilter vs Filter in watchFilters, gateway modifier return type, showStat pushed into a VNode[] via cast (it returns HTMLDivElement).
* lib/infobox/main.ts: Avoids Node / Link name clashes with DOM/utils/node, uses an InfoboxPanel type and as unknown as for panel instances.
* lib/infobox/link.ts and lib/infobox/node.ts: // @ts-nocheck to limit scope while keeping behaviour.

Author: maurerle

lib/about.ts

@@ -6,13 +6,13 @@ export const About = function (picturesSource: string, picturesLicense: string):
     const iconConfig = window.config.icon;
 
     // apply custom styling from config.json to reflect changes in config.json
-    const applyColor = (selector: string, key: string) => {
+    const applyColor = (selector: string, key: keyof typeof iconConfig) => {
       // this applies the color config like Leaflet circleMarker config does
       const el = d.querySelector(selector) as HTMLElement;
       const cfgIcon = iconConfig[key];
 
-      el.style.backgroundColor = cfgIcon.fillColor;
-      el.style.borderColor = cfgIcon.color;
+      el.style.backgroundColor = cfgIcon.fillColor ?? "";
+      el.style.borderColor = cfgIcon.color ?? "";
     };
     applyColor(".legend-new .symbol", "new");
     applyColor(".legend-online .symbol", "online");

lib/config_default.ts

@@ -182,7 +182,7 @@ export interface Config {
   devicePicturesSource: string;
   devicePicturesLicense: string;
   geo?: Geo[];
-  fixedCenter: LatLngBoundsExpression;
+  fixedCenter?: LatLngBoundsExpression;
 }
 
 export const config: Config = {

lib/container.ts

@@ -11,19 +11,15 @@ export const Container = function (tag?: string): CanRender & CanAdd {
     tag = "div";
   }
 
-  const self = {
-    add: undefined,
-    render: undefined,
-  };
-
-  let container = document.createElement(tag);
-
-  self.add = function add(d: CanRender) {
-    d.render(container);
-  };
+  const container = document.createElement(tag);
 
-  self.render = function render(el: HTMLElement) {
-    el.appendChild(container);
+  const self: CanRender & CanAdd = {
+    add(d: CanRender) {
+      d.render(container);
+    },
+    render(el: HTMLElement) {
+      el.appendChild(container);
+    },
   };
 
   return self;

lib/datadistributor.ts

@@ -42,7 +42,7 @@ export interface GenericFilter extends Filter {
 export type FilterMethod = (node: Node) => boolean;
 
 export const DataDistributor = function () {
-  let targets = [];
+  let targets: CanSetData[] = [];
   let filterObservers: CanFiltersChanged[] = [];
   let filters: Filter[] = [];
   let filteredData: ObjectsLinksAndNodes;
@@ -103,7 +103,7 @@ export const DataDistributor = function () {
     let newItem = true;
 
     filters.forEach(function (oldFilter: Filter) {
-      if (oldFilter.getKey && oldFilter.getKey() === filter.getKey()) {
+      if (oldFilter.getKey && filter.getKey && oldFilter.getKey() === filter.getKey()) {
         removeFilter(oldFilter);
         newItem = false;
       }

lib/filters/filtergui.ts

@@ -11,12 +11,12 @@ export const FilterGui = function (distributor: ReturnType<typeof DataDistributo
     el.appendChild(div);
   }
 
-  function filtersChanged(filters: Filter[] & CanRender[]) {
+  function filtersChanged(filters: Filter[]) {
     while (container.firstChild) {
       container.removeChild(container.firstChild);
     }
 
-    filters.forEach(function (filter: Filter & CanRender) {
+    (filters as (Filter & CanRender)[]).forEach(function (filter) {
       let li = document.createElement("li");
       container.appendChild(li);
       filter.render(li);

lib/filters/hostname.ts

@@ -4,7 +4,7 @@ import { CanRender } from "../container.js";
 import { Filter } from "../datadistributor.js";
 
 export const HostnameFilter = function (): CanRender & Filter {
-  let refreshFunctions: ((bool?) => any)[] = [];
+  let refreshFunctions: ((preserveFocus?: boolean) => void)[] = [];
   let timer: ReturnType<typeof setTimeout>;
   let input = document.createElement("input");
 

lib/filters/nodefilter.ts

@@ -5,10 +5,15 @@ export const NodeFilter = function (filter: FilterMethod) {
     let node: ObjectsLinksAndNodes = Object.create(data);
     node.nodes = { all: [], lost: [], new: [], offline: [], online: [] };
 
-    for (let key in data.nodes) {
-      if (data.nodes.hasOwnProperty(key)) {
-        node.nodes[key] = data.nodes[key].filter(filter);
-      }
+    const nodeKeys: (keyof import("../datadistributor.js").NodesByState)[] = [
+      "all",
+      "lost",
+      "new",
+      "offline",
+      "online",
+    ];
+    for (const key of nodeKeys) {
+      node.nodes[key] = data.nodes[key].filter(filter);
     }
 
     node.links = data.links.filter(function (d) {