Convert Actor.vue to Typescript component

.eslintrc.cjs

@@ -14,11 +14,13 @@ module.exports =  {
     // 'plugin:vue/strongly-recommended' // Priority B: Strongly Recommended (Improving Readability)
     // 'plugin:vue/recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
     'plugin:vue/vue3-essential',
+    'plugin:@typescript-eslint/recommended'
   ],
 
   // required to lint *.vue files
   plugins: [
     'vue',
+    "@typescript-eslint"
   ],
   globals: {
     ga: true, // Google Analytics

src/components/metadata/Actor.vue

@@ -7,22 +7,25 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import MetadataValue from '@/components/metadata/MetadataValue.vue';
+import { useI18n } from 'vue-i18n';
 
-const props = defineProps({
-  data: {
-    type: Array,
-    default: () => [],
-  },
-});
+const { t } = useI18n();
 
-function getRole(actorItem) {
+export interface Props {
+  data: Actor[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  data: () => []
+})
+
+function getRole(actorItem: Actor) : string {
   const { role } = actorItem;
-  if (!role) return 'undefined_role';
-  if (!Array.isArray(role)) return role;
-  if (role.length > 0) return role[0];
-  return 'undefined_role';
+  if (!role) throw new Error(t('error_undefined_role'));
+  if (role.length === 0) return 'undefined_role';
+  return role[0];
 }
 </script>
 

src/i18n/en/index.js

@@ -42,6 +42,7 @@ export default {
   error_panelspart_tido_url: 'Please provide the value of Panels \'p\' panelIndex.TabIndexOpened for each panel index in the right form',
   error_showpart_tido_url: 'Please provide the value of panels shown \'s\' in the right form',
   error_labels_custom_config: 'Please provide correct values for the keys of \'labels\' in custom config. If you provide a certain key, then please provide its value',
+  error_undefined_role: 'Please define \'role\' in Actor',
   error_open_image: 'Could not open the image file.',
   no_image_available: 'No Image Available',
   image_license: 'Image License',

src/types.d.ts

+declare global {
+    
+    interface Actor {
+        '@context': string,
+        role:  string[]
+        name: string,
+        id? : string,
+        idref? : Idref[]
+
+    }
+
+    interface Collection {
+        '@context': string,
+        textapi: string,
+        id: string,
+        title: Title[]
+        collector: Actor[],
+        description? : string,
+        sequence: SequenceObject[],
+        total? : number,
+        annotationCollection? : string,
+        modules? : Module[]
+    
+    }
+
+    interface Idref {
+        '@context': string,
+        base? : string,
+        type : string,
+        id: string
+    }
+
+    interface Module {
+        editionManuscripts? : boolean,
+        editionPrints? : boolean
+    }
+
+    interface SequenceObject {
+        '@context': string
+        id: string,
+        type: TypeSequenceObject,
+        label: string
+    }
+    type TypeSequenceObject = 'collection' | 'manifest' | 'item'
+
+    interface Title {
+        '@context': string,
+        title: string
+        type: TitleType
+    }
+    type TitleType = 'main' | 'sub';
+
+}
+
+export {}