diff --git a/frontend/src/components/c-segment-collection.vue b/frontend/src/components/c-segment-collection.vue
index b6853ba7d8..e305083a31 100644
--- a/frontend/src/components/c-segment-collection.vue
+++ b/frontend/src/components/c-segment-collection.vue
@@ -4,17 +4,19 @@
     c-segment(v-bind:segment="segment", v-bind:path="path")
 </template>
 
-<script>
+<script lang='ts'>
+import { defineComponent } from 'vue';
 import cSegment from './c-segment.vue';
+import Segment from '../utils/segment';
 
-export default {
+export default defineComponent({
   name: 'c-segment-collection',
   components: {
     cSegment,
   },
   props: {
     segments: {
-      type: Array,
+      type: Array<Segment>,
       required: true,
     },
     path: {
@@ -28,11 +30,11 @@ export default {
     };
   },
   methods: {
-    visibilityChanged(isVisible) {
+    visibilityChanged(isVisible: boolean) {
       if (isVisible) {
         this.isRendered = true;
       }
     },
   },
-};
+});
 </script>