refactor: migrate VRendererCell to TypeScript

Author: gingerbeerlime

src/components/pivottable-ui/VRendererCell.vue

@@ -13,22 +13,36 @@
   </td>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed, useSlots } from 'vue'
 import VDropdown from './VDropdown.vue'
+import type { VNode } from 'vue'
 
 const slots = useSlots()
-const rendererOptions = computed(() => Object.keys(props.rendererItems))
-const props = defineProps({
-  rendererName: {
-    type: String,
-    default: ''
-  },
-  rendererItems: {
-    type: Object,
-    default: () => ({})
-  }
+const rendererOptions = computed<string[]>(() =>
+  Object.keys(props.rendererItems)
+)
+
+interface RendererDefinition {
+  name: string
+  props: Record<string, any>
+  setup: (props: any) => () => VNode
+}
+
+interface RendererCellProps {
+  rendererName: string
+  rendererItems: Record<string, RendererDefinition>
+}
+
+const props = withDefaults(defineProps<RendererCellProps>(), {
+  rendererName: '',
+  rendererItems: () => ({})
 })
-const emit = defineEmits(['update:rendererName'])
-const updateRendererName = (value) => emit('update:rendererName', value)
+const emit = defineEmits<{
+  (event: 'update:rendererName', value: string): void
+}>()
+
+const updateRendererName = (value: string): void => {
+  emit('update:rendererName', value)
+}
 </script>