build(frontend): migrate js to ts

Author: haxgun

frontend/components.d.ts

@@ -0,0 +1,30 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ASpin: typeof import('ant-design-vue/es')['Spin']
+    Button: typeof import('./src/components/ui/Button.vue')['default']
+    Footer: typeof import('./src/components/Footer.vue')['default']
+    Highlights: typeof import('./src/components/Highlights.vue')['default']
+    IconBillCheck: typeof import('./src/components/icons/IconBillCheck.vue')['default']
+    IconGithub: typeof import('./src/components/icons/IconGithub.vue')['default']
+    IconHeart: typeof import('./src/components/icons/IconHeart.vue')['default']
+    IconMagicStick: typeof import('./src/components/icons/IconMagicStick.vue')['default']
+    IconPalette: typeof import('./src/components/icons/IconPalette.vue')['default']
+    IconTelegram: typeof import('./src/components/icons/IconTelegram.vue')['default']
+    IconTwitch: typeof import('./src/components/icons/IconTwitch.vue')['default']
+    IconValory: typeof import('./src/components/icons/IconValory.vue')['default']
+    IconValoryBG: typeof import('./src/components/icons/IconValoryBG.vue')['default']
+    Input: typeof import('./src/components/ui/Input.vue')['default']
+    LanguageSwitcher: typeof import('./src/components/ui/LanguageSwitcher.vue')['default']
+    Overlay: typeof import('./src/components/Overlay.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Switch: typeof import('./src/components/ui/Switch.vue')['default']
+  }
+}

frontend/index.html

@@ -40,6 +40,6 @@
       Enable JavaScript to enjoy all the features of this app.
     </noscript>
     <div id="app"></div>
-    <script type="module" src="./src/main.js"></script>
+    <script type="module" src="./src/main.ts"></script>
   </body>
 </html>

frontend/package.json

@@ -31,6 +31,7 @@
     "postcss-uncss": "^0.17.0",
     "query-string": "^8.1.0",
     "set-interval-async": "^3.0.3",
+    "typescript": "^5.7.2",
     "uncss": "^0.17.3",
     "v-click-outside": "^3.2.0",
     "vue-i18n": "9",
@@ -41,8 +42,9 @@
     "@plugin-web-update-notification/vite": "^1.6.6",
     "@rushstack/eslint-patch": "^1.3.3",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@vitejs/plugin-vue": "^4.4.0",
+    "@vitejs/plugin-vue": "^4.6.2",
     "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/runtime-dom": "^3.5.13",
     "autoprefixer": "^10.4.16",
     "eslint": "^9.15.0",
     "eslint-config-prettier": "^9.0.0",
@@ -55,6 +57,7 @@
     "unplugin-vue-components": "^0.25.2",
     "vite": "^4.4.11",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue-tsc": "^2.1.10"
   }
 }

frontend/src/App.vue

@@ -1,21 +1,23 @@
-<script setup>
-import Highlights from '@/components/Highlights.vue'
-import { LoadingOutlined } from '@ant-design/icons-vue'
-import { ref } from 'vue'
-import { h } from 'vue'
-import { useRouter } from 'vue-router'
+<script setup lang="ts">
+import Highlights from '@/components/Highlights.vue';
+import { LoadingOutlined } from '@ant-design/icons-vue';
+import { ref, h } from 'vue';
+import { useRouter } from 'vue-router';
 
-const isRouterReady = ref(false)
-const router = useRouter()
+const isRouterReady = ref<boolean>(false);
 
-router.isReady().finally(() => (isRouterReady.value = true))
+const router = useRouter();
+
+router.isReady().finally(() => {
+  isRouterReady.value = true;
+});
 
 const indicator = h(LoadingOutlined, {
   style: {
-    fontSize: '36px'
+    fontSize: '36px',
   },
-  spin: true
-})
+  spin: true,
+});
 </script>
 
 <template>

frontend/src/components/Footer.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import IconGithub from '@/components/icons/IconGithub.vue'
 import IconHeart from '@/components/icons/IconHeart.vue'
 import IconTelegram from '@/components/icons/IconTelegram.vue'

frontend/src/components/Highlights.vue

@@ -1,4 +1,4 @@
-<script setup></script>
+<script setup lang="ts"></script>
 
 <template>
   <div class="blicks">

frontend/src/components/Overlay.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import IconValory from '@/components/icons/IconValory.vue'
 </script>
 

frontend/src/components/ui/Button.vue

@@ -1,16 +1,11 @@
-<script setup>
-defineProps({
-  variant: {
-    type: String
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  type: {
-    type: String
-  }
-})
+<script setup lang="ts">
+interface ButtonProps {
+  variant?: string;
+  disabled?: boolean;
+  type?: string;
+}
+
+defineProps<ButtonProps>();
 </script>
 
 <template>

frontend/src/components/ui/Input.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 defineProps(['modelValue', 'placeholder'])
 </script>
 

frontend/src/components/ui/LanguageSwitcher.vue

@@ -1,10 +1,15 @@
-<script setup>
-import { useLocalStorage } from '@vueuse/core'
-import { NConfigProvider, NDropdown, darkTheme } from 'naive-ui'
-import { useI18n } from 'vue-i18n'
+<script setup lang="ts">
+import { useLocalStorage } from '@vueuse/core';
+import { NConfigProvider, NDropdown, NButton, darkTheme } from 'naive-ui';
+import { useI18n } from 'vue-i18n';
 
-const { locale, availableLocales } = useI18n()
-const localStorageLocale = useLocalStorage('valoryLocale', 'en')
+const { locale, availableLocales } = useI18n<{ locale: string; availableLocales: string[] }>();
+const localStorageLocale = useLocalStorage<string>('valoryLocale', 'en');
+
+const handleSelectLocale = (selectedLocale: string) => {
+  locale.value = selectedLocale;
+  localStorageLocale.value = selectedLocale;
+};
 </script>
 
 <template>
@@ -19,12 +24,7 @@ const localStorageLocale = useLocalStorage('valoryLocale', 'en')
           }))
         "
         size="medium"
-        @select="
-          (l) => {
-            locale = l
-            localStorageLocale = l
-          }
-        "
+        @select="handleSelectLocale"
       >
         <n-button circle quaternary style="padding: 5px; font-size: 25px">
           <Icon :icon="`flag:${$t('flag')}-4x3`" width="18" height="18" />