[chores]: fix ts errors & warnings

src/components/Generator/ElementSlider.vue

@@ -16,6 +16,18 @@ import {
 } from "./elements";
 import type { Element } from "./types";
 
+interface SliderOptions {
+  Head: Element[];
+  Top: Element[];
+  Mouth: Element[];
+  Glasses: Element[];
+  Eyes: Element[];
+  Eyebrows: Element[];
+  Body: Element[];
+  Background: Element[];
+  Pet: Element[];
+}
+
 const route = useRoute();
 
 const emit = defineEmits(["setElement"]);
@@ -29,7 +41,7 @@ const elements = ref<Element[]>([]);
 const initElements = (elementType: string | boolean): void => {
   if (!elementType) elementType = route.query?.["element-type"] as string;
 
-  const ref = {
+  const ref: SliderOptions = {
     Head: Heads,
     Top: Tops,
     Mouth: Mouths,
@@ -42,7 +54,7 @@ const initElements = (elementType: string | boolean): void => {
   };
 
   if (elementType) {
-    elements.value = ref[elementType];
+    elements.value = ref[elementType as keyof typeof ref] as Element[];
   }
 };
 

src/components/Generator/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, computed } from "vue";
+import { ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import ChooseGender from "./ChooseGender.vue";
 import ElementTypeSidebar from "./ElementTypeSidebar.vue";
@@ -57,7 +57,7 @@ const setElementType = (type: ElementTypeItem): void => {
 };
 
 const setElement = (type: Element): void => {
-  const elementType = route.query["element-type"] as string;
+  const elementType = route.query["element-type"] as keyof Character;
 
   pushToQuery({
     key: elementType,
@@ -68,52 +68,24 @@ const setElement = (type: Element): void => {
   character.value[elementType] = type.icon;
 };
 
-const character = ref<Character>({});
+const character = ref<Character>({} as Character);
 const initCharacter = (): void => {
-  const { Top, Head, Mouth, Glasses, Eyes, Eyebrows, Body, Background, Pet } =
-    route.query as object;
-
-  if (Top) {
-    character.value.Top = elements.Tops.find((e) => e.name === Top).icon;
-  }
-
-  if (Head) {
-    character.value.Head = elements.Heads.find((e) => e.name === Head).icon;
-  }
-
-  if (Mouth) {
-    character.value.Mouth = elements.Mouths.find((e) => e.name === Mouth).icon;
-  }
-
-  if (Glasses) {
-    character.value.Glasses = elements.Glasses.find(
-      (e) => e.name === Glasses
-    ).icon;
-  }
-
-  if (Eyes) {
-    character.value.Eyes = elements.Eyes.find((e) => e.name === Eyes).icon;
-  }
-
-  if (Eyebrows) {
-    character.value.Eyebrows = elements.Eyebrows.find(
-      (e) => e.name === Eyebrows
-    ).icon;
-  }
-
-  if (Body) {
-    character.value.Body = elements.Bodies.find((e) => e.name === Body).icon;
-  }
-
-  if (Background) {
-    character.value.Background = elements.Backgrounds.find(
-      (e) => e.name === Background
-    ).icon;
-  }
+  if (!character.value) return;
 
-  if (Pet) {
-    character.value.Pet = elements.Pets.find((e) => e.name === Pet).icon;
-  }
+  const setCharacterProp = (propName: keyof Character, elements: any[]) => {
+    const element = elements.find((e) => e.name === route.query[propName]);
+    if (element) character.value[propName] = element.icon;
+  };
+
+  setCharacterProp("Top", elements.Tops);
+  setCharacterProp("Head", elements.Heads);
+  setCharacterProp("Mouth", elements.Mouths);
+  setCharacterProp("Glasses", elements.Glasses);
+  setCharacterProp("Eyes", elements.Eyes);
+  setCharacterProp("Eyebrows", elements.Eyebrows);
+  setCharacterProp("Body", elements.Bodies);
+  setCharacterProp("Background", elements.Backgrounds);
+  setCharacterProp("Pet", elements.Pets);
 };
 initCharacter();
 </script>

src/components/Generator/types.ts

@@ -29,15 +29,15 @@ export const genders: GenderOption[] = [
 ];
 
 export interface Character {
-  Top: string | null;
-  Head: string | null;
-  Mouth: string | null;
-  Glasses: string | null;
-  Eyes: string | null;
-  Eyebrows: string | null;
-  Body: string | null;
-  Background: string | null;
-  Pet: string | null;
+  Top: string | undefined;
+  Head: string | undefined;
+  Mouth: string | undefined;
+  Glasses: string | undefined;
+  Eyes: string | undefined;
+  Eyebrows: string | undefined;
+  Body: string | undefined;
+  Background: string | undefined;
+  Pet: string | undefined;
 }
 
 export interface ElementTypeItem {

tsconfig.json

@@ -1,4 +1,5 @@
 {
+
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
@@ -11,8 +12,14 @@
     "esModuleInterop": true,
     "lib": ["ESNext", "DOM"],
     "skipLibCheck": true,
-    "noEmit": true
+    "noEmit": true,
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+    }
   },
+
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }