refactor: emit 和props type声明优化

meadmin-cn · Nov 4, 2022 · de509a7 · de509a7
1 parent a868099
commit de509a7
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 43 deletions.
diff --git a/src/components/meNumber.vue b/src/components/meNumber.vue
@@ -29,7 +29,10 @@ const props = defineProps({
     default: (number: number, decimals: number) => formatNumber({ truncate: decimals, padRight: decimals })(number),
   },
 });
-const emit = defineEmits(['finished', 'started']);
+const emit = defineEmits<{
+  (e:'finished'):void,
+  (e:'started'):void
+}>();
 const numberInfo = reactive({
   number: props.start,
   prefix: '',

diff --git a/src/components/meWangEditor/index.vue b/src/components/meWangEditor/index.vue
@@ -16,8 +16,8 @@
       @on-max-length="emit('onMaxLength', $event)"
       @on-focus="emit('onFocus', $event)"
       @on-blur="emit('onBlur', $event)"
-      @custom-alert="(...args:any[]) => emit('customAlert', ...args)"
-      @custom-paste="(...args:any[]) => emit('customPaste', ...args)"
+      @custom-alert="(...args:[string,string]) => emit('customAlert', ...args)"
+      @custom-paste="(...args:[IDomEditor,ClipboardEvent]) => emit('customPaste', ...args)"
     />
   </div>
 </template>
@@ -52,17 +52,17 @@ const props = defineProps({
     default: '',
   },
 });
-const emit = defineEmits([
-  'update:modelValue',
-  'onCreated',
-  'onChange',
-  'onDestroyed',
-  'onMaxLength',
-  'onFocus',
-  'onBlur',
-  'customAlert',
-  'customPaste',
-]);
+const emit = defineEmits<{
+  (e:'update:modelValue',valueHtml :string):void,
+  (e:'onCreated',editor: IDomEditor):void,
+  (e:'onChange',editor: IDomEditor):void,
+  (e:'onDestroyed',editor: IDomEditor):void,
+  (e:'onMaxLength',editor: IDomEditor):void,
+  (e:'onFocus',editor: IDomEditor):void,
+  (e:'onBlur',editor: IDomEditor):void,
+  (e:'customAlert',s: string, t: string):void,
+  (e:'customPaste',editor: IDomEditor, event: ClipboardEvent):void,
+}>();
 const { i18n } = useGlobalStore();
 // 编辑器实例，必须用 shallowRef
 const editorRef = shallowRef<IDomEditor | undefined>();

diff --git a/src/views/components/vxeTable/index.vue b/src/views/components/vxeTable/index.vue
@@ -59,7 +59,7 @@
       <vxe-colgroup title="Group1">
         <vxe-column field="name" title="ElInput" min-width="140" :edit-render="{}">
           <template #edit="scope">
-            <el-input v-model="scope.row.name" @input="xTable.updateStatus(scope)"></el-input>
+            <el-input v-model="scope.row.name" @input="xTable!.updateStatus(scope)"></el-input>
           </template>
         </vxe-column>
         <vxe-column field="role" title="ElAutocomplete" min-width="160" :edit-render="{}">

diff --git a/src/views/rolePermissions/components/group/components/add.vue b/src/views/rolePermissions/components/group/components/add.vue
@@ -31,18 +31,14 @@
 <script setup lang="ts" name="Add">
 import { GroupInfo, addGroupApi, editGroupApi, groupListApi } from '@/api/admin';
 import { FormInstance, FormRules } from 'element-plus';
-import { PropType } from 'vue';
-const props = defineProps({
-  show: {
-    type: Boolean,
-    required: true,
-  },
-  data: Object as PropType<Required<GroupInfo>>,
-});
-const emit = defineEmits({
-  ['update:show']: (show: boolean) => true,
-  success: () => true,
-});
+const props = defineProps<{
+  show:boolean,
+  data?:Required<GroupInfo>
+}>();
+const emit = defineEmits<{
+  (e:'update:show',show: boolean):void,
+  (e:'success'):void
+}>();
 const formRef = ref<FormInstance>();
 const formData = ref(new GroupInfo());
 const rules = reactive<FormRules>({

diff --git a/src/views/rolePermissions/components/group/group.vue b/src/views/rolePermissions/components/group/group.vue
@@ -44,9 +44,9 @@ import { VxeTableEvents } from 'vxe-table';
 import { searchTreeTable } from '@/utils/helper';
 import Add from './components/add.vue';
 import { omit } from 'lodash-es';
-const emit = defineEmits({
-  currentChange: (row: string[]) => true,
-});
+const emit = defineEmits<{
+  (e:'currentChange',row: string[]):void
+}>();
 const showAdd = ref(false);
 const groupRef = ref<MeVxeTableInstance>();
 const group = groupListApi();

diff --git a/src/views/rolePermissions/components/menu/components/add.vue b/src/views/rolePermissions/components/menu/components/add.vue
@@ -42,17 +42,14 @@ import { addMenuApi, MenuInfo, editMenuApi, menuListApi } from '@/api/menu';
 import { FormInstance, FormRules } from 'element-plus';
 import { PropType } from 'vue';
 import { type, status } from '../dict';
-const props = defineProps({
-  show: {
-    type: Boolean,
-    required: true,
-  },
-  data: Object as PropType<Required<MenuInfo>>,
-});
-const emit = defineEmits({
-  ['update:show']: (show: boolean) => true,
-  success: () => true,
-});
+const props = defineProps<{
+  show:boolean,
+  data?:Required<MenuInfo>
+}>();
+const emit = defineEmits<{
+  (e:'update:show',show: boolean):void,
+  (e:'success'):void
+}>();
 const formRef = ref<FormInstance>();
 const formData = ref(new MenuInfo());
 const rules = reactive<FormRules>({

diff --git a/src/views/rolePermissions/components/menu/menu.vue b/src/views/rolePermissions/components/menu/menu.vue
@@ -68,7 +68,9 @@ const props = defineProps({
     default: () => [],
   },
 });
-const emit = defineEmits(['subRules']);
+const emit = defineEmits<{
+  (e:'subRules',rules:string[]):void
+}>();
 const showAdd = ref(false);
 const menuRef = ref<MeVxeTableInstance>();
 const menu = menuListApi();

diff --git a/src/views/rolePermissions/rolePermissions.vue b/src/views/rolePermissions/rolePermissions.vue
@@ -2,7 +2,7 @@
   <div class="role-permissions">
     <el-scrollbar always view-class="body">
       <group ref="group" class="group" @current-change="checkedRules = $event"></group>
-      <Menu class="menu" :checked-rules="checkedRules" @sub-rules="($refs.group as any).setGroupRules($event)"></Menu>
+      <Menu class="menu" :checked-rules="checkedRules" @sub-rules="($refs.group as InstanceType<typeof Group>).setGroupRules($event)"></Menu>
     </el-scrollbar>
   </div>
 </template>