"fix" types

src/components/AgCellRenderer.vue

 <script setup lang="ts">
 import type { IHeaderParams } from "ag-grid-community";
-const props = defineProps();
-const params = props.params as IHeaderParams;
+const props: any = defineProps();
+const params = props.params as IHeaderParams & { value: boolean };
 
 console.log(params?.value);
 const hasValue = params?.value !== undefined;
@@ -9,12 +9,11 @@ const hasValue = params?.value !== undefined;
 const f = (evt: any) => console.log("focus");
 </script>
 <template>
-  <div class="focus:ring-green-500 " >
-    <div  v-if="hasValue" class="bg-blue300">
+  <div class="focus:ring-green-500">
+    <div v-if="hasValue" class="bg-blue300">
       <input class="" type="checkbox" :checked="params.value" />
       <!-- <input type="text" value="asdf" @focus="f" name="asdf" id=""/> -->
     </div>
     <div v-else class="c">n/a</div>
   </div>
 </template>
-

src/components/AgHeader.vue

@@ -9,22 +9,26 @@ import "ag-grid-community/styles/ag-grid.css"; // Core grid CSS, always needed
 import "ag-grid-community/styles/ag-theme-alpine.css"; // Optional theme CSS
 
 // const props = defineProps<IComponent<any>>();
-const props = defineProps();
-const params = props.params as IHeaderParams;
+const props: any = defineProps();
+const params = props.params as IHeaderParams & { menuIcon: string };
 const menuButton = ref(null);
 console.log(params);
 
 function onMenuClicked(evt: any) {
-  params.showColumnMenu(menuButton.value); // some problem here
+  params.showColumnMenu(menuButton.value as any); // some problem here
 }
-
 </script>
 
 <template>
   <div>
     <span> {{ params.displayName }} </span>
-    <div v-if="params.enableMenu" ref="menuButton" class="customHeaderMenuButton" @click="onMenuClicked($event)">
-           <i class="fa" :class="params.menuIcon"></i>
-         </div>
+    <div
+      v-if="params.enableMenu"
+      ref="menuButton"
+      class="customHeaderMenuButton"
+      @click="onMenuClicked($event)"
+    >
+      <i class="fa" :class="params.menuIcon"></i>
+    </div>
   </div>
 </template>

src/components/AgTooltip.vue

@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-const props = defineProps();
+const props: any = defineProps();
 const params: any = props.params;
 
 const isHeader = params.rowIndex === undefined;

src/components/Table.vue

@@ -55,7 +55,8 @@ const cellFocused = (evt: any) => {
   console.log("xxx cell was focused", evt);
 };
 
-const columnDefs: ColDef[] = ref([
+// should be ColDef[]
+const columnDefs = ref([
   {
     field: "make",
     headerTooltip: "make",
@@ -102,7 +103,7 @@ const get = async () => {
 
   const url = "https://www.ag-grid.com/example-assets/row-data.json";
   const response = await fetch(url);
-  let remoteRowData = (await response.json()) satisfies ICar;
+  let remoteRowData = (await response.json()) as ICar[];
   remoteRowData = remoteRowData.map((r: any) => ({ ...r, isValid: false }));
   rowData.value = remoteRowData;
 };

src/components/__tests__/HelloWorld.spec.ts

 import { describe, it, expect } from "vitest";
 
 import { mount } from "@vue/test-utils";
-import HelloWorld from "../HelloWorld.vue";
+import HelloWorld from "../List.vue";
 
 describe("HelloWorld", () => {
   it("renders properly", () => {