v.0.0.2 bring typing into game

package-lock.json

@@ -8,6 +8,7 @@
       "name": "tmp-app-creation",
       "version": "0.0.0",
       "dependencies": {
+        "@types/axios": "^0.9.36",
         "axios": "^1.20.0",
         "vue": "^3.5.42"
       },
@@ -816,6 +817,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/axios": {
+      "version": "0.9.36",
+      "resolved": "https://registry.npmjs.org/@types/axios/-/axios-0.9.36.tgz",
+      "integrity": "sha512-NLOpedx9o+rxo/X5ChbdiX6mS1atE4WHmEEIcR9NLenRVa5HoVjAvjafwU3FPTqnZEstpoqCaW7fagqSoTDNeg==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "24.13.5",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.13.5.tgz",

package.json

@@ -11,6 +11,7 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "@types/axios": "^0.9.36",
     "axios": "^1.20.0",
     "vue": "^3.5.42"
   },

src/App.vue

@@ -35,6 +35,8 @@ document.title = `${pkg.name} ${pkg.version}©2026`;
     rgba(180, 231, 207, 0.5),
     rgba(28, 72, 167, 0.6)
   );
-  width: 30%;
+  width: 32%;
+  padding: 5px;
+  border-radius: 15px;
 }
 </style>

src/components/FetchFromApi.vue

@@ -1,21 +1,24 @@
-<script setup>
-import { onMounted, ref, toRaw } from "vue";
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
 import axios from "axios";
+import type { Album } from "@/types/album";
 
-const albums = ref([]);
+const album_titles = ref<string[]>([]);
 
-onMounted(async () => {
+onMounted(async (): Promise<void> => {
   try {
     // Axios automatically parses the JSON response into 'response.data'
-    const albums_response = await axios.get(
+    const albums_response = await axios.get<Album[]>(
       "https://jsonplaceholder.typicode.com/albums",
     );
 
-    albums.value = albums_response.data
+    console.log("albums_response:", albums_response.data);
+
+    album_titles.value = albums_response.data
       .slice(0, 12)
       .map((album) => album.title);
 
-    console.log("alb_titles:", [...albums.value]);
+    console.log("album_titles:", [...album_titles.value]);
   } catch (error) {
     console.error("Error fetching albums!", error);
   }
@@ -26,8 +29,8 @@ onMounted(async () => {
   <div class="card">
     <h3>Albums List</h3>
     <ul>
-      <li v-for="(album, index) in albums" :key="index">
-        {{ album }}
+      <li v-for="(album_title, index) in album_titles" :key="index">
+        {{ album_title }}
       </li>
     </ul>
   </div>

src/components/FirstVueComponent.vue

@@ -1,11 +1,11 @@
-<script setup>
-import { onMounted, ref } from "vue";
+<script setup lang="ts">
+import { ref } from "vue";
 
-const msg = ref("Tom is building a vue template, oh yeah");
-const status = ref(true);
+const msg = ref<string>("Tom is building a vue template, oh yeah");
+const status = ref<boolean>(true);
 
 // Define function directly
-const toggleStatus = () => {
+const toggleStatus = (): void => {
   status.value = !status.value;
 };
 </script>

src/components/SecondVueComponent.vue

@@ -1,7 +1,7 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from "vue";
 
-const a = ref(true);
+const a = ref<boolean>(true);
 </script>
 
 <template>

src/types/album.ts

@@ -0,0 +1,5 @@
+export interface Album {
+  userId: number;
+  id: number;
+  title: string;
+}