Typescriptify entity helpers

src/components/Element/Transcription/Token.vue

@@ -32,16 +32,19 @@
   </span>
 </template>
 
-<script>
+<script lang="ts">
 import { mapState } from 'pinia'
-import { parseEntities } from '@/helpers'
+import { EntityTranscriptionLight, parseEntities } from '@/helpers'
 import { useDisplayStore } from '@/stores'
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import { Entity, EntityType } from '@/types'
 
-export default {
+export default defineComponent({
   name: 'Token',
   props: {
     entity: {
-      type: Object,
+      type: Object as PropType<Entity>,
       default: null
     },
     text: {
@@ -54,7 +57,7 @@ export default {
       required: true
     },
     children: {
-      type: Array,
+      type: Array as PropType<EntityTranscriptionLight[]>,
       default: () => []
     },
     // Show a warning about an entity overflowing its parent
@@ -64,10 +67,10 @@ export default {
     }
   },
   methods: {
-    tagStyle (type) {
+    tagStyle (type: EntityType) {
       return { 'background-color': `#${type.color}` }
     },
-    entityStyle (type) {
+    entityStyle (type: EntityType) {
       return { 'text-decoration': `underline #${type.color}` }
     }
   },
@@ -80,7 +83,7 @@ export default {
       return parseEntities(this.text, this.children, this.offset)
     }
   }
-}
+})
 </script>
 
 <style scoped lang="scss">

src/helpers/entity.js → src/helpers/entity.ts

+import { EntityTranscription } from '@/types'
 import { orderBy } from 'lodash'
 
+export interface Token {
+  offset: number,
+  text: string,
+  entity?: object,
+  children: EntityTranscriptionLight[],
+  overflow?: boolean
+}
+
+export type EntityTranscriptionLight = Omit<EntityTranscription, 'worker_run' | 'worker_version_id' | 'confidence'>
+
 /**
  * Parse EntityTranscriptions to place them on a transcription text using a series of Token components.
- * @typedef EntityTranscription {offset: number, length: number, entity: object}
- * @param {string} text Transcription text to place the entities on.
- * @param {EntityTranscription[]} entities EntityTranscriptions from the API to place onto the text.
- * @param {number} textOffset Global offset to apply to the text when parsing only a portion of the text.
- * @returns {{offset: number, text: string, entity?: object, children: EntityTranscription[], overflow?: boolean}[]}
- *   Sets of properties to be used on the Token component for display.
+ * @param text Transcription text to place the entities on.
+ * @param entities EntityTranscriptions from the API to place onto the text.
+ * @param textOffset Global offset to apply to the text when parsing only a portion of the text.
+ * @returns Sets of properties to be used on the Token component for display.
  */
-export const parseEntities = (text, entities, textOffset = 0) => {
+export const parseEntities = (text: string, entities: EntityTranscriptionLight[], textOffset = 0) => {
   /**
    * The current position in the text.
    * If we go through an entity, this position is set to the end of that entity;
@@ -18,7 +27,7 @@ export const parseEntities = (text, entities, textOffset = 0) => {
    * The Vue component will take care of calling this function again to parse recursively.
    */
   let cursor = 0
-  const tokens = []
+  const tokens: Token[] = []
 
   for (const { offset, length, entity } of orderBy(entities, ['offset', 'length', 'id'], ['asc', 'desc', 'asc'])) {
     if (cursor > offset) {

src/types.ts

@@ -138,6 +138,15 @@ export interface Entity {
   worker_run: WorkerRunSummary | null
 }
 
+export interface EntityTranscription {
+  offset: number,
+  length: number,
+  entity: Entity,
+  worker_run: WorkerRunSummary | null,
+  worker_version_id: UUID | null,
+  confidence: number
+}
+
 export interface AllowedMetaData {
   id: UUID
   type: string