Use defineComponent, add prop types and emit types

src/components/VAllResultsGrid/VAudioCell.vue

@@ -2,13 +2,20 @@
   <VAudioTrack :audio="audio" layout="box" />
 </template>
 
-<script>
-import { defineComponent } from '@vue/composition-api'
+<script lang="ts">
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
+
+import type { AudioDetail } from '~/models/media'
 
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
 
 export default defineComponent({
   components: { VAudioTrack },
-  props: ['audio'],
+  props: {
+    audio: {
+      type: Object as PropType<AudioDetail>,
+      required: true,
+    },
+  },
 })
 </script>

src/components/VAudioDetails/VAudioDetails.vue

@@ -85,16 +85,26 @@
   </section>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
+
+import { AudioDetail } from '~/models/media'
+
 import VLink from '~/components/VLink.vue'
 import VAudioThumbnail from '~/components/VAudioThumbnail/VAudioThumbnail.vue'
 import VMediaTag from '~/components/VMediaTag/VMediaTag.vue'
+import VContentReportPopover from '~/components/VContentReport/VContentReportPopover.vue'
 
-export default {
+export default defineComponent({
   name: 'VAudioDetails',
-  components: { VAudioThumbnail, VLink, VMediaTag },
-  props: ['audio'],
-}
+  components: { VAudioThumbnail, VContentReportPopover, VLink, VMediaTag },
+  props: {
+    audio: {
+      type: Object as PropType<AudioDetail>,
+      required: true,
+    },
+  },
+})
 </script>
 
 <style scoped>

src/components/VAudioDetails/VRelatedAudio.vue

@@ -1,9 +1,12 @@
 <template>
-  <aside :aria-label="$t('audio-details.related-audios')">
+  <aside :aria-label="$t('audio-details.related-audios').toString()">
     <h4 class="text-2xl lg:text-3xl mb-6">
       {{ $t('audio-details.related-audios') }}
     </h4>
-    <div v-if="!fetchState.isError" class="flex flex-col gap-8 lg:gap-12 mb-12">
+    <div
+      v-if="!fetchState.fetchingError"
+      class="flex flex-col gap-8 lg:gap-12 mb-12"
+    >
       <VAudioTrack
         v-for="audio in media"
         :key="audio.id"
@@ -13,43 +16,50 @@
       />
       <LoadingIcon v-show="fetchState.isFetching" />
     </div>
-    <p v-show="!!fetchState.isError">
+    <p v-show="!!fetchState.fetchingError">
       {{ $t('media-details.related-error') }}
     </p>
   </aside>
 </template>
 
-<script>
-import { computed } from '@nuxtjs/composition-api'
+<script lang="ts">
+import {
+  computed,
+  ComputedRef,
+  defineComponent,
+  PropType,
+} from '@nuxtjs/composition-api'
 
 import { isMinScreen } from '~/composables/use-media-query'
+import type { FetchState } from '~/composables/use-fetch-state'
+import type { AudioDetail } from '~/models/media'
 
 import LoadingIcon from '~/components/LoadingIcon.vue'
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
 
-export default {
+export default defineComponent({
   name: 'VRelatedAudio',
   components: { VAudioTrack, LoadingIcon },
   props: {
     media: {
-      type: Array,
+      type: Array as PropType<AudioDetail[]>,
       required: true,
     },
     fetchState: {
-      type: Object,
+      type: Object as PropType<FetchState>,
       required: true,
     },
   },
   /**
    * Fetches related audios on `audioId` change
-   * @return {{audioTrackSize: import('@nuxtjs/composition-api').ComputedRef<"l" | "s"> }}
    */
   setup() {
     const isMinScreenMd = isMinScreen('md', { shouldPassInSSR: true })
-    const audioTrackSize = computed(() => {
-      return isMinScreenMd.value ? 'l' : 's'
-    })
+
+    const audioTrackSize: ComputedRef<'l' | 's'> = computed(() =>
+      isMinScreenMd.value ? 'l' : 's'
+    )
     return { audioTrackSize }
   },
-}
+})
 </script>

src/components/VContentReport/VContentReportForm.vue

@@ -107,8 +107,13 @@
   </div>
 </template>
 
-<script>
-import { computed, defineComponent, ref } from '@nuxtjs/composition-api'
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  PropType,
+  ref,
+} from '@nuxtjs/composition-api'
 
 import ReportService from '~/data/report-service'
 
@@ -122,6 +127,8 @@ import {
   DMCA_FORM_URL,
 } from '~/constants/content-report'
 
+import type { Media } from '~/models/media'
+
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VRadio from '~/components/VRadio/VRadio.vue'
@@ -142,8 +149,14 @@ export default defineComponent({
     VReportDescForm,
   },
   props: {
-    media: { required: true },
-    providerName: { required: true },
+    media: {
+      type: Object as PropType<Media>,
+      required: true,
+    },
+    providerName: {
+      type: String,
+      required: true,
+    },
     reportService: { required: false },
     closeFn: { required: true },
   },

src/components/VContentReport/VContentReportPopover.vue

@@ -30,8 +30,10 @@
   </VPopover>
 </template>
 
-<script>
-import { defineComponent } from '@nuxtjs/composition-api'
+<script lang="ts">
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
+
+import { Media } from '~/models/media'
 
 import VIconButton from '~/components/VIconButton/VIconButton.vue'
 import VPopover from '~/components/VPopover/VPopover.vue'
@@ -54,7 +56,7 @@ export default defineComponent({
      * the media item to report; This can either be an audio track or an image.
      */
     media: {
-      type: Object,
+      type: Object as PropType<Media>,
       required: true,
     },
   },

src/components/VErrorSection/VErrorImage.vue

@@ -15,7 +15,7 @@
 import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import type { License, LicenseVersion } from '~/constants/license'
-import { ErrorCode, errorCodes } from '~/constants/errors'
+import type { ErrorCode } from '~/constants/errors'
 import { AttributableMedia, getAttribution } from '~/utils/attribution-html'
 import { useI18n } from '~/composables/use-i18n'
 
@@ -40,7 +40,6 @@ export default defineComponent({
     errorCode: {
       type: String as PropType<ErrorCode>,
       required: true,
-      validator: (val: ErrorCode) => errorCodes.includes(val),
     },
   },
   setup(props) {

src/components/VFilters/VLicenseExplanation.vue

@@ -35,8 +35,12 @@
   </div>
 </template>
 
-<script>
-import { isLicense, getLicenseUrl } from '~/utils/license'
+<script lang="ts">
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
+
+import { getLicenseUrl, isLicense } from '~/utils/license'
+
+import type { License } from '~/constants/license'
 
 import VLicenseElements from '~/components/VLicense/VLicenseElements.vue'
 import VLink from '~/components/VLink.vue'
@@ -45,7 +49,7 @@ import VLink from '~/components/VLink.vue'
  * Renders the explanation of the license passed to it by breaking it down to
  * its constituent clauses.
  */
-export default {
+export default defineComponent({
   name: 'VLicenseExplanation',
   components: {
     VLicenseElements,
@@ -56,7 +60,7 @@ export default {
      * the code of the license whose elements need to be explained
      */
     license: {
-      type: String,
+      type: String as PropType<License>,
       required: true,
     },
   },
@@ -66,5 +70,5 @@ export default {
       getLicenseUrl,
     }
   },
-}
+})
 </script>

src/components/VImageDetails/VImageDetails.vue

@@ -43,10 +43,11 @@
   </section>
 </template>
 
-<script>
-import { computed, defineComponent } from '@nuxtjs/composition-api'
+<script lang="ts">
+import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import { useI18n } from '~/composables/use-i18n'
+import { ImageDetail } from '~/models/media'
 
 import VContentReportPopover from '~/components/VContentReport/VContentReportPopover.vue'
 import VLink from '~/components/VLink.vue'
@@ -57,7 +58,7 @@ export default defineComponent({
   components: { VContentReportPopover, VLink, VMediaTag },
   props: {
     image: {
-      type: Object,
+      type: Object as PropType<ImageDetail>,
       required: true,
     },
     imageWidth: {

src/components/VItemGroup/VItem.vue

@@ -49,13 +49,14 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import {
   defineComponent,
   inject,
   ref,
   computed,
   watch,
+  PropType,
 } from '@nuxtjs/composition-api'
 
 import { warn } from '~/utils/console'
@@ -96,9 +97,8 @@ export default defineComponent({
      * @variants 'button', 'VLink'
      */
     as: {
-      type: String,
+      type: String as PropType<'button' | 'VLink'>,
       default: 'button',
-      validator: (val) => ['button', 'VLink'].includes(val),
     },
   },
   /**