Upgrade dependencies

And adapt to recent vue-tsc typing changes

package.json

@@ -14,7 +14,7 @@
     "amplitudejs": "^5.3.2",
     "ansi-regex": "^5.0.1",
     "axios": "^0.24.0",
-    "class-transformer": "^0.4.0",
+    "class-transformer": "^0.5.0",
     "mitt": "^3.0.0",
     "quicktype": "^15.0.260",
     "reflect-metadata": "^0.1.13",
@@ -29,6 +29,6 @@
     "@vue/compiler-sfc": "^3.2.28",
     "typescript": "^4.5.5",
     "vite": "^2.7.13",
-    "vue-tsc": "^0.2.3"
+    "vue-tsc": "^0.31"
   }
 }

src/components/Album/AlbumFavoriteView.vue

@@ -6,18 +6,19 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { defineComponent } from 'vue'
 import { plainToClass } from 'class-transformer'
 import AlbumCover from './Lib/AlbumCover.vue'
 import AlbumListItem from './Lib/AlbumListItem.vue'
 import Album from '../../model/Album'
 import HttpRequest from '../Lib/HttpRequest'
+import AlbumInterface from '../../model/AlbumInterface'
 
 export default defineComponent({
-  name: 'AlbumList',
+  name: 'AlbumFavoriteView',
   data() {
     return { 
-      albumList: [] as PropType<Array<Album>>
+      albumList: [] as Array<AlbumInterface>
     }
   },
   components: {

src/components/Album/AlbumListView.vue

@@ -11,18 +11,19 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { defineComponent } from 'vue'
 import { plainToClass } from 'class-transformer'
 import Album from '../../model/Album'
 import AlbumListItem from './Lib/AlbumListItem.vue'
 import HttpRequest from '../Lib/HttpRequest'
 import formatDurationLength from '../Lib/FormatDurationLength'
+import AlbumInterface from '../../model/AlbumInterface'
 
 export default defineComponent({
   name: 'AlbumList',
   data() {
     return { 
-      albumList: [] as PropType<Array<Album>>,
+      albumList: [] as Array<AlbumInterface>,
       quantity: 0,
     }
   },

src/components/Album/Lib/AlbumCover.vue

@@ -10,13 +10,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import Player from '../../Lib/Player';
-import Album from '../../../model/Album';
+import AlbumInterface from '../../../model/AlbumInterface';
 
 export default defineComponent({
   name: 'AlbumCover',
   props: {
     album: {
-      type: Album,
+      type: Object as () => AlbumInterface,
       required: true
     },
     size: {
@@ -25,7 +25,7 @@ export default defineComponent({
     }
   },
   methods: {
-    async play(album: Album): Promise<void> {
+    async play(album: AlbumInterface): Promise<void> {
       Player.playAlbum(album.getId(), this);
     }
   }

src/components/Album/Lib/AlbumListItem.vue

@@ -15,13 +15,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import AlbumCover from './AlbumCover.vue';
-import Album from '../../../model/Album';
+import AlbumInterface from '../../../model/AlbumInterface';
 
 export default defineComponent({
   name: 'AlbumListItem',
   props: {
     album: {
-      type: Album,
+      type: Object as () => AlbumInterface,
       required: true
     }
   },

src/components/Artist/ArtistListView.vue

@@ -27,7 +27,7 @@ export default defineComponent({
   name: 'ArtistList',
   data() {
     return { 
-      artistList: [] as PropType<Array<Artist>>
+      artistList: []
     }
   },
   async created(): Promise<void> {

src/components/Home/LoginView.vue

@@ -22,11 +22,12 @@
   </div>
 </template>
 <script lang="ts">
+import { defineComponent } from '@vue/runtime-core';
 import { AxiosResponse } from 'axios';
 import HttpRequest from '../Lib/HttpRequest';
 
-export default {
-  data() {
+export default defineComponent({
+  setup() {
     return {
       username: '',
       password: '',
@@ -64,7 +65,7 @@ export default {
       });
     }
   }
-};
+});
 </script>
 <style scoped>
 div.errorMessage {

src/components/Random/RandomSongsView.vue

@@ -44,7 +44,7 @@
 <script lang="ts">
 import { AxiosResponse } from 'axios';
 import { plainToClass } from 'class-transformer';
-import { defineComponent, PropType } from 'vue'
+import { defineComponent } from 'vue'
 import { useRoute } from 'vue-router';
 import SongListItem from '../../model/SongListItem';
 import SongListItemInterface from '../../model/SongListItemInterface';
@@ -56,7 +56,7 @@ import SongCover from '../Lib/SongCover.vue'
 export default defineComponent({
   data() {
     return {
-      songList: [] as PropType<Array<SongListItemInterface>>,
+      songList: [] as Array<SongListItemInterface>,
       limit: 100,
       length: 0
     };

src/model/Album.ts

@@ -1,4 +1,6 @@
-export default class Album {
+import AlbumInterface from "./AlbumInterface";
+
+export default class Album implements AlbumInterface {
   private id: number = 0;
   private name: string = '';
   private artistId: number = 0;

src/model/AlbumInterface.ts

@@ -0,0 +1,12 @@
+export default interface AlbumInterface {
+
+  getId(): number;
+
+  getName(): string;
+
+  getArtistId(): number;
+
+  getCover(): string;
+
+  getArtistName(): string;
+}