feat(components): HtmlElementEvent type and canvas testing

nuxt.config.ts

@@ -13,6 +13,7 @@ export default defineNuxtConfig({
   },
   css: ['@/assets/styles/main.scss'],
   typescript: {
+    typeCheck: true,
     shim: false,
   },
   modules: [

package.json

@@ -21,8 +21,9 @@
   "devDependencies": {
     "@vueuse/core": "^9.3.1",
     "@vueuse/nuxt": "^9.3.1",
-    "nuxt": "^3.0.0",
     "husky": "^8.0.2",
-    "sass": "^1.55.0"
+    "nuxt": "^3.0.0",
+    "sass": "^1.55.0",
+    "vue-tsc": "^1.0.9"
   }
 }

src/components/accordion.vue

@@ -12,7 +12,7 @@ const showForm = ref<boolean>(false);
         <IconOpen v-else/>
       </button>
     </div>
-    <div class="content" v-if="showForm">
+    <div class="content" v-show="showForm">
       <slot/>
     </div>
   </section>

src/components/board.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const canvas = ref<HTMLCanvasElement | null>(null);
+
+onMounted(() => {
+  if (!canvas.value) return;
+
+  const ctx = canvas.value.getContext("2d");
+
+  if (!ctx) return;
+
+  ctx.fillStyle = "red";
+  ctx.fillRect(0, 0, Math.random() * 100, Math.random() * 100);
+});
+</script>
+
+<template>
+  <canvas ref="canvas" />
+</template>

src/components/form/range.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import {HTMLElementEvent} from '@/types/dom';
+
 const {
   label,
   min,
@@ -14,10 +16,10 @@ const emit = defineEmits<{
 const value = ref<number>(defaultValue);
 
 const onChange = (event: Event) => {
-  value.value = (event.target as HTMLInputElement).valueAsNumber;
+  const {target} = event as HTMLElementEvent<HTMLInputElement>;
+  value.value = target.valueAsNumber;
   emit('change', value.value);
 };
-
 </script>
 
 <template>

src/layouts/default.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+
 const showMenu = ref<boolean>(true);
 </script>
 
@@ -17,7 +18,7 @@ const showMenu = ref<boolean>(true);
         </button>
       </template>
     </div>
-    <canvas class="canvas"/>
+    <Board class="canvas"/>
   </div>
 </template>
 

src/types/dom.ts

@@ -0,0 +1,3 @@
+export type HTMLElementEvent<T extends HTMLElement> = Event & {
+  target: T;
+}