Better TS types

Author: jods4

demo/main.ts

@@ -3,5 +3,5 @@ import MyApp from './app.vue';
 import Datagrid from '../src/datagrid.vue';
 
 createApp(MyApp)
-  .component('ui-datagrid', Datagrid)
+  .component('ui-datagrid', <any>Datagrid) // HACK: vue bug for now
   .mount('#app');

src/columns/column.ts

@@ -8,6 +8,7 @@ export interface ColumnDefinition {
   render?: FunctionalComponent;
   resizable?: boolean;
   sortable?: boolean;
+  searchable?: boolean;
   width?: number;
 };
 

src/datagrid.vue

@@ -41,17 +41,17 @@
 </template>
 
 <script lang="ts">
-import { onMounted, reactive, shallowReactive, shallowRef as sref, watchEffect } from 'vue';
+import { onMounted, reactive, shallowReactive, shallowRef as sref, watchEffect, defineComponent } from 'vue';
 import { AnimBody, AnimColumn, useAnimations } from "./animation";
 import { addFiller, autoSize, Column, ColumnDefinition, ColResizer } from './columns';
 import { ItemDirective, getItem } from './item';
-import { view } from "./reactivity/view";
 import ResizeDirective from './resize';
 import { addSelection } from './selection';
 import { useSorting, SortIndicator } from './sort';
+import { Ctor, view } from './utils';
 import { useVirtual, VirtualBody, VirtualScroller } from './virtual';
 
-export default {
+export default defineComponent({
   components: {
     'anim-body': AnimBody,
     'col-resizer': ColResizer,
@@ -67,12 +67,12 @@ export default {
   },
 
   props: {
-    columns: Array,
-    data: [Array, Promise],
-    selected: Set,
+    columns: { type: Array as Ctor<ColumnDefinition[]>, required: true },
+    data: [Array as Ctor<object[]>, Promise as Ctor<Promise<object[]>>],
+    selected: Set as Ctor<Set<object>>,
   },
 
-  setup(props: { columns?: ColumnDefinition[], data?: object[] | Promise<object[]>, selected?: Set<object> }) {
+  setup(props) {
     const autoSized = sref(false);
     const loading = sref(true);
     const data = sref([] as object[]);
@@ -122,7 +122,7 @@ export default {
       ...sorting,
     });
   }
-};
+});
 </script>
 
 <style src='./datagrid.css'></style>

src/utils/index.ts

@@ -0,0 +1,3 @@
+export { view } from './view';
+
+export type Ctor<T> = new (...args: any) => T;

src/reactivity/view.ts renamed to src/utils/view.ts

@@ -10,8 +10,8 @@
 </template>
 
 <script lang="ts">
-import { getState } from "./state";
-import { view } from '../reactivity/view';
+import { getState } from './state';
+import { view } from '../utils';
 
 export default {
   setup() {

src/virtual/body.vue

@@ -7,7 +7,7 @@
 <script lang='ts'>
 import { shallowRef as sref, onMounted } from 'vue';
 import { getState } from './state';
-import { view } from '../reactivity/view';
+import { view } from '../utils';
 
 export default {
   setup() {