migrate entry and router file to typescript

src/MobileApp.vue

@@ -7,9 +7,9 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from 'vue';
 
-import type { Notification, Actions, Dialog, Popover, Popup, Sheet } from 'framework7/types';
+import type { Framework7Parameters, Notification, Actions, Dialog, Popover, Popup, Sheet } from 'framework7/types';
 import { f7ready } from 'framework7-vue';
-import routes from './router/mobile.js';
+import routes from './router/mobile.ts';
 
 import { useI18n } from '@/locales/helpers.ts';
 
@@ -38,7 +38,7 @@ const userStore = useUserStore();
 const tokensStore = useTokensStore();
 const exchangeRatesStore = useExchangeRatesStore();
 
-const f7params = ref<object>({
+const f7params = ref<Framework7Parameters>({
     name: 'ezBookkeeping',
     theme: 'ios',
     colors: {
@@ -70,6 +70,7 @@ const f7params = ref<object>({
         closeOnEscape: true
     },
     dialog: {
+        // @ts-expect-error there is an "animate" field in dialog parameters, but it is not declared in the type definition file
         animate: isEnableAnimate(),
         backdrop: true
     },

src/desktop-main.ts

@@ -68,14 +68,11 @@ import '@vuepic/vue-datepicker/dist/main.css';
 
 import draggable from 'vuedraggable';
 
-import router from '@/router/desktop.js';
+import router from '@/router/desktop.ts';
 
-import { getVersion, getBuildTime } from '@/lib/version.ts';
 import { getI18nOptions } from '@/locales/helpers.ts';
-import {
+// @ts-expect-error the above file is migrating to ts
-    translateError,
+import { i18nFunctions } from '@/locales/helper.js';
-    i18nFunctions
-} from '@/locales/helper.js';
 
 import PinCodeInput from '@/components/common/PinCodeInput.vue';
 import MapView from '@/components/common/MapView.vue';
@@ -468,6 +465,6 @@ app.component('DateRangeSelectionDialog', DateRangeSelectionDialog);
 app.component('MonthRangeSelectionDialog', MonthRangeSelectionDialog);
 app.component('SwitchToMobileDialog', SwitchToMobileDialog);
 
-app.config.globalProperties.$locale = i18nFunctions(i18n.global);
+app.config.globalProperties['$locale'] = i18nFunctions(i18n.global);
 
 app.mount('#app');

src/desktop.html

@@ -66,6 +66,6 @@
     </noscript>
     <div id="app"></div>
 
-    <script type="module" src="./desktop-main.js"></script>
+    <script type="module" src="./desktop-main.ts"></script>
 </body>
 </html>

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 {
+// @ts-expect-error the above file is migrating to ts
-    i18nFunctions
+import { i18nFunctions } from '@/locales/helper.js';
-} 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['$alert'] = (message: string, confirmCallback: ((dialog: Dialog.Dialog, e: Event) => void) | undefined) => showAlert(message, confirmCallback, i18n.global.t);
-app.config.globalProperties.$confirm = (message, confirmCallback, cancelCallback) => showConfirm(message, confirmCallback, cancelCallback, 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, timeout) => showToast(message, timeout, 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['$showLoading'] = showLoading;
-app.config.globalProperties.$hideLoading = hideLoading;
+app.config.globalProperties['$hideLoading'] = hideLoading;
-app.config.globalProperties.$routeBackOnError = routeBackOnError;
+app.config.globalProperties['$routeBackOnError'] = routeBackOnError;
 
 app.mount('#app');

src/mobile.html

@@ -66,6 +66,6 @@
     </noscript>
     <div id="app"></div>
 
-    <script type="module" src="./mobile-main.js"></script>
+    <script type="module" src="./mobile-main.ts"></script>
 </body>
 </html>

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,
+                        initDateType: route.query['dateType'],
-                        initMaxTime: route.query.maxTime,
+                        initMaxTime: route.query['maxTime'],
-                        initMinTime: route.query.minTime,
+                        initMinTime: route.query['minTime'],
-                        initType: route.query.type,
+                        initType: route.query['type'],
-                        initCategoryIds: route.query.categoryIds,
+                        initCategoryIds: route.query['categoryIds'],
-                        initAccountIds: route.query.accountIds,
+                        initAccountIds: route.query['accountIds'],
-                        initTagIds: route.query.tagIds,
+                        initTagIds: route.query['tagIds'],
-                        initTagFilterType: route.query.tagFilterType,
+                        initTagFilterType: route.query['tagFilterType'],
-                        initAmountFilter: route.query.amountFilter,
+                        initAmountFilter: route.query['amountFilter'],
-                        initKeyword: route.query.keyword
+                        initKeyword: route.query['keyword']
                     })
                 },
                 {
@@ -114,18 +120,18 @@ const router = createRouter({
                     component: StatisticsTransactionPage,
                     beforeEnter: checkLogin,
                     props: route => ({
-                        initAnalysisType: route.query.analysisType,
+                        initAnalysisType: route.query['analysisType'],
-                        initChartDataType: route.query.chartDataType,
+                        initChartDataType: route.query['chartDataType'],
-                        initChartType: route.query.chartType,
+                        initChartType: route.query['chartType'],
-                        initChartDateType: route.query.chartDateType,
+                        initChartDateType: route.query['chartDateType'],
-                        initStartTime: route.query.startTime,
+                        initStartTime: route.query['startTime'],
-                        initEndTime: route.query.endTime,
+                        initEndTime: route.query['endTime'],
-                        initFilterAccountIds: route.query.filterAccountIds,
+                        initFilterAccountIds: route.query['filterAccountIds'],
-                        initFilterCategoryIds: route.query.filterCategoryIds,
+                        initFilterCategoryIds: route.query['filterCategoryIds'],
-                        initTagIds: route.query.tagIds,
+                        initTagIds: route.query['tagIds'],
-                        initTagFilterType: route.query.tagFilterType,
+                        initTagFilterType: route.query['tagFilterType'],
-                        initSortingType: route.query.sortingType,
+                        initSortingType: route.query['sortingType'],
-                        initTrendDateAggregationType: route.query.trendDateAggregationType
+                        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,
+                email: route.query['email'],
-                token: route.query.token,
+                token: route.query['token'],
-                hasValidEmailVerifyToken: route.query.emailSent === 'true'
+                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']
             })
         },
         {

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) {
+function asyncResolve(component: unknown): (ctx: Router.RouteCallbackCtx) => void {
-    return function({ resolve }) {
+    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),

src/vue-shim.d.ts

@@ -0,0 +1 @@
+declare module '*.vue';