[#1936] Migrate c-segment.vue to typescript (#2035)

Currently, there is still some JavaScript code which remains 
unmigrated. This allows for type unsafe code to be written, 
potentially resulting in unintended behavior.

Let's migrate the rest of the JavaScript code to TypeScript 
code to facilitate future changes to the code.

frontend/src/components/c-segment.vue

@@ -31,11 +31,13 @@
  )
 </template>
 
-<script>
+<script lang='ts'>
+import { defineComponent } from 'vue';
 import { mapState } from 'vuex';
 import Segment from '../utils/segment';
+import { StoreState } from '../types/vuex.d';
 
-export default {
+export default defineComponent({
  name: 'c-segment',
  props: {
  segment: {
@@ -49,22 +51,22 @@ export default {
  },
  data() {
  return {
- isOpen: this.segment.knownAuthor || this.segment.lines.length < 5,
- canOpen: !this.segment.knownAuthor && this.segment.lines.length > 4,
- transparencyValue: '30',
+ isOpen: (this.segment.knownAuthor !== null) || this.segment.lines.length < 5 as boolean,
+ canOpen: (this.segment.knownAuthor === null) && this.segment.lines.length > 4 as boolean,
+ transparencyValue: '30' as string,
  };
  },
  computed: {
  ...mapState({
- authorColors: ['tabAuthorColors'],
+ authorColors: (state: unknown) => (state as StoreState).tabAuthorColors,
  }),
  },
  methods: {
  toggleCode() {
  this.isOpen = !this.isOpen;
  },
  },
-};
+});
 </script>
 
 <style lang="css">