feat: add tdesign components typing tips (#378)

* feat: add tdesign components typing tips

* chore: fix type

package.json

@@ -28,7 +28,7 @@
     "qrcode.vue": "^3.2.2",
     "qs": "^6.10.5",
     "tdesign-icons-vue-next": "^0.1.1",
-    "tdesign-vue-next": "^0.25.0",
+    "tdesign-vue-next": "^0.26.2",
     "tvision-color": "^1.3.1",
     "vue": "^3.2.31",
     "vue-clipboard3": "^2.0.0",

src/layouts/components/MenuContent.vue

@@ -48,7 +48,9 @@ const list = computed(() => {
   return getMenuList(navData);
 });
 
-const getMenuList = (list: MenuRoute[], basePath?: string): MenuRoute[] => {
+type ListItemType = MenuRoute & { icon?: string };
+
+const getMenuList = (list: MenuRoute[], basePath?: string): ListItemType[] => {
   if (!list) {
     return [];
   }

src/layouts/components/SideNav.vue

@@ -55,7 +55,7 @@ const props = defineProps({
     default: '64px',
   },
   theme: {
-    type: String as PropType<string>,
+    type: String as PropType<'light' | 'dark'>,
     default: 'light',
   },
   isCompact: {

src/pages/detail/advanced/constants.ts

@@ -119,8 +119,8 @@ export const TABLE_COLUMNS_DATA = [
     sorter: (a, b) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
   },
   {
-    align: 'left',
-    fixed: 'right',
+    align: 'left' as const,
+    fixed: 'right' as const,
     width: 200,
     className: 'test2',
     colKey: 'op',

src/pages/detail/deploy/constants.ts

@@ -104,12 +104,12 @@ export const TABLE_COLUMNS = [
     sorter: (a, b) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
   },
   {
-    align: 'left',
+    align: 'left' as const,
     width: '200',
     className: 'test2',
     ellipsis: true,
     colKey: 'op',
-    fixed: 'right',
+    fixed: 'right' as const,
     title: '操作',
   },
 ];

src/pages/form/base/constants.ts

@@ -1,4 +1,6 @@
-export const FORM_RULES = {
+import { FormRule } from 'tdesign-vue-next';
+
+export const FORM_RULES: Record<string, FormRule[]> = {
   name: [{ required: true, message: '请输入合同名称', type: 'error' }],
   type: [{ required: true, message: '请选择合同类型', type: 'error' }],
   payment: [{ required: true, message: '请选择合同收付类型', type: 'error' }],

src/pages/form/step/constants.ts

@@ -1,4 +1,6 @@
-export const FORM_RULES = {
+import { FormRule } from 'tdesign-vue-next';
+
+export const FORM_RULES: Record<string, FormRule[]> = {
   name: [{ required: true, message: '请选择合同名称', type: 'error' }],
   type: [{ required: true, message: '请选择发票类型', type: 'error' }],
   title: [{ required: true, message: '请输入发票抬头', type: 'error' }],

src/pages/form/step/index.vue

@@ -149,7 +149,7 @@ export default {
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import { useRouter } from 'vue-router';
-import { ValidateResultContext } from 'tdesign-vue-next';
+import { SubmitContext, Data } from 'tdesign-vue-next';
 
 import {
   FORM_RULES,
@@ -179,7 +179,7 @@ const amount = computed(() => {
   return '--';
 });
 
-const onSubmit = (result: ValidateResultContext<FormData>, val: number) => {
+const onSubmit = (result: SubmitContext<Data>, val: number) => {
   if (result.validateResult === true) {
     activeForm.value = val;
   }

src/pages/list/base/constants.ts

@@ -1,4 +1,6 @@
-export const COLUMNS = [
+import { PrimaryTableCol, TableRowData } from 'tdesign-vue-next';
+
+export const COLUMNS: PrimaryTableCol<TableRowData>[] = [
   { colKey: 'row-select', type: 'multiple', width: 64, fixed: 'left' },
   {
     title: '合同名称',
@@ -7,7 +9,7 @@ export const COLUMNS = [
     colKey: 'name',
     fixed: 'left',
   },
-  { title: '合同状态', colKey: 'status', width: 200, cell: { col: 'status' } },
+  { title: '合同状态', colKey: 'status', width: 200 },
   {
     title: '合同编号',
     width: 200,

src/pages/list/base/index.vue

@@ -24,7 +24,7 @@
         :pagination="pagination"
         :selected-row-keys="selectedRowKeys"
         :loading="dataLoading"
-        :header-affixed-top="{ offsetTop, container: getContainer }"
+        :header-affixed-top="headerAffixedTop"
         @page-change="rehandlePageChange"
         @change="rehandleChange"
         @select-change="rehandleSelectChange"
@@ -177,13 +177,13 @@ const handleClickDelete = (row: { rowIndex: any }) => {
   confirmVisible.value = true;
 };
 
-const offsetTop = computed(() => {
-  return store.isUseTabsRouter ? 48 : 0;
-});
-
-const getContainer = () => {
-  return document.querySelector(`.${prefix}-layout`);
-};
+const headerAffixedTop = computed(
+  () =>
+    ({
+      offsetTop: store.isUseTabsRouter ? 48 : 0,
+      container: `.${prefix}-layout`,
+    } as any),
+);
 </script>
 
 <style lang="less" scoped>

src/pages/list/card/components/DialogForm.vue

@@ -36,7 +36,7 @@
 
 <script setup lang="ts">
 import { ref, watch } from 'vue';
-import { MessagePlugin } from 'tdesign-vue-next';
+import { MessagePlugin, FormRule, SubmitContext, Data } from 'tdesign-vue-next';
 
 const INITIAL_DATA = {
   name: '',
@@ -70,12 +70,12 @@ const formVisible = ref(false);
 const formData = ref(props.data);
 const textareaValue = ref('');
 
-const onSubmit = ({ result, firstError }) => {
+const onSubmit = ({ validateResult, firstError }: SubmitContext<Data>) => {
   if (!firstError) {
     MessagePlugin.success('提交成功');
     formVisible.value = false;
   } else {
-    console.log('Errors: ', result);
+    console.log('Errors: ', validateResult);
     MessagePlugin.warning(firstError);
   }
 };
@@ -107,7 +107,7 @@ watch(
   },
 );
 
-const rules = {
+const rules: Record<string, FormRule[]> = {
   name: [{ required: true, message: '请输入产品名称', type: 'error' }],
 };
 </script>

src/pages/list/components/CommonTable.vue

@@ -73,7 +73,7 @@
         :hover="hover"
         :pagination="pagination"
         :loading="dataLoading"
-        :header-affixed-top="{ offsetTop, container: getContainer }"
+        :header-affixed-top="headerAffixedTop"
         @page-change="rehandlePageChange"
         @change="rehandleChange"
       >
@@ -114,7 +114,7 @@
 </template>
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
-import { MessagePlugin } from 'tdesign-vue-next';
+import { MessagePlugin, PrimaryTableCol, TableRowData, PageInfo } from 'tdesign-vue-next';
 import Trend from '@/components/trend/index.vue';
 import { getList } from '@/api/list';
 import { useSettingStore } from '@/store';
@@ -130,7 +130,7 @@ import {
 
 const store = useSettingStore();
 
-const COLUMNS = [
+const COLUMNS: PrimaryTableCol<TableRowData>[] = [
   {
     title: '合同名称',
     fixed: 'left',
@@ -139,7 +139,7 @@ const COLUMNS = [
     align: 'left',
     colKey: 'name',
   },
-  { title: '合同状态', colKey: 'status', width: 200, cell: { col: 'status' } },
+  { title: '合同状态', colKey: 'status', width: 200 },
   {
     title: '合同编号',
     width: 200,
@@ -182,7 +182,7 @@ const searchForm = {
 
 const formData = ref({ ...searchForm });
 const rowKey = 'index';
-const verticalAlign = 'top';
+const verticalAlign = 'top' as const;
 const hover = true;
 
 const pagination = ref({
@@ -251,8 +251,8 @@ const onReset = (val) => {
 const onSubmit = (val) => {
   console.log(val);
 };
-const rehandlePageChange = (curr, pageInfo) => {
-  console.log('分页变化', curr, pageInfo);
+const rehandlePageChange = (pageInfo: PageInfo, newDataSource: TableRowData[]) => {
+  console.log('分页变化', pageInfo, newDataSource);
 };
 const rehandleChange = (changeParams, triggerAndData) => {
   console.log('统一Change', changeParams, triggerAndData);
@@ -261,13 +261,13 @@ const rehandleClickOp = ({ text, row }) => {
   console.log(text, row);
 };
 
-const offsetTop = computed(() => {
-  return store.isUseTabsRouter ? 48 : 0;
-});
-
-const getContainer = () => {
-  return document.querySelector(`.${prefix}-layout`);
-};
+const headerAffixedTop = computed(
+  () =>
+    ({
+      offsetTop: store.isUseTabsRouter ? 48 : 0,
+      container: `.${prefix}-layout`,
+    } as any), // TO BE FIXED
+);
 </script>
 
 <style lang="less" scoped>

src/pages/login/components/Register.vue

@@ -72,7 +72,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { MessagePlugin } from 'tdesign-vue-next';
+import { MessagePlugin, FormRule } from 'tdesign-vue-next';
 import { useCounter } from '@/hooks';
 
 const INITIAL_DATA = {
@@ -83,7 +83,7 @@ const INITIAL_DATA = {
   checked: false,
 };
 
-const FORM_RULES = {
+const FORM_RULES: Record<string, FormRule[]> = {
   phone: [{ required: true, message: '手机号必填', type: 'error' }],
   email: [
     { required: true, message: '邮箱必填', type: 'error' },

src/store/modules/setting.ts

@@ -19,7 +19,7 @@ export const useSettingStore = defineStore('setting', {
     showSidebar: (state) => state.layout !== 'top',
     showSidebarLogo: (state) => state.layout === 'side',
     showHeaderLogo: (state) => state.layout !== 'side',
-    displayMode: (state) => {
+    displayMode: (state): 'dark' | 'light' => {
       if (state.mode === 'auto') {
         const media = window.matchMedia('(prefers-color-scheme:dark)');
         if (media.matches) {
@@ -27,7 +27,7 @@ export const useSettingStore = defineStore('setting', {
         }
         return 'light';
       }
-      return state.mode;
+      return state.mode as 'dark' | 'light';
     },
   },
   actions: {

tsconfig.json

@@ -17,7 +17,14 @@
       "@/*": ["src/*"]
     }
   },
-  "include": ["**/*.ts", "src/**/*.d.ts",
-      "src/types/**/*.d.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "include": [
+    "**/*.ts",
+    "src/**/*.d.ts",
+    "src/types/**/*.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "node_modules/tdesign-vue-next/global.d.ts"
+  ],
   "compileOnSave": false
 }