diff --git a/package-lock.json b/package-lock.json
index 62e93895..175f9adb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "standard-version": "^9.5.0",
         "start-server-and-test": "^2.0.3",
         "tailwindcss": "^3.4.1",
+        "typescript": "^5.4.5",
         "vite": "^5.2.6",
         "vue": "^3.4.20",
         "vue-i18n": "^9.2.0-beta.35",
@@ -8050,6 +8051,19 @@
       "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
       "dev": true
     },
+    "node_modules/typescript": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/uglify-js": {
       "version": "3.17.4",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
diff --git a/src/components/annotations/AnnotationIcon.vue b/src/components/annotations/AnnotationIcon.vue
index 2dca16a1..8680e892 100644
--- a/src/components/annotations/AnnotationIcon.vue
+++ b/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>
diff --git a/src/components/annotations/AnnotationsList.vue b/src/components/annotations/AnnotationsList.vue
index 65993b3d..44551136 100644
--- a/src/components/annotations/AnnotationsList.vue
+++ b/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>
diff --git a/src/components/annotations/AnnotationsView.vue b/src/components/annotations/AnnotationsView.vue
index 21204487..54c11513 100644
--- a/src/components/annotations/AnnotationsView.vue
+++ b/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);
 }
 
diff --git a/src/components/metadata/MetadataLink.vue b/src/components/metadata/MetadataLink.vue
index 8ca1f8ae..114f898f 100644
--- a/src/components/metadata/MetadataLink.vue
+++ b/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>
diff --git a/src/components/metadata/MetadataValue.vue b/src/components/metadata/MetadataValue.vue
index 56e63a83..6dc20618 100644
--- a/src/components/metadata/MetadataValue.vue
+++ b/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>
diff --git a/src/types.d.ts b/src/types.d.ts
index 995f5df3..66a51234 100644
--- a/src/types.d.ts
+++ b/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,