🔧🤖 Fix TypeScript type errors across packages

xrendan · claude · xrendan · commit bf8f5d8e1c4a · 2026-01-16T17:10:32.000-07:00
- Fix TagGraphRoot type conflict by changing from intersection to interface
- Fix EntitySelector regex match type inference
- Fix GrapherState dimension type mismatch in lodash uniqWith
- Fix Tabs/TabsWithDropdown ref types (HTMLButtonElement -&gt; HTMLDivElement)
- Fix LineChartHelpers/SlopeChartHelpers sortBy type inference
- Fix ContentSwitchers ref type
- Exclude test files and stories from tsconfig type checking
- Add zod and instantsearch.js dependencies

Co-Authored-By: Claude Opus 4.5 &lt;noreply@anthropic.com&gt;
diff --git a/bun.lock b/bun.lock
diff --git a/package.json b/package.json
@@ -219,6 +219,7 @@
     "html-void-elements": "^3.0.0",
     "indefinite": "^2.5.2",
     "inline-style-parser": "^0.2.7",
+    "instantsearch.js": "^4.86.1",
     "internmap": "^2.0.3",
     "intl-messageformat": "^11.1.0",
     "is-plain-obj": "^4.1.0",
@@ -323,6 +324,7 @@
     "vite": "^6.0.0",
     "vitest": "^4.0.17",
     "web-namespaces": "^2.0.1",
+    "zod": "^4.3.5",
     "zwitch": "^2.0.4"
   }
 }
diff --git a/packages/charts/src/grapher/controls/ContentSwitchers.tsx b/packages/charts/src/grapher/controls/ContentSwitchers.tsx
@@ -42,7 +42,7 @@ export class ContentSwitchers extends React.Component<{
     }
 
     private isOverflowMenuOpen = false
-    private overflowButtonRef = React.createRef<HTMLButtonElement>()
+    private overflowButtonRef = React.createRef<HTMLDivElement>()
 
     @computed private get manager(): ContentSwitchersManager {
         return this.props.manager
diff --git a/packages/charts/src/grapher/core/GrapherState.tsx b/packages/charts/src/grapher/core/GrapherState.tsx
@@ -1641,10 +1641,7 @@ export class GrapherState {
             if (!slot.allowMultiple)
                 validDimensions = _.uniqWith(
                     validDimensions,
-                    (
-                        a: OwidChartDimensionInterface,
-                        b: OwidChartDimensionInterface
-                    ) =>
+                    (a, b) =>
                         a.property === slot.property &&
                         a.property === b.property
                 )
diff --git a/packages/charts/src/grapher/entitySelector/EntitySelector.tsx b/packages/charts/src/grapher/entitySelector/EntitySelector.tsx
@@ -205,7 +205,7 @@ const EXTERNAL_SORT_INDICATOR_DEFINITIONS = [
             // then check the label
             const label = getTitleForSortColumnLabel(column)
             // matches "gdp per capita" and content within parentheses
-            const potentialMatches =
+            const potentialMatches: string[] =
                 label.match(/\(.*?\)|(\bgdp per capita\b)/gi) ?? []
             // filter for "gdp per capita" matches that are not within parentheses
             const matches = potentialMatches.filter(
diff --git a/packages/charts/src/grapher/lineCharts/LineChartHelpers.ts b/packages/charts/src/grapher/lineCharts/LineChartHelpers.ts
@@ -177,7 +177,7 @@ export function toRenderLineChartSeries(
     // sort by interaction state so that foreground series
     // are drawn on top of background series
     if (isFocusModeActive || isHoverModeActive) {
-        series = _.sortBy(series, byHoverThenFocusState)
+        series = _.sortBy<RenderLineChartSeries>(series, byHoverThenFocusState)
     }
 
     return series
diff --git a/packages/charts/src/grapher/slopeCharts/SlopeChartHelpers.ts b/packages/charts/src/grapher/slopeCharts/SlopeChartHelpers.ts
@@ -66,7 +66,7 @@ export function toRenderSlopeChartSeries(
     // Sort by interaction state so that foreground series
     // are drawn on top of background series
     if (isHoverModeActive || isFocusModeActive) {
-        return _.sortBy(series, byHoverThenFocusState)
+        return _.sortBy<RenderSlopeChartSeries>(series, byHoverThenFocusState)
     }
 
     return series
diff --git a/packages/charts/src/grapher/tabs/Tabs.tsx b/packages/charts/src/grapher/tabs/Tabs.tsx
@@ -9,7 +9,7 @@ export interface TabItem<TabKey extends string = string> {
         className?: string
         ariaLabel?: string
         dataTrackNote?: string
-        ref?: React.RefObject<HTMLButtonElement | null>
+        ref?: React.RefObject<HTMLDivElement | null>
     }
 }
 
diff --git a/packages/charts/src/types/domainTypes/ContentGraph.ts b/packages/charts/src/types/domainTypes/ContentGraph.ts
@@ -46,7 +46,7 @@ export interface TagGraphNode {
     weight: number
 }
 
-export type TagGraphRoot = TagGraphNode & {
+export interface TagGraphRoot {
     children: TagGraphNode[]
     id: number
     isTopic: false
diff --git a/packages/charts/src/types/index.ts b/packages/charts/src/types/index.ts
@@ -300,7 +300,7 @@ export interface TagGraphNode {
 
 export const TagGraphRootName = "tag-graph-root" as const
 
-export type TagGraphRoot = TagGraphNode & {
+export interface TagGraphRoot {
     children: TagGraphNode[]
     id: number
     isTopic: false
diff --git a/packages/charts/tsconfig.json b/packages/charts/tsconfig.json
@@ -21,5 +21,5 @@
     "useDefineForClassFields": true
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "src/**/*.stories.tsx", "src/**/*.test.tsx", "src/**/*.test.ts"]
 }
diff --git a/packages/colours/src/stories/ColourScales.stories.tsx b/packages/colours/src/stories/ColourScales.stories.tsx
@@ -54,11 +54,12 @@ function getContrastColor(hexColor: string | undefined): string {
 
 interface SwatchProps {
     shade: string
-    hex: string
+    hex: string | undefined
     scaleName: string
 }
 
 function Swatch({ shade, hex, scaleName }: SwatchProps) {
+    if (!hex) return null
     const textColor = getContrastColor(hex)
     const cssVar = `--color-${scaleName}-${shade}`
 
diff --git a/packages/colours/tsconfig.json b/packages/colours/tsconfig.json
@@ -25,5 +25,6 @@
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "noPropertyAccessFromIndexSignature": false
-  }
+  },
+  "exclude": ["node_modules", "dist", "src/**/*.stories.tsx"]
 }

Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ export class ContentSwitchers extends React.Component<{`
`42`	`42`	`}`
`43`	`43`
`44`	`44`	`private isOverflowMenuOpen = false`
`45`		`- private overflowButtonRef = React.createRef<HTMLButtonElement>()`
	`45`	`+ private overflowButtonRef = React.createRef<HTMLDivElement>()`
`46`	`46`
`47`	`47`	`@computed private get manager(): ContentSwitchersManager {`
`48`	`48`	`return this.props.manager`
Original file line number	Diff line number	Diff line change
`@@ -177,7 +177,7 @@ export function toRenderLineChartSeries(`
`177`	`177`	`// sort by interaction state so that foreground series`
`178`	`178`	`// are drawn on top of background series`
`179`	`179`	`if (isFocusModeActive \|\| isHoverModeActive) {`
`180`		`- series = _.sortBy(series, byHoverThenFocusState)`
	`180`	`+ series = _.sortBy<RenderLineChartSeries>(series, byHoverThenFocusState)`
`181`	`181`	`}`
`182`	`182`
`183`	`183`	`return series`
Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@ export function toRenderSlopeChartSeries(`
`66`	`66`	`// Sort by interaction state so that foreground series`
`67`	`67`	`// are drawn on top of background series`
`68`	`68`	`if (isHoverModeActive \|\| isFocusModeActive) {`
`69`		`- return _.sortBy(series, byHoverThenFocusState)`
	`69`	`+ return _.sortBy<RenderSlopeChartSeries>(series, byHoverThenFocusState)`
`70`	`70`	`}`
`71`	`71`
`72`	`72`	`return series`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ export interface TabItem<TabKey extends string = string> {`
`9`	`9`	`className?: string`
`10`	`10`	`ariaLabel?: string`
`11`	`11`	`dataTrackNote?: string`
`12`		`- ref?: React.RefObject<HTMLButtonElement \| null>`
	`12`	`+ ref?: React.RefObject<HTMLDivElement \| null>`
`13`	`13`	`}`
`14`	`14`	`}`
`15`	`15`
Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ export interface TagGraphNode {`
`46`	`46`	`weight: number`
`47`	`47`	`}`
`48`	`48`
`49`		`-export type TagGraphRoot = TagGraphNode & {`
	`49`	`+export interface TagGraphRoot {`
`50`	`50`	`children: TagGraphNode[]`
`51`	`51`	`id: number`
`52`	`52`	`isTopic: false`