feat: migrate simple Vue components to TypeScript

dashboard/src/components/LanguageSwitcher.vue

@@ -8,20 +8,26 @@
 	</Dropdown>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from "vue";
 import { Dropdown, Button } from "frappe-ui";
 import LucideLanguages from "~icons/lucide/languages";
 import { useLanguage } from "@/composables/useLanguage";
 
+interface Language {
+	name: string;
+	language_name?: string;
+	language_code: string;
+}
+
 const { availableLanguages, currentLanguage, changeLanguage, isSwitching } = useLanguage();
 
 const languageOptions = computed(() => {
 	if (!availableLanguages.data || availableLanguages.data.length === 0) {
 		return [];
 	}
 
-	return availableLanguages.data.map((lang) => ({
+	return availableLanguages.data.map((lang: Language) => ({
 		label: lang.language_name || lang.name,
 		icon: currentLanguage.value === lang.language_code ? "check" : undefined,
 		onClick: () => changeLanguage(lang.language_code),

dashboard/src/components/Navbar.vue

@@ -39,7 +39,7 @@
 	</div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import LucideSun from "~icons/lucide/sun";
 import LucideMoon from "~icons/lucide/moon";
 import { session } from "../data/session";

dashboard/src/components/SuccessMessage.vue

@@ -35,17 +35,16 @@
 	</Transition>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import LucideCheckCircle from "~icons/lucide/check-circle";
 
-const props = defineProps({
-	show: {
-		type: Boolean,
-		default: false,
-	},
-	isWebinar: {
-		type: Boolean,
-		default: false,
-	},
+interface Props {
+	show?: boolean;
+	isWebinar?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	show: false,
+	isWebinar: false,
 });
 </script>

dashboard/src/components/common/BackButton.vue

@@ -4,17 +4,20 @@
 	</Button>
 </template>
 
-<script setup>
-defineProps({
-	to: {
-		type: [String, Object],
-		default: null,
-	},
-	label: {
-		type: String,
-		default: "Back",
-	},
+<script setup lang="ts">
+import type { RouteLocationRaw } from "vue-router";
+
+interface Props {
+	to?: RouteLocationRaw | null;
+	label?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+	to: null,
+	label: "Back",
 });
 
-defineEmits(["click"]);
+defineEmits<{
+	(e: "click", event: MouseEvent): void;
+}>();
 </script>

dashboard/src/env.d.ts

@@ -0,0 +1,21 @@
+
+declare module "*.wav" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.mp3" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.svg" {
+  const value: string;
+  export default value;
+}
+
+declare module "~icons/*" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

dashboard/src/global.d.ts

@@ -10,19 +10,10 @@ declare global {
   }
 
   function __(str: string, values?: any[]): string;
+}
 
-  declare module "*.wav" {
-    const value: string;
-    export default value;
-  }
-
-  declare module "*.mp3" {
-    const value: string;
-    export default value;
-  }
-
-  declare module "*.svg" {
-    const value: string;
-    export default value;
+declare module "@vue/runtime-core" {
+  interface ComponentCustomProperties {
+    __(str: string, values?: any[]): string;
   }
 }

dashboard/src/layouts/Layout.vue

@@ -9,6 +9,6 @@
 	</div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import Navbar from "@/components/Navbar.vue";
 </script>