refactor: a few 'metadata' and the 'annotation' components to Typescript

src/components/annotations/AnnotationIcon.vue

@@ -6,12 +6,14 @@
   />
 </template>
 
-<script setup>
+<script setup lang="ts">
 import BaseIcon from '@/components/base/BaseIcon.vue';
 
-const props = defineProps({
-  name: String,
-});
+interface Props {
+  name: string
+}
+const props = defineProps<Props>()
+
 </script>
 
 <style scoped>

src/components/annotations/AnnotationsList.vue

@@ -21,40 +21,42 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed, watch } from 'vue';
 import AnnotationIcon from '@/components/annotations/AnnotationIcon.vue';
 
-const props = defineProps({
-  activeAnnotation: {
-    type: Object,
-    default: () => {},
-  },
-  configuredAnnotations: {
-    type: Array,
-    default: () => [],
-  },
-  toggle: {
-    type: Function,
-    default: () => null,
-  },
-  types: Array,
-});
+interface AnnotationTypesMapping {
+  [key: string]: string | 'annotation'
+ }
 
-const annotationTypesMapping = computed(() => (
+export interface Props {
+  activeAnnotation: ActiveAnnotation
+  configuredAnnotations: Annotation[],
+  toggle: Function,
+  types: any[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  activeAnnotation: () => <ActiveAnnotation>{},
+  configuredAnnotations: () => <Annotation[]> [],
+  toggle: () => null,
+})
+
+const annotationTypesMapping = computed<AnnotationTypesMapping>(() => (
+  // it returns an object with a varying number of 'key', 'value' pairs
   props.types.reduce((prev, curr) => {
     prev[curr.name] = curr.annotationType || 'annotation';
     return prev;
   }, {})
 ));
 
-function isActive(annotation) {
+function isActive(annotation: Annotation): boolean {
   return !!props.activeAnnotation[annotation.id];
 }
-function isText(annotation) {
+function isText(annotation: Annotation): boolean {
   return annotationTypesMapping.value[annotation.body['x-content-type']] === 'text';
 }
-function getIconName(typeName) {
+function getIconName(typeName: string): string {
   return props.types.find(({ name }) => name === typeName)?.icon || 'biPencilSquare';
 }
 </script>

src/components/annotations/AnnotationsView.vue

@@ -19,7 +19,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {
   computed, onBeforeUnmount, ref, watch,
 } from 'vue';
@@ -37,10 +37,10 @@ const store = useStore();
 const message = ref('no_annotations_in_view');
 
 const config = computed(() => store.getters['config/config']);
-const annotations = computed(() => store.getters['annotations/annotations']);
-const activeAnnotations = computed(() => store.getters['annotations/activeAnnotations']);
-const filteredAnnotations = computed(() => store.getters['annotations/filteredAnnotations']);
-const activeContentUrl = computed(() => store.getters['contents/activeContentUrl']);
+const annotations = computed<Annotation[]>(() => store.getters['annotations/annotations']);
+const activeAnnotations = computed<ActiveAnnotation>(() => store.getters['annotations/activeAnnotations']);
+const filteredAnnotations = computed<Annotation[]>(() => store.getters['annotations/filteredAnnotations']);
+const activeContentUrl = computed<string>(() => store.getters['contents/activeContentUrl']);
 const updateTextHighlighting = computed(() =>
   // We need to make sure that annotations are loaded (this.annotations),
   // the text HTML is present in DOM (this.activeContentUrl is set after DOM update)
@@ -59,11 +59,11 @@ watch(
   { immediate: true },
 );
 
-function addAnnotation(id) {
+function addAnnotation(id: string) {
   store.dispatch('annotations/addActiveAnnotation', id);
 }
 
-function removeAnnotation(id) {
+function removeAnnotation(id: string) {
   store.dispatch('annotations/removeActiveAnnotation', id);
 }
 

src/components/metadata/MetadataLink.vue

@@ -15,18 +15,17 @@
   </a>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import BaseIcon from '@/components/base/BaseIcon.vue';
 
-const props = defineProps({
-  url: {
-    type: String,
-    default: () => '',
-  },
-  text: {
-    type: String,
-    default: () => '',
-  },
-});
+export interface Props {
+  url: string,
+  text: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  url: '',
+  text: ''
+})
 
 </script>

src/components/metadata/MetadataValue.vue

@@ -4,13 +4,15 @@
   </div>
 </template>
 
-<script setup>
-const props = defineProps({
-  value: {
-    type: String,
-    default: () => '',
-  },
-});
+<script setup lang="ts">
+
+export interface Props {
+  value?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: ''
+})
 </script>
 
 <style lang="scss" scoped>

src/types.d.ts

@@ -1,14 +1,42 @@
 declare global {
 
+    interface Annotation {
+        body: AnnotationContent[],
+        target: AnnotationTarget[],
+        type: string,
+        id: string
+    }
+
+    interface ActiveAnnotation {
+        [key: string]: Annotation
+    }
+
     interface Actor {
         '@context': string,
-        role:  string[]
+        role:  string[],
         name: string,
         id?: string,
         idref?: Idref[]
 
     }
 
+    interface AnnotationContent {
+      type: 'TextualBody',
+      value: string,
+      format: AnnotationContentFormat,
+      'x-content-type': AnnotationContentType
+    }
+
+    type AnnotationContentFormat = 'text/plain' | 'text/html'
+    type AnnotationContentType = 'Person' | 'Place'
+
+    interface AnnotationTarget {
+        selector: CssSelector | RangeSelector,
+        format: string,
+        language: string,
+        source: string
+    }
+
     interface Collection {
         '@context': string,
         textapi: string,
@@ -30,6 +58,12 @@ declare global {
         integrity?: DataIntegrity
     }
 
+
+    type CssSelector = {
+        type: 'CssSelector',
+        value: string
+    }
+
     interface DataIntegrity {
         type: string,
         value: string
@@ -107,6 +141,11 @@ declare global {
         editionPrints?: boolean
     }
 
+    type RangeSelector = {
+        type: 'RangeSelector',
+        startSelector: CssSelector,
+        endSelector: CssSelector
+    }
     interface Repository {
         '@context': string,
         label?: string,