Convert some files to TypeScript

Author: MetRonnie

src/App.vue

@@ -25,7 +25,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   </v-defaults-provider>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useJobTheme, useReducedAnimation } from '@/composables/localStorage'

src/components/core/Alert.vue

@@ -38,11 +38,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   </v-snackbar>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import { mdiClose } from '@mdi/js'
 import { mapActions, mapState } from 'vuex'
 
-export default {
+export default defineComponent({
   name: 'Alert',
 
   computed: {
@@ -62,5 +63,5 @@ export default {
   icons: {
     mdiClose
   }
-}
+})
 </script>

src/components/cylc/common/filter.js renamed to src/components/cylc/common/filter.ts

@@ -15,40 +15,35 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { type Tokens } from '@/utils/uid'
+
 /* Logic for filtering tasks. */
 
+interface Node {
+  node: {
+    state: string
+  }
+  tokens: Tokens
+}
+
 /**
  * Return true if the node ID matches the given ID, or if no ID is given.
- *
- * @param {Object} node
- * @param {?string} id
- * @return {boolean}
  */
-export function matchID (node, id) {
-  return !id?.trim() || node.tokens.relativeID.includes(id)
+export function matchID (node: Node, id?: string): boolean {
+  return !id?.trim() || node.tokens.relativeID!.includes(id)
 }
 
 /**
  * Return true if the given list of states includes the node state, or if
  * if the list is empty.
- *
- * @param {Object} node
- * @param {?string[]} states
- * @returns {boolean}
  */
-export function matchState (node, states) {
+export function matchState (node: Node, states?: string[]): boolean {
   return !states?.length || states.includes(node.node.state)
 }
 
 /**
  * Return true if a node matches the specified id/state filter.
- *
- * @export
- * @param {Object} node
- * @param {?string} id
- * @param {?string[]} states
- * @return {boolean}
  */
-export function matchNode (node, id, states) {
+export function matchNode (node: Node, id?: string, states?: string[]): boolean {
   return matchID(node, id) && matchState(node, states)
 }

src/components/cylc/common/sort.ts

@@ -24,7 +24,7 @@ type Obj = string | Record<string, string>
  */
 type SortedIndexByComparator = (leftObject: Obj, leftValue: string, rightObject: Obj, rightValue: string) => number
 
-type SortedIndexOptions = {
+interface SortedIndexOptions {
   comparator?: SortedIndexByComparator
   reverse?: boolean
 }
@@ -44,11 +44,6 @@ export const DEFAULT_COMPARATOR = (left: string, right: string): number => {
   )
 }
 
-/**
- * Declare function used in sortedIndexBy for creating the iteratee.
- */
-type SortedIndexByIteratee = (value: string | Record<string, string>) => string
-
 /**
  * Given a list of elements, and a value to be added to the list, we
  * perform a simple binary search of the list to determine the next
@@ -68,12 +63,19 @@ type SortedIndexByIteratee = (value: string | Record<string, string>) => string
  * @param comparator - function used to compare the newValue with otherValues in the list
  * @return sorted index
  */
-export function sortedIndexBy (array: Obj[], value: Obj, iteratee: SortedIndexByIteratee, options: SortedIndexOptions = {}): number {
+export function sortedIndexBy (
+  array: Obj[],
+  value: Obj,
+  iteratee: (value: Obj) => string,
+  options: SortedIndexOptions = {}
+): number {
   if (array.length === 0) {
     return 0
   }
   // If given a function, use it. Otherwise, simply use locale sort with numeric enabled
-  const comparatorFunction = options.comparator || ((leftObject, leftValue, rightObject, rightValue) => DEFAULT_COMPARATOR(leftValue, rightValue))
+  const comparatorFunction: SortedIndexByComparator = options.comparator || (
+    (leftObject, leftValue, rightObject, rightValue) => DEFAULT_COMPARATOR(leftValue, rightValue)
+  )
   let low = 0
   let high = array.length
 

src/components/cylc/gscan/GScan.vue

@@ -121,7 +121,7 @@ import { TaskStateNames } from '@/model/TaskState.model'
 import { WorkflowStateNames } from '@/model/WorkflowState.model'
 import Tree from '@/components/cylc/tree/Tree.vue'
 import { filterByName, filterByState } from '@/components/cylc/gscan/filters'
-import { sortedWorkflowTree } from '@/components/cylc/gscan/sort.js'
+import { sortedWorkflowTree } from '@/components/cylc/gscan/sort'
 import { mutate } from '@/utils/aotf'
 import TaskFilterSelect from '@/components/cylc/TaskFilterSelect.vue'
 

src/components/cylc/gscan/filters.js renamed to src/components/cylc/gscan/filters.ts

@@ -15,33 +15,35 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-/**
- * @param {WorkflowGScanNode|WorkflowNamePartGScanNode} workflow
- * @param {?string} name - name filter
- * @returns {boolean}
- */
-export function filterByName (workflow, name) {
+import { type Tokens } from '@/utils/uid'
+
+interface WorkflowNode {
+  node: {
+    status: string
+    stateTotals: Record<string, number>
+  }
+  tokens: Tokens
+}
+
+export function filterByName (workflow: WorkflowNode, name: string): boolean {
   return !name || workflow.tokens.workflow.toLowerCase().includes(name.toLowerCase())
 }
 
 /**
  * @private
- * @param {Object=} stateTotals - object with the keys being states, and values the count
- * @return {string[]}
+ * @param stateTotals - object with the keys being states, and values the count
  */
-function getWorkflowStates (stateTotals) {
+function getWorkflowStates (stateTotals: Record<string, number>): string[] {
   return !stateTotals
     ? []
     : Object.keys(stateTotals).filter((state) => stateTotals[state] > 0)
 }
 
-/**
- * @param {WorkflowGScanNode|WorkflowNamePartGScanNode} workflow
- * @param {string[]} workflowStates
- * @param {string[]} taskStates
- * @returns {boolean}
- */
-export function filterByState (workflow, workflowStates, taskStates) {
+export function filterByState (
+  workflow: WorkflowNode,
+  workflowStates: string[],
+  taskStates: string[]
+): boolean {
   // workflow states
   if (
     workflowStates.length && !workflowStates.includes(workflow.node.status)

src/components/cylc/gscan/sort.js renamed to src/components/cylc/gscan/sort.ts

@@ -70,7 +70,7 @@ function gscanWorkflowCompValue (node) {
  * Sorts according to getWorkflowTreeSortValue.
  */
 export function sortedWorkflowTree (cylcTree) {
-  const tree = []
+  const tree: any[] = []
   for (let node of cylcTree.children[0].children) {
     node = flattenWorkflowParts(node)
     if (node) {

src/components/cylc/workspace/Lumino.vue

@@ -75,7 +75,7 @@ const props = defineProps({
   /**
    * All possible view component classes that can be rendered
    *
-   * @type {Map<string, import('@/views/views.js').CylcView>}
+   * @type {Map<string, import('@/views/views').CylcView>}
    */
   allViews: {
     type: Map,

src/components/cylc/workspace/Toolbar.vue

@@ -285,7 +285,7 @@ export default {
     /**
      * All possible view component classes that can be rendered
      *
-     * @type {Map<string, import('@/views/views.js').CylcView>}
+     * @type {Map<string, import('@/views/views').CylcView>}
      */
     views: {
       type: Map,