refactor: correctly type the vue props

src/renderer/util/props.ts

@@ -0,0 +1,9 @@
+import { PropType, PropOptions } from '@vue/composition-api';
+
+export function required<T>(type: PropType<T>) {
+    return { type, required: true } as const;
+}
+
+export function withDefault<T>(type: PropType<T>, defaultValue: (() => T)) {
+    return { type, default: defaultValue } as const;
+}

src/renderer/windows/main/components/FabricArtifactVersionList.vue

@@ -21,24 +21,19 @@
 <script lang=ts>
 import { defineComponent, ref, onMounted } from '@vue/composition-api';
 import { FabricInstaller } from '@xmcl/installer';
+import { required } from '@/util/props';
 import VirtualList from 'vue-virtual-scroll-list';
 import Tile from './FabricArtifactVersionListTile.vue';
 
 type FabricArtifactVersion = FabricInstaller.FabricArtifactVersion;
 
-export interface Props {
-  statuses: {};
-  versions: FabricArtifactVersion[];
-  version: string;
-  select: (version: FabricArtifactVersion) => void;
-}
-export default defineComponent<Props>({
+export default defineComponent({
   components: { VirtualList },
   props: {
-    statuses: Object,
-    versions: Array,
-    version: String,
-    select: Function,
+    statuses: required<{}>(Object),
+    versions: required<FabricArtifactVersion[]>(Array),
+    version: required<string>(String),
+    select: required<(version: { version: string }) => void>(Function),
   },
   setup(props) {
     let list = ref<any>(null);

src/renderer/windows/main/components/FabricArtifactVersionListTile.vue

@@ -43,22 +43,17 @@
 import { defineComponent } from '@vue/composition-api';
 import { FabricInstaller } from '@xmcl/installer';
 import VirtualList from 'vue-virtual-scroll-list';
+import { required } from '@/util/props';
 
 type FabricArtifactVersion = FabricInstaller.FabricArtifactVersion;
 
-export interface Props {
-  statuses: {};
-  source: FabricArtifactVersion;
-  selected: string;
-  select: (version: FabricArtifactVersion) => void;
-}
-export default defineComponent<Props>({
+export default defineComponent({
   components: { VirtualList },
   props: {
-    statuses: Object,
-    source: Object,
-    selected: String,
-    select: Function,
+    statuses: required<{}>(Object),
+    source: required<FabricArtifactVersion>(Object),
+    selected: required<string>(String),
+    select: required<(version: FabricArtifactVersion) => void>(Function),
   },
 });
 

src/renderer/windows/main/components/ForgeVersionList.vue

@@ -20,25 +20,19 @@
 <script lang=ts>
 import { defineComponent, computed } from '@vue/composition-api';
 import { ForgeInstaller } from '@xmcl/installer';
+import { required } from '@/util/props';
 import VirtualList from 'vue-virtual-scroll-list';
 import Tile from './ForgeVersionListTile.vue';
 
 export type Status = 'loading' | 'folder' | 'cloud';
 
-export interface Props {
-  selected: string;
-  value: ForgeInstaller.Version[];
-  status: Record<string, Status>;
-  select: (version: { version: string }) => void;
-}
-
-export default defineComponent<Props>({
+export default defineComponent({
   components: { VirtualList },
   props: {
-    value: Array,
-    status: Object,
-    select: Function,
-    selected: String,
+    value: required<ForgeInstaller.Version[]>(Array),
+    status: required<Record<string, Status>>(Object),
+    select: required<(version: { version: string }) => void>(Function),
+    selected: required<string>(String),
   },
   setup(props) {
     return {

src/renderer/windows/main/components/MinecraftVersionList.vue

@@ -15,17 +15,10 @@
 import { defineComponent, ref, Ref, onMounted } from '@vue/composition-api';
 import VirtualList from 'vue-virtual-scroll-list';
 import { Version } from '@xmcl/installer/minecraft';
+import { required } from '@/util/props';
 import Tile from './MinecraftVersionListTile.vue';
 
-interface Props {
-  showTime: boolean;
-  value: string;
-  statuses: Record<string, boolean>;
-  versions: Array<Version>;
-  select: (version: Version) => void;
-}
-
-export default defineComponent<Props>({
+export default defineComponent({
   components: { VirtualList },
   props: {
     showTime: {
@@ -36,9 +29,9 @@ export default defineComponent<Props>({
       type: String,
       default: () => '',
     },
-    statuses: Object,
-    versions: Array,
-    select: Function,
+    statuses: required<Record<string, boolean>>(Object),
+    versions: required<Array<Version>>(Array),
+    select: required<(version: Version) => void>(Function),
   },
   setup(props) {
     const list: Ref<null | Vue> = ref(null);

src/renderer/windows/main/components/TaskFocus.vue

@@ -25,13 +25,10 @@
 <script lang=ts>
 import { defineComponent, computed } from '@vue/composition-api';
 import { useTaskFromServiceCall } from '@/hooks';
+import { required } from '@/util/props';
 
-export interface Props {
-  promise: Promise<any>;
-}
-
-export default defineComponent<Props>({
-  props: { promise: Promise },
+export default defineComponent({
+  props: { promise: required<Promise<any>>(Promise) },
   setup(props) {
     return useTaskFromServiceCall(computed(() => props.promise));
   },

src/renderer/windows/main/components/TaskNodeStatus.vue

@@ -27,17 +27,7 @@
 import { defineComponent, computed, ref } from '@vue/composition-api';
 import { TaskStatus } from '@universal/task';
 
-export interface Props {
-  status: TaskStatus;
-  showNumber: boolean;
-  hasChild: boolean;
-  uuid: string;
-  progress: number;
-  total: number;
-  message: string;
-}
-
-const component = defineComponent<Props>({
+const component = defineComponent({
   props: {
     status: {
       type: String,
@@ -53,6 +43,7 @@ const component = defineComponent<Props>({
     },
     uuid: {
       type: String,
+      required: true,
     },
     progress: {
       type: Number,

src/renderer/windows/main/pages/AdvancedSettingPageJavaList.vue

@@ -16,9 +16,7 @@
           small
           :color="item.valid ? 'orange' : 'grey'"
           outline
-        >
-          {{ item.majorVersion }}
-        </v-chip>
+        >{{ item.majorVersion }}</v-chip>
       </v-list-tile-avatar>
       <v-list-tile-content>
         <v-list-tile-title v-if="item.valid">Java {{ item.version }}</v-list-tile-title>
@@ -51,19 +49,17 @@ import {
   reactive,
   defineComponent,
   toRefs,
-  PropType,
 } from '@vue/composition-api';
 import { JavaRecord } from '@universal/store/modules/java';
 import { useService } from '@/hooks';
+import { required } from '@/util/props';
 
-interface Props {
-  items: JavaRecord[];
-  value: JavaRecord;
-  remove: (java: JavaRecord) => void;
-}
-
-export default defineComponent<Props>({
-  props: { items: Array, value: Object, remove: Function },
+export default defineComponent({
+  props: {
+    items: required<JavaRecord[]>(Array),
+    value: required<JavaRecord>(Object),
+    remove: required<(java: JavaRecord) => void>(Function),
+  },
   setup(props) {
     const { showItemInDirectory } = useService('BaseService');
     return { showItemInDirectory };

src/renderer/windows/main/pages/CurseforgeProjectPageFiles.vue

@@ -41,12 +41,13 @@ import {
   useCurseforgeProjectFiles,
   useCurseforgeInstall,
 } from '@/hooks';
+import { required } from '@/util/props';
 import Tile from './CurseforgeProjectPageFilesTile.vue';
 import AddInstanceStepper from './InstancesPageAddInstanceStepper.vue';
 
-export default defineComponent<{ project: number; type: ProjectType }>({
+export default defineComponent({
   components: { VirtualList, AddInstanceStepper },
-  props: { project: Number, type: String },
+  props: { project: required(Number), type: required<ProjectType>(String },
   setup(props) {
     const { files, loading, refresh } = useCurseforgeProjectFiles(props.project);
     const { install: installFile, getFileStatus, getFileResource } = useCurseforgeInstall(props.type, props.project);

src/renderer/windows/main/pages/CurseforgeProjectPageFilesTile.vue

@@ -49,19 +49,19 @@
 <script lang=ts>
 import { defineComponent } from '@vue/composition-api';
 import {
-} from '@/hooks';
+  required,
+  withDefault,
+} from '@/util/props';
 import { File } from '@xmcl/curseforge';
 
-export interface Props {
-  source: File;
-  install: (file: File) => Promise<void>;
-  download?: (file: File) => Promise<void>;
-  getFileStatus: (file: File) => string;
-  modpack: boolean;
-}
-
-export default defineComponent<Props>({
-  props: { source: Object, getFileStatus: Function, install: Function, modpack: Boolean, download: Function },
+export default defineComponent({
+  props: {
+    source: required<File>(Object),
+    getFileStatus: required<(file: File) => string>(Function),
+    install: required<(file: File) => Promise<void>>(Function),
+    download: withDefault<(file: File) => Promise<void>>(Function, () => () => Promise.resolve()),
+    modpack: required(Boolean),
+  },
   setup() {
     const releases = ['', 'R', 'A', 'B'];
     function getColor(type: number) {