Skip to content

Commit

Permalink
migrate entry and router file to typescript
Browse files Browse the repository at this point in the history
  • Loading branch information
@mayswind
mayswind committed Jan 25, 2025
1 parent 05d8f8b commit a0b9ca7
Show file tree
Hide file tree
Showing 8 changed files with 71 additions and 64 deletions.
7 changes: 4 additions & 3 deletions src/MobileApp.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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
},
Expand Down
11 changes: 4 additions & 7 deletions src/desktop-main.js → src/desktop-main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
translateError,
i18nFunctions
} from '@/locales/helper.js';
// @ts-expect-error the above file is migrating to ts
import { i18nFunctions } from '@/locales/helper.js';

import PinCodeInput from '@/components/common/PinCodeInput.vue';
import MapView from '@/components/common/MapView.vue';
Expand Down Expand Up @@ -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');
2 changes: 1 addition & 1 deletion src/desktop.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
22 changes: 11 additions & 11 deletions src/mobile-main.js → src/mobile-main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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');
2 changes: 1 addition & 1 deletion src/mobile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
70 changes: 38 additions & 32 deletions src/router/desktop.js → src/router/desktop.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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',
Expand All @@ -45,9 +45,11 @@ function checkLogin() {
replace: true
};
}

return true;
}

function checkLocked() {
function checkLocked(): NavigationGuardReturn {
if (!isUserLogined()) {
return {
path: '/login',
Expand All @@ -61,9 +63,11 @@ function checkLocked() {
replace: true
};
}

return true;
}

function checkNotLogin() {
function checkNotLogin(): NavigationGuardReturn {
if (isUserLogined() && !isUserUnlocked()) {
return {
path: '/unlock',
Expand All @@ -77,6 +81,8 @@ function checkNotLogin() {
replace: true
};
}

return true;
}

const router = createRouter({
Expand All @@ -97,35 +103,35 @@ 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']
})
},
{
path: '/statistics/transaction',
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']
})
},
{
Expand Down Expand Up @@ -169,15 +175,15 @@ const router = createRouter({
component: UserSettingsPage,
beforeEnter: checkLogin,
props: route => ({
initTab: route.query.tab
initTab: route.query['tab']
})
},
{
path: '/app/settings',
component: AppSettingsPage,
beforeEnter: checkLogin,
props: route => ({
initTab: route.query.tab
initTab: route.query['tab']
})
},
{
Expand All @@ -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'
})
},
{
Expand All @@ -215,7 +221,7 @@ const router = createRouter({
path: '/resetpassword',
component: ResetPasswordPage,
props: route => ({
token: route.query.token
token: route.query['token']
})
},
{
Expand Down
20 changes: 11 additions & 9 deletions src/router/mobile.js → src/router/mobile.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import type { Router } from 'framework7/types';

import { isUserLogined, isUserUnlocked } from '@/lib/userstate.ts';

import HomePage from '@/views/mobile/HomePage.vue';
Expand Down Expand Up @@ -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', {
Expand All @@ -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', {
Expand All @@ -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;
}
Expand All @@ -106,15 +108,15 @@ function checkNotLogin({ router, resolve, reject }) {
reject();
router.navigate('/', {
clearPreviousHistory: true,
pushState: false
browserHistory: false
});
return;
}

resolve();
}

const routes = [
const routes: Router.RouteParameters[] = [
{
path: '/',
async: asyncResolve(HomePage),
Expand Down
1 change: 1 addition & 0 deletions src/vue-shim.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
declare module '*.vue';

0 comments on commit a0b9ca7

Please sign in to comment.