From a0b9ca7fae8114963ff2e584d0fa553336a9c35b Mon Sep 17 00:00:00 2001 From: MaysWind Date: Sat, 25 Jan 2025 16:13:55 +0800 Subject: [PATCH] migrate entry and router file to typescript --- src/MobileApp.vue | 7 ++- src/{desktop-main.js => desktop-main.ts} | 11 ++-- src/desktop.html | 2 +- src/{mobile-main.js => mobile-main.ts} | 22 ++++---- src/mobile.html | 2 +- src/router/{desktop.js => desktop.ts} | 70 +++++++++++++----------- src/router/{mobile.js => mobile.ts} | 20 ++++--- src/vue-shim.d.ts | 1 + 8 files changed, 71 insertions(+), 64 deletions(-) rename src/{desktop-main.js => desktop-main.ts} (98%) rename src/{mobile-main.js => mobile-main.ts} (88%) rename src/router/{desktop.js => desktop.ts} (73%) rename src/router/{mobile.js => mobile.ts} (91%) create mode 100644 src/vue-shim.d.ts diff --git a/src/MobileApp.vue b/src/MobileApp.vue index 450692ce..ac4a3135 100644 --- a/src/MobileApp.vue +++ b/src/MobileApp.vue @@ -7,9 +7,9 @@ + diff --git a/src/mobile-main.js b/src/mobile-main.ts similarity index 88% rename from src/mobile-main.js rename to src/mobile-main.ts index ffd7c3dd..0f0e24ef 100644 --- a/src/mobile-main.js +++ b/src/mobile-main.ts @@ -36,7 +36,9 @@ import Framework7Treeview from 'framework7/components/treeview'; import Framework7Typography from 'framework7/components/typography'; import Framework7Swiper from 'framework7/components/swiper'; import Framework7PhotoBrowser from 'framework7/components/photo-browser'; +// @ts-expect-error there is a function called "registerComponents" in the framework7-vue package, but it is not declared in the type definition file import Framework7Vue, { registerComponents } from 'framework7-vue/bundle'; +import type { Dialog } from 'framework7/types'; import 'framework7/css'; import 'framework7/components/dialog/css'; @@ -79,11 +81,9 @@ import 'line-awesome/dist/line-awesome/css/line-awesome.css'; import VueDatePicker from '@vuepic/vue-datepicker'; import '@vuepic/vue-datepicker/dist/main.css'; -import { getVersion, getBuildTime } from '@/lib/version.ts'; import { getI18nOptions } from '@/locales/helpers.ts'; -import { - i18nFunctions -} from '@/locales/helper.js'; +// @ts-expect-error the above file is migrating to ts +import { i18nFunctions } from '@/locales/helper.js'; import { showAlert, showConfirm, @@ -201,13 +201,13 @@ app.component('ScheduleFrequencySheet', ScheduleFrequencySheet); app.directive('TextareaAutoSize', TextareaAutoSize); -app.config.globalProperties.$locale = i18nFunctions(i18n.global); +app.config.globalProperties['$locale'] = i18nFunctions(i18n.global); -app.config.globalProperties.$alert = (message, confirmCallback) => showAlert(message, confirmCallback, i18n.global.t); -app.config.globalProperties.$confirm = (message, confirmCallback, cancelCallback) => showConfirm(message, confirmCallback, cancelCallback, i18n.global.t); -app.config.globalProperties.$toast = (message, timeout) => showToast(message, timeout, i18n.global.t); -app.config.globalProperties.$showLoading = showLoading; -app.config.globalProperties.$hideLoading = hideLoading; -app.config.globalProperties.$routeBackOnError = routeBackOnError; +app.config.globalProperties['$alert'] = (message: string, confirmCallback: ((dialog: Dialog.Dialog, e: Event) => void) | undefined) => showAlert(message, confirmCallback, i18n.global.t); +app.config.globalProperties['$confirm'] = (message: string, confirmCallback: (dialog: Dialog.Dialog, e: Event) => void, cancelCallback: ((dialog: Dialog.Dialog, e: Event) => void) | undefined) => showConfirm(message, confirmCallback, cancelCallback, i18n.global.t); +app.config.globalProperties['$toast'] = (message: string, timeout: number | undefined) => showToast(message, timeout, i18n.global.t); +app.config.globalProperties['$showLoading'] = showLoading; +app.config.globalProperties['$hideLoading'] = hideLoading; +app.config.globalProperties['$routeBackOnError'] = routeBackOnError; app.mount('#app'); diff --git a/src/mobile.html b/src/mobile.html index 73fcd9b7..660975a0 100644 --- a/src/mobile.html +++ b/src/mobile.html @@ -66,6 +66,6 @@
- + diff --git a/src/router/desktop.js b/src/router/desktop.ts similarity index 73% rename from src/router/desktop.js rename to src/router/desktop.ts index e2bb7502..97825550 100644 --- a/src/router/desktop.js +++ b/src/router/desktop.ts @@ -1,4 +1,4 @@ -import { createRouter, createWebHashHistory } from 'vue-router'; +import { type NavigationGuardReturn, createRouter, createWebHashHistory } from 'vue-router'; import { TemplateType } from '@/core/template.ts'; import { isUserLogined, isUserUnlocked } from '@/lib/userstate.ts'; @@ -31,7 +31,7 @@ import AppSettingsPage from '@/views/desktop/app/AppSettingsPage.vue'; import ExchangeRatesPage from '@/views/desktop/ExchangeRatesPage.vue'; import AboutPage from '@/views/desktop/AboutPage.vue'; -function checkLogin() { +function checkLogin(): NavigationGuardReturn { if (!isUserLogined()) { return { path: '/login', @@ -45,9 +45,11 @@ function checkLogin() { replace: true }; } + + return true; } -function checkLocked() { +function checkLocked(): NavigationGuardReturn { if (!isUserLogined()) { return { path: '/login', @@ -61,9 +63,11 @@ function checkLocked() { replace: true }; } + + return true; } -function checkNotLogin() { +function checkNotLogin(): NavigationGuardReturn { if (isUserLogined() && !isUserUnlocked()) { return { path: '/unlock', @@ -77,6 +81,8 @@ function checkNotLogin() { replace: true }; } + + return true; } const router = createRouter({ @@ -97,16 +103,16 @@ const router = createRouter({ component: TransactionListPage, beforeEnter: checkLogin, props: route => ({ - initDateType: route.query.dateType, - initMaxTime: route.query.maxTime, - initMinTime: route.query.minTime, - initType: route.query.type, - initCategoryIds: route.query.categoryIds, - initAccountIds: route.query.accountIds, - initTagIds: route.query.tagIds, - initTagFilterType: route.query.tagFilterType, - initAmountFilter: route.query.amountFilter, - initKeyword: route.query.keyword + initDateType: route.query['dateType'], + initMaxTime: route.query['maxTime'], + initMinTime: route.query['minTime'], + initType: route.query['type'], + initCategoryIds: route.query['categoryIds'], + initAccountIds: route.query['accountIds'], + initTagIds: route.query['tagIds'], + initTagFilterType: route.query['tagFilterType'], + initAmountFilter: route.query['amountFilter'], + initKeyword: route.query['keyword'] }) }, { @@ -114,18 +120,18 @@ const router = createRouter({ component: StatisticsTransactionPage, beforeEnter: checkLogin, props: route => ({ - initAnalysisType: route.query.analysisType, - initChartDataType: route.query.chartDataType, - initChartType: route.query.chartType, - initChartDateType: route.query.chartDateType, - initStartTime: route.query.startTime, - initEndTime: route.query.endTime, - initFilterAccountIds: route.query.filterAccountIds, - initFilterCategoryIds: route.query.filterCategoryIds, - initTagIds: route.query.tagIds, - initTagFilterType: route.query.tagFilterType, - initSortingType: route.query.sortingType, - initTrendDateAggregationType: route.query.trendDateAggregationType + initAnalysisType: route.query['analysisType'], + initChartDataType: route.query['chartDataType'], + initChartType: route.query['chartType'], + initChartDateType: route.query['chartDateType'], + initStartTime: route.query['startTime'], + initEndTime: route.query['endTime'], + initFilterAccountIds: route.query['filterAccountIds'], + initFilterCategoryIds: route.query['filterCategoryIds'], + initTagIds: route.query['tagIds'], + initTagFilterType: route.query['tagFilterType'], + initSortingType: route.query['sortingType'], + initTrendDateAggregationType: route.query['trendDateAggregationType'] }) }, { @@ -169,7 +175,7 @@ const router = createRouter({ component: UserSettingsPage, beforeEnter: checkLogin, props: route => ({ - initTab: route.query.tab + initTab: route.query['tab'] }) }, { @@ -177,7 +183,7 @@ const router = createRouter({ component: AppSettingsPage, beforeEnter: checkLogin, props: route => ({ - initTab: route.query.tab + initTab: route.query['tab'] }) }, { @@ -201,9 +207,9 @@ const router = createRouter({ path: '/verify_email', component: VerifyEmailPage, props: route => ({ - email: route.query.email, - token: route.query.token, - hasValidEmailVerifyToken: route.query.emailSent === 'true' + email: route.query['email'], + token: route.query['token'], + hasValidEmailVerifyToken: route.query['emailSent'] === 'true' }) }, { @@ -215,7 +221,7 @@ const router = createRouter({ path: '/resetpassword', component: ResetPasswordPage, props: route => ({ - token: route.query.token + token: route.query['token'] }) }, { diff --git a/src/router/mobile.js b/src/router/mobile.ts similarity index 91% rename from src/router/mobile.js rename to src/router/mobile.ts index 62c062d8..d8e257c5 100644 --- a/src/router/mobile.js +++ b/src/router/mobile.ts @@ -1,3 +1,5 @@ +import type { Router } from 'framework7/types'; + import { isUserLogined, isUserUnlocked } from '@/lib/userstate.ts'; import HomePage from '@/views/mobile/HomePage.vue'; @@ -40,15 +42,15 @@ import TagListPage from '@/views/mobile/tags/ListPage.vue'; import TemplateListPage from '@/views/mobile/templates/ListPage.vue'; -function asyncResolve(component) { - return function({ resolve }) { +function asyncResolve(component: unknown): (ctx: Router.RouteCallbackCtx) => void { + return function({ resolve }: { resolve: ({ component }: { component: unknown }) => void }): void { return resolve({ component: component }); - }; + } as unknown as (ctx: Router.RouteCallbackCtx) => void; } -function checkLogin({ router, resolve, reject }) { +function checkLogin({ router, resolve, reject }: { router: Router.Router, resolve: () => void, reject: () => void }): void { if (!isUserLogined()) { reject(); router.navigate('/login', { @@ -70,7 +72,7 @@ function checkLogin({ router, resolve, reject }) { resolve(); } -function checkLocked({ router, resolve, reject }) { +function checkLocked({ router, resolve, reject }: { router: Router.Router, resolve: () => void, reject: () => void }): void { if (!isUserLogined()) { reject(); router.navigate('/login', { @@ -92,12 +94,12 @@ function checkLocked({ router, resolve, reject }) { resolve(); } -function checkNotLogin({ router, resolve, reject }) { +function checkNotLogin({ router, resolve, reject }: { router: Router.Router, resolve: () => void, reject: () => void }): void { if (isUserLogined() && !isUserUnlocked()) { reject(); router.navigate('/unlock', { clearPreviousHistory: true, - pushState: false + browserHistory: false }); return; } @@ -106,7 +108,7 @@ function checkNotLogin({ router, resolve, reject }) { reject(); router.navigate('/', { clearPreviousHistory: true, - pushState: false + browserHistory: false }); return; } @@ -114,7 +116,7 @@ function checkNotLogin({ router, resolve, reject }) { resolve(); } -const routes = [ +const routes: Router.RouteParameters[] = [ { path: '/', async: asyncResolve(HomePage), diff --git a/src/vue-shim.d.ts b/src/vue-shim.d.ts new file mode 100644 index 00000000..df9f4ba8 --- /dev/null +++ b/src/vue-shim.d.ts @@ -0,0 +1 @@ +declare module '*.vue';