refactor: ItemMetadata.vue, ManifestMetadata.vue, MetadataItem.vue to Typescript

src/components/metadata/ItemMetadata.vue

@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 
 import { computed } from 'vue';
 import { useStore } from 'vuex';
@@ -15,13 +15,13 @@ import MetadataItem from '@/components/metadata/MetadataItem.vue';
 
 const store = useStore();
 
-const item = computed(() => store.getters['contents/item']);
-const itemUrl = computed(() => store.getters['contents/itemUrl']);
-const manifest = computed(() => store.getters['contents/manifest']);
-const itemsCount = computed(() => manifest.value?.sequence.length);
-const labels = computed(() => store.getters['config/config'].labels);
-const number = computed(() => (manifest.value ? manifest.value.sequence.findIndex(({ id }) => id === itemUrl.value) + 1 : 1));
-const total = computed(() => itemsCount.value ?? 1);
+const item = computed<Item>(() => store.getters['contents/item']);
+const itemUrl = computed<string>(() => store.getters['contents/itemUrl']);
+const manifest = computed<Manifest>(() => store.getters['contents/manifest']);
+const itemsCount = computed<number>(() => manifest.value?.sequence.length);
+const labels = computed<Labels>(() => store.getters['config/config'].labels);
+const number = computed<number>(() => (manifest.value ? manifest.value.sequence.findIndex(({ id }) => id === itemUrl.value) + 1 : 1));
+const total = computed<number>(() => itemsCount.value ?? 1);
 const metadata = computed(() => (
   [
     { key: 'label', value: item.value.n },

src/components/metadata/ManifestMetadata.vue

@@ -8,7 +8,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 import { useStore } from 'vuex';
 import MetadataItem from '@/components/metadata/MetadataItem.vue';
@@ -16,12 +16,12 @@ import Actor from '@/components/metadata/Actor.vue';
 
 const store = useStore();
 
-const manifest = computed(() => store.getters['contents/manifest']);
-const manifests = computed(() => store.getters['contents/manifests']);
-const manifestHasItems = computed(() => manifest.value?.sequence.length > 0);
-const number = computed(() => (manifests.value !== null ? manifests.value.findIndex(({ id }) => id === manifest.value.id) + 1 : 1));
-const total = computed(() => (manifests.value !== null ? manifests.value.length : 1));
-const labels = computed(() => store.getters['config/config'].labels);
+const manifest = computed<Manifest>(() => store.getters['contents/manifest']);
+const manifests = computed<Manifest[]>(() => store.getters['contents/manifests']);
+const manifestHasItems = computed<boolean>(() => manifest.value?.sequence.length > 0);
+const number = computed<number>(() => (manifests.value !== null ? manifests.value.findIndex(({ id }) => id === manifest.value.id) + 1 : 1));
+const total = computed<number>(() => (manifests.value !== null ? manifests.value.length : 1));
+const labels = computed<Labels>(() => store.getters['config/config'].labels);
 const metadata = computed(() => {
   if (!manifest.value) return [];
   return [
@@ -33,7 +33,7 @@ const metadata = computed(() => {
     ...(manifest.value.metadata || []),
   ];
 });
-const actor = computed(() => manifest.value?.actor);
+const actor = computed<Actor[] | undefined>(() => manifest.value?.actor);
 </script>
 
 <style scoped>

src/components/metadata/MetadataItem.vue

@@ -9,19 +9,19 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 import MetadataLink from '@/components/metadata/MetadataLink.vue';
 import MetadataValue from '@/components/metadata/MetadataValue.vue';
 
-const props = defineProps({
-  item: Object,
-});
+const props = defineProps<{
+  item: Metadata,
+}>();
 
-const label = computed(() => props.item?.key || 'other');
-const childItems = computed(() => props.item?.metadata || []);
+const label = computed<string>(() => props.item?.key || 'other');
+const childItems = computed(<Metadata>() => props.item?.metadata || []);
 
-function isLink() {
+function isLink(): boolean {
   const regex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig;
   const matches = (typeof props.item?.key === 'string') ? props.item?.key?.match(regex) : null;
 

src/types.d.ts

@@ -22,7 +22,14 @@ declare global {
         modules?: Module[]
     
     }
-    
+
+    interface Content {
+        '@context': string,
+        url: string,
+        type: string,
+        integrity?: DataIntegrity
+    }
+
     interface DataIntegrity {
         type: string,
         value: string
@@ -42,6 +49,29 @@ declare global {
         license: License
     }
 
+    interface Item {
+        '@context': string,
+        textapi: string,
+        id: string,
+        title?: Title[],
+        type: ItemType,
+        n?: string,
+        lang: ItemLangCode[],
+        langAlt?: string[],
+        content: Content[],
+        description?: string,
+        image?: Image,
+        annotationCollection?: string,
+        modules?: Module[]
+    }
+
+    type ItemType = 'section' | 'page' | 'full'
+    type ItemLangCode = 'eng' | 'fra' | 'deu' | 'ara' | 'arb' | 'arz' | 'apc' | 'acm' | 'zho' | 'cmn' | 'yue' | 'nan' | 'tha' | 'sou' | 'nod' | 'khb' | 'lao/tts' | 'pht'
+
+    interface Labels {
+        item: string,
+        manifest?: string
+    }
     interface License {
         id: string,
         notes?: string