fix: stricter type checking for duck formating functions (#5998)

* fix: stricter type checking for duck formating functions

* add value type for formatter component

web-common/src/components/data-types/Base.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   export let classes = "";
   export let isNull = false;
   export let dark = false;

web-common/src/components/data-types/FormattedDataType.svelte

@@ -1,22 +1,31 @@
-<script>
+<script lang="ts">
   /** provides the formatting for data types */
+  import type { PERC_DIFF } from "@rilldata/web-common/components/data-types/type-utils";
   import {
     INTERVALS,
     NUMERICS,
     TIMESTAMPS,
   } from "@rilldata/web-common/lib/duckdb-data-types";
+  import type { NumberParts } from "@rilldata/web-common/lib/number-formatting/humanizer-types";
   import Interval from "./Interval.svelte";
+  import MeasureChange from "./MeasureChange.svelte";
   import Number from "./Number.svelte";
-  import Timestamp from "./Timestamp.svelte";
   import PercentageChange from "./PercentageChange.svelte";
-  import MeasureChange from "./MeasureChange.svelte";
+  import Timestamp from "./Timestamp.svelte";
   import Varchar from "./Varchar.svelte";
 
   export let type = "VARCHAR";
   export let isNull = false;
   export let inTable = false;
   export let dark = false;
-  export let value = undefined;
+  export let value:
+    | string
+    | boolean
+    | number
+    | null
+    | undefined
+    | NumberParts
+    | PERC_DIFF = undefined;
   export let customStyle = "";
   export let truncate = false;
 
@@ -41,7 +50,7 @@ PercentageChange  and MeasureChange don't take a `type` prop,
 so instantiating these directly clears a ton of warnings
 about unknown props.
 -->
-{#if type === "RILL_PERCENTAGE_CHANGE"}
+{#if type === "RILL_PERCENTAGE_CHANGE" && typeof value !== "boolean"}
   <PercentageChange {value} {isNull} {inTable} {customStyle} {dark} />
 {:else if type === "RILL_CHANGE"}
   <MeasureChange {value} {inTable} {customStyle} {dark} />

web-common/src/components/data-types/Interval.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { formatDuckdbIntervalLossless } from "@rilldata/web-common/lib/number-formatting/strategies/intervals";
   import Base from "./Base.svelte";
   export let isNull = false;

web-common/src/components/data-types/MeasureChange.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import Base from "./Base.svelte";
   import { isPercDiff } from "./type-utils";
   export let inTable = false;

web-common/src/components/data-types/Number.svelte

@@ -1,11 +1,11 @@
-<script>
+<script lang="ts">
   import { formatDataType } from "../../lib/formatters";
   import Base from "./Base.svelte";
   export let isNull = false;
   export let inTable = false;
   export let dark = false;
   export let customStyle = "";
-  export let type;
+  export let type: string;
   export let value;
   export let truncate = false;
 </script>

web-common/src/components/data-types/PercentageChange.svelte

@@ -6,7 +6,13 @@
   export let inTable = false;
   export let dark = false;
   export let customStyle = "";
-  export let value: number | undefined | null | NumberParts | PERC_DIFF;
+  export let value:
+    | string
+    | number
+    | undefined
+    | null
+    | NumberParts
+    | PERC_DIFF;
   export let tabularNumber = true;
   export let assembled = true;
 

web-common/src/components/data-types/Timestamp.svelte

@@ -1,14 +1,14 @@
-<script>
+<script lang="ts">
   import { formatDataType } from "../../lib/formatters";
   import Base from "./Base.svelte";
   export let isNull = false;
   export let inTable = false;
   export const textAlign = "text-right";
   export let customStyle = "";
-  export let dark;
-  export let type;
+  export let dark: boolean;
+  export let type: string;
   export let value;
-  export let truncate;
+  export let truncate: boolean;
 </script>
 
 <Base

web-common/src/components/data-types/Varchar.svelte

@@ -1,11 +1,11 @@
-<script>
+<script lang="ts">
   import { formatDataType } from "../../lib/formatters";
   import Base from "./Base.svelte";
   export let isNull = false;
   export let inTable = false;
   export let dark = false;
   export let customStyle = "";
-  export let type;
+  export let type: string;
   export let value;
   export let truncate = false;
 </script>

web-common/src/features/column-profile/column-types/details/TopK.svelte

@@ -17,6 +17,7 @@
     formatDataType,
     formatInteger,
   } from "@rilldata/web-common/lib/formatters";
+  import type { Location } from "@rilldata/web-common/lib/place-element";
   import type { TopKEntry } from "@rilldata/web-common/runtime-client";
   import { format } from "d3-format";
   import { createEventDispatcher } from "svelte";
@@ -55,7 +56,7 @@
       .join("")}${str}`;
   }
 
-  function getCopyValue(type, value) {
+  function getCopyValue(type: string, value) {
     return isNested(type) ? formatDataType(value, type) : value;
   }
 

web-common/src/lib/duckdb-data-types.ts

@@ -64,26 +64,26 @@ export const TIMESTAMPS = new Set([
 export const INTERVALS = new Set(["INTERVAL"]);
 export const NESTED = new Set(["STRUCT", "MAP", "LIST"]);
 
-export function isList(type) {
-  return type.includes("[]");
+export function isList(type: string) {
+  return type?.includes("[]");
 }
 
 // decimal values don't quite match a simple FLOATS.has(type) function,
 // so we need this one.
-export function isFloat(type) {
+export function isFloat(type: string) {
   return FLOATS.has(type) || type?.startsWith("DECIMAL");
 }
 
-export function isStruct(type) {
-  return type.startsWith("STRUCT");
+export function isStruct(type: string) {
+  return type?.startsWith("STRUCT");
 }
 
-export function isNested(type) {
+export function isNested(type: string) {
   return (
     type === "JSON" ||
     isList(type) ||
     isStruct(type) ||
-    [...NESTED].some((typeDef) => type.startsWith(typeDef))
+    [...NESTED].some((typeDef) => type?.startsWith(typeDef))
   );
 }