diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index e5a316339..854ae69ad 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -17,10 +17,15 @@
 
 module.exports = {
   root: true,
+  plugins: [
+    '@typescript-eslint',
+  ],
+  parser: 'vue-eslint-parser',
   parserOptions: {
     /* Allow new ECMAScript syntax but not globals. This is because vite/esbuild
     transforms syntax to es2015 (at the earliest) but does not pollyfill APIs. */
     ecmaVersion: 'latest',
+    parser: '@typescript-eslint/parser'
   },
   extends: [
     'standard',
@@ -28,6 +33,7 @@ module.exports = {
     'plugin:vue/vue3-essential',
     'plugin:vuetify/base',
     'plugin:cypress/recommended',
+    'plugin:@typescript-eslint/recommended',
   ],
   rules: {
     'comma-dangle': [
@@ -43,6 +49,35 @@ module.exports = {
     'template-curly-spacing': [
       'off'
     ],
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        vars: 'all',
+        args: 'none',
+      }
+    ],
+    '@typescript-eslint/no-var-requires': [
+      'error',
+      {
+        allow: [
+          '.*\\.cjs',
+          '.*\\.json',
+        ],
+      }
+    ],
+    '@typescript-eslint/no-explicit-any': [
+      'off', // Off while we migrate to TypeScript
+    ],
+    'no-use-before-define': [
+      'off' // Handled by @typescript-eslint below
+    ],
+    '@typescript-eslint/no-use-before-define': [
+      'error',
+      {
+        functions: false,
+        variables: false,
+      }
+    ],
     'vue/multi-word-component-names': [
       'off'
     ],
@@ -60,6 +95,6 @@ module.exports = {
     ],
     'cypress/unsafe-to-chain-command': [
       'off'
-    ]
+    ],
   },
 }
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 45deb3ac1..758140387 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -33,6 +33,10 @@ jobs:
         run: |
           yarn run lint
 
+      - name: Type check
+        run: |
+          yarn run type-check
+
       - name: Test
         run: |
           yarn run coverage:unit
diff --git a/README.md b/README.md
index 9ce5b468f..9d6970c3a 100644
--- a/README.md
+++ b/README.md
@@ -126,7 +126,7 @@ The project was originally created with [vue-cli](https://cli.vuejs.org/), but
 has switched to [Vite](https://vitejs.dev/) with the upgrade from Vue 2 to 3.
 
 The configuration for how the app is served and built is defined in
-[`vite.config.js`](vite.config.js).
+[`vite.config.ts`](vite.config.ts).
 
 We are currently using the [Vuetify component library](https://vuetifyjs.com/en/).
 Its configuration is defined in [`src/plugins/vuetify.js`](src/plugins/vuetify.js).
@@ -211,10 +211,22 @@ testing the development version much easier.
 
 ### TypeScript
 
-TypeScript is most likely the future for us. It can be adopted gradually.
-At the moment we only have JSDoc comments which can provide type information
+We are starting to adopt TypeScript, so have a mixture of `.ts` and `.js` files.
+Vue single-file-components can use `<script lang="ts">` to enable TypeScript.
+There are also JSDoc comments in `.js` files which can provide type information
 in your IDE.
 
+> [!NOTE]
+> Vite performs transpilation of TypeScript but does not perform type checking.
+> It assumes type checking is taken care of by your IDE or a tool such as
+> [`vue-tsc`](https://github.com/vuejs/language-tools/tree/master/packages/tsc)
+> e.g. `vue-tsc --noEmit --watch`.
+
+Useful resources:
+- [Using Vue with TypeScript](https://vuejs.org/guide/typescript/overview.html)
+- [Vite features - TypeScript](https://vitejs.dev/guide/features#typescript)
+- [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
+
 ## How The Data Is Provisioned
 
 The Cylc UI connects to the GraphQL endpoint provided by the Cylc UI Server
diff --git a/cypress.config.cjs b/cypress.config.cjs
index d09185c4a..33c8636f2 100644
--- a/cypress.config.cjs
+++ b/cypress.config.cjs
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const { defineConfig } = require('cypress')
 const vitePreprocessor = require('cypress-vite')
 const path = require('path')
@@ -29,7 +30,7 @@ module.exports = defineConfig({
       on(
         'file:preprocessor',
         vitePreprocessor({
-          configFile: path.resolve(__dirname, './vite.config.js'),
+          configFile: path.resolve(__dirname, './vite.config.ts'),
           mode: 'development',
         })
       )
diff --git a/package.json b/package.json
index 9e2c72365..dd0259041 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,8 @@
     "test:component": "cypress open --component",
     "test:e2e": "yarn run serve e2e:open",
     "test:unit": "vitest",
-    "test": "vitest run && yarn run serve cy:run"
+    "test": "vitest run && yarn run serve cy:run",
+    "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
     "@apollo/client": "3.9.4",
@@ -34,7 +35,6 @@
     "apexcharts": "3.41.0",
     "axios": "1.6.7",
     "dedent": "1.5.1",
-    "enumify": "2.0.0",
     "graphiql": "3.1.1",
     "graphql": "16.8.1",
     "graphql-tag": "2.12.6",
@@ -55,6 +55,9 @@
   },
   "devDependencies": {
     "@cypress/code-coverage": "3.12.29",
+    "@types/lodash": "4.14.202",
+    "@typescript-eslint/eslint-plugin": "7.1.0",
+    "@typescript-eslint/parser": "7.1.0",
     "@vitejs/plugin-vue": "5.0.4",
     "@vitest/coverage-istanbul": "1.4.0",
     "@vue/test-utils": "2.4.5",
@@ -82,11 +85,13 @@
     "sass": "1.71.1",
     "sinon": "17.0.1",
     "standard": "17.1.0",
+    "typescript": "5.3.3",
     "vite": "5.1.6",
     "vite-plugin-eslint": "1.8.1",
     "vite-plugin-istanbul": "6.0.0",
     "vite-plugin-vuetify": "2.0.3",
-    "vitest": "1.4.0"
+    "vitest": "1.4.0",
+    "vue-tsc": "2.0.6"
   },
   "peerDependenciesMeta": {
     "react": {
diff --git a/renovate.json b/renovate.json
index 6331f5185..4aa26b993 100644
--- a/renovate.json
+++ b/renovate.json
@@ -6,6 +6,18 @@
   "platformAutomerge": true,
   "automergeStrategy": "squash",
   "packageRules": [
+    {
+      "groupName": "typescript packages",
+      "matchPackageNames": [
+        "typescript",
+        "vue-tsc"
+      ],
+      "matchPackagePatterns": [
+        "^@types/"
+      ],
+      "automerge": true,
+      "schedule": ["on saturday"]
+    },
     {
       "matchPackageNames": ["yarn"],
       "automerge": true
@@ -78,7 +90,10 @@
     {
       "groupName": "eslint packages",
       "matchPackageNames": ["standard"],
-      "matchPackagePatterns": ["^eslint"],
+      "matchPackagePatterns": [
+        "^eslint",
+        "^@typescript-eslint"
+      ],
       "automerge": true,
       "schedule": ["on the first day of the month"]
     },
diff --git a/scripts/concurrently.cjs b/scripts/concurrently.cjs
index 2a5f9bda2..aa9ae2f57 100644
--- a/scripts/concurrently.cjs
+++ b/scripts/concurrently.cjs
@@ -1,4 +1,5 @@
-/* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-console  */
 const concurrently = require('concurrently')
 
 const args = process.argv.slice(2)
diff --git a/src/App.vue b/src/App.vue
index 5aca6e51a..d481039a1 100644
--- a/src/App.vue
+++ b/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'
diff --git a/src/components/core/Alert.vue b/src/components/core/Alert.vue
index 064eac3b9..918a36e38 100644
--- a/src/components/core/Alert.vue
+++ b/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>
diff --git a/src/components/cylc/Header.vue b/src/components/cylc/Header.vue
index 936e5ad66..9e9a153a9 100644
--- a/src/components/cylc/Header.vue
+++ b/src/components/cylc/Header.vue
@@ -117,7 +117,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useStore } from 'vuex'
 import { useLocalStorage } from '@vueuse/core'
diff --git a/src/components/cylc/SVGTask.vue b/src/components/cylc/SVGTask.vue
index c242a32ce..7bf192010 100644
--- a/src/components/cylc/SVGTask.vue
+++ b/src/components/cylc/SVGTask.vue
@@ -253,7 +253,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import TaskState from '@/model/TaskState.model'
+import { TaskState } from '@/model/TaskState.model'
 
 export default {
   name: 'SVGTask',
@@ -284,7 +284,7 @@ export default {
   methods: {
     getRunningStyle () {
       if (
-        this.task.state === TaskState.RUNNING.name &&
+        this.task.state === TaskState.RUNNING &&
         this.startTime &&
         this.task.task?.meanElapsedTime
       ) {
diff --git a/src/components/cylc/common/filter.js b/src/components/cylc/common/filter.ts
similarity index 75%
rename from src/components/cylc/common/filter.js
rename to src/components/cylc/common/filter.ts
index b39715cef..ad1bbafa5 100644
--- a/src/components/cylc/common/filter.js
+++ b/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) {
+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)
 }
diff --git a/src/components/cylc/common/sort.js b/src/components/cylc/common/sort.ts
similarity index 56%
rename from src/components/cylc/common/sort.js
rename to src/components/cylc/common/sort.ts
index 56584c5e4..417e81b29 100644
--- a/src/components/cylc/common/sort.js
+++ b/src/components/cylc/common/sort.ts
@@ -15,27 +15,25 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+type Obj = string | Record<string, string>
+
 /**
  * Declare function used in sortedIndexBy as a comparator.
  *
- * @callback SortedIndexByComparator
- * @param {Object} leftObject - left parameter object
- * @param {string} leftValue - left parameter value
- * @param {Object} rightObject - right parameter object
- * @param {string} rightValue - right parameter value
- * @returns {boolean} - true if leftValue is higher than rightValue
+ * @returns positive int if leftValue is higher than rightValue
  */
+type SortedIndexByComparator = (leftObject: Obj, leftValue: string, rightObject: Obj, rightValue: string) => number
+
+interface SortedIndexOptions {
+  comparator?: SortedIndexByComparator
+  reverse?: boolean
+}
 
 /**
  * The default comparator used to compare strings for cycle points, family proxies names,
  * task proxies names, and jobs.
- *
- * @param {string} left
- * @param {string} right
- * @returns {number}
- * @constructor
  */
-export const DEFAULT_COMPARATOR = (left, right) => {
+export const DEFAULT_COMPARATOR = (left: string, right: string): number => {
   return left.toLowerCase()
     .localeCompare(
       right.toLowerCase(),
@@ -47,14 +45,6 @@ export const DEFAULT_COMPARATOR = (left, right) => {
     )
 }
 
-/**
- * Declare function used in sortedIndexBy for creating the iteratee.
- *
- * @callback SortedIndexByIteratee
- * @param {Object} value - any object
- * @returns {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,29 +58,33 @@ export const DEFAULT_COMPARATOR = (left, right) => {
  * name, but that respects natural order for numbers, i.e. [1, 2, 10].
  * Not [1, 10, 2].
  *
- * @param {Object[]} array - list of string values, or of objects with string values
- * @param {Object} value - a value to be inserted in the list, or an object wrapping the value (see iteratee)
- * @param {SortedIndexByIteratee=} iteratee - an optional function used to return the value of the element of the list}
- * @param {SortedIndexByComparator=} comparator - function used to compare the newValue with otherValues in the list
- * @return {number} - sorted index
+ * @param array - list of string values, or of objects with string values
+ * @param value - a value to be inserted in the list, or an object wrapping the value (see iteratee)
+ * @param iteratee - an optional function used to return the value of the element of the list
+ * @param comparator - function used to compare the newValue with otherValues in the list
+ * @return sorted index
  */
-export function sortedIndexBy (array, value, iteratee, options = {}) {
-  // comparator, reverse = false) {
+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 identity function.
-  const iterateeFunction = iteratee || ((value) => value)
   // 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
 
-  const newValue = iterateeFunction(value)
+  const newValue = iteratee(value)
 
   while (low < high) {
     const mid = Math.floor((low + high) / 2)
-    const midValue = iterateeFunction(array[mid])
+    const midValue = iteratee(array[mid])
     let higher = comparatorFunction(value, newValue, array[mid], midValue)
     if (options.reverse) {
       higher = higher * -1
diff --git a/src/components/cylc/cylcObject/Menu.vue b/src/components/cylc/cylcObject/Menu.vue
index a62b6e75a..9fb73c338 100644
--- a/src/components/cylc/cylcObject/Menu.vue
+++ b/src/components/cylc/cylcObject/Menu.vue
@@ -135,7 +135,7 @@ import {
   mdiPencil
 } from '@mdi/js'
 import { mapGetters, mapState } from 'vuex'
-import WorkflowState from '@/model/WorkflowState.model'
+import { WorkflowState } from '@/model/WorkflowState.model'
 import { VDialogTransition } from 'vuetify/components/transitions'
 
 export default {
@@ -261,7 +261,7 @@ export default {
           'workflow', [this.node.tokens.workflowID])
         if (nodeReturned.length) {
           this.workflowStatus = nodeReturned[0].node.status
-        } else { this.workflowStatus = WorkflowState.RUNNING.name }
+        } else { this.workflowStatus = WorkflowState.RUNNING }
       } else {
         this.workflowStatus = this.node.node.status
       }
diff --git a/src/components/cylc/gscan/GScan.vue b/src/components/cylc/gscan/GScan.vue
index 6951544c4..0412e3095 100644
--- a/src/components/cylc/gscan/GScan.vue
+++ b/src/components/cylc/gscan/GScan.vue
@@ -121,7 +121,7 @@ import { TaskStateNames } from '@/model/TaskState.model'
 import { WorkflowState } 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'
 
@@ -227,7 +227,7 @@ export default {
    * @type {{ [name: string]: string[] }}
    */
   allStates: {
-    'workflow state': WorkflowState.enumValues.map(x => x.name),
+    'workflow state': Object.values(WorkflowState),
     'task state': TaskStateNames,
   },
 }
diff --git a/src/components/cylc/gscan/WorkflowIcon.vue b/src/components/cylc/gscan/WorkflowIcon.vue
index c8c1dbdfd..3aa787ecc 100644
--- a/src/components/cylc/gscan/WorkflowIcon.vue
+++ b/src/components/cylc/gscan/WorkflowIcon.vue
@@ -22,7 +22,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import WorkflowState from '@/model/WorkflowState.model'
+import { WorkflowStateIcons } from '@/model/WorkflowState.model'
 import { mdiHelpCircle } from '@mdi/js'
 
 /**
@@ -45,8 +45,7 @@ export default {
      * @returns {string} icon
      */
     getIcon () {
-      const state = WorkflowState.enumValues.find(({ name }) => name === this.status)
-      return state?.icon || mdiHelpCircle
+      return WorkflowStateIcons.get(this.status) ?? mdiHelpCircle
     }
   }
 }
diff --git a/src/components/cylc/gscan/filters.js b/src/components/cylc/gscan/filters.ts
similarity index 63%
rename from src/components/cylc/gscan/filters.js
rename to src/components/cylc/gscan/filters.ts
index ba5abff46..acefe19be 100644
--- a/src/components/cylc/gscan/filters.js
+++ b/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) {
-  return !name || workflow.tokens.workflow.toLowerCase().includes(name.toLowerCase())
+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)
diff --git a/src/components/cylc/gscan/sort.js b/src/components/cylc/gscan/sort.ts
similarity index 92%
rename from src/components/cylc/gscan/sort.js
rename to src/components/cylc/gscan/sort.ts
index 3e57daf73..afdaee575 100644
--- a/src/components/cylc/gscan/sort.js
+++ b/src/components/cylc/gscan/sort.ts
@@ -18,7 +18,7 @@
 import {
   sortedIndexBy
 } from '@/components/cylc/common/sort'
-import { WorkflowState, WorkflowStateOrder } from '@/model/WorkflowState.model'
+import { WorkflowState, getWorkflowStateOrder } from '@/model/WorkflowState.model'
 
 /**
  * Return an integer suitable for alphabetical sorting of workflow states.
@@ -28,14 +28,14 @@ import { WorkflowState, WorkflowStateOrder } from '@/model/WorkflowState.model'
  */
 export function getWorkflowTreeSortValue (node) {
   if (node.type === 'workflow') {
-    return WorkflowStateOrder.get(node.node.status)
+    return getWorkflowStateOrder(node.node.status)
   }
   let ret = 9
   let temp = 9
   let item
   const stack = [...node.children]
   while (
-    ret > WorkflowStateOrder.get(WorkflowState.RUNNING.name) &&
+    ret > getWorkflowStateOrder(WorkflowState.RUNNING) &&
     stack.length
   ) {
     // NOTE: if one workflow is running (top sort order) then we don't
@@ -44,7 +44,7 @@ export function getWorkflowTreeSortValue (node) {
     if (item.type === 'workflow-part') {
       stack.push(...item.children)
     } else if (item.type === 'workflow') {
-      temp = WorkflowStateOrder.get(item.node.status)
+      temp = getWorkflowStateOrder(item.node.status)
       if (temp < ret) {
         ret = temp
       }
@@ -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) {
diff --git a/src/components/cylc/table/sort.js b/src/components/cylc/table/sort.ts
similarity index 80%
rename from src/components/cylc/table/sort.js
rename to src/components/cylc/table/sort.ts
index 09b5b4ccb..8f3f29c57 100644
--- a/src/components/cylc/table/sort.js
+++ b/src/components/cylc/table/sort.ts
@@ -20,11 +20,11 @@
  * strings are treated as infinity.
  *
  * @export
- * @param {*} a - The first element for comparison.
- * @param {*} b - The second element for comparison.
- * @return {number} A number > 0 if a > b, or < 0 if a < b, or 0 if a === b
+ * @param a - The first element for comparison.
+ * @param b - The second element for comparison.
+ * @return A number > 0 if a > b, or < 0 if a < b, or 0 if a === b
  */
-export function datetimeComparator (a, b) {
+export function datetimeComparator (a: string | number, b: string | number): number {
   a = (a ?? '') === '' ? Infinity : new Date(a).getTime()
   b = (b ?? '') === '' ? Infinity : new Date(b).getTime()
   // Avoid return NaN for a === b === Infinity
diff --git a/src/components/cylc/tree/GScanTreeItem.vue b/src/components/cylc/tree/GScanTreeItem.vue
index 4b6ef3b1d..cf7882165 100644
--- a/src/components/cylc/tree/GScanTreeItem.vue
+++ b/src/components/cylc/tree/GScanTreeItem.vue
@@ -175,7 +175,7 @@ export default {
 
     nodeClass () {
       return {
-        'c-workflow-stopped': this.node.node?.status === WorkflowState.STOPPED.name,
+        'c-workflow-stopped': this.node.node?.status === WorkflowState.STOPPED,
       }
     }
   },
diff --git a/src/components/cylc/workflow/Lumino.vue b/src/components/cylc/workflow/Lumino.vue
index 61cea3d87..c14a29f14 100644
--- a/src/components/cylc/workflow/Lumino.vue
+++ b/src/components/cylc/workflow/Lumino.vue
@@ -76,7 +76,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,
diff --git a/src/components/cylc/workflow/Toolbar.vue b/src/components/cylc/workflow/Toolbar.vue
index 68314aa70..d494496c8 100644
--- a/src/components/cylc/workflow/Toolbar.vue
+++ b/src/components/cylc/workflow/Toolbar.vue
@@ -170,7 +170,7 @@ import {
 } from '@mdi/js'
 import { startCase } from 'lodash'
 import { useToolbar, toolbarHeight } from '@/utils/toolbar'
-import WorkflowState from '@/model/WorkflowState.model'
+import { WorkflowState } from '@/model/WorkflowState.model'
 import graphql from '@/mixins/graphql'
 import {
   mutationStatus
@@ -192,7 +192,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,
@@ -217,25 +217,21 @@ export default {
       return this.cylcTree.$index[this.workflowId]
     },
     isRunning () {
-      return (
-        this.currentWorkflow &&
-        (
-          this.currentWorkflow.node.status === WorkflowState.RUNNING.name ||
-          this.currentWorkflow.node.status === WorkflowState.PAUSED.name ||
-          this.currentWorkflow.node.status === WorkflowState.STOPPING.name
-        )
-      )
+      return [
+        WorkflowState.RUNNING,
+        WorkflowState.PAUSED,
+        WorkflowState.STOPPING
+      ].includes(this.currentWorkflow?.node.status)
     },
     isPaused () {
       return (
-        this.currentWorkflow &&
-        this.currentWorkflow.node.status === WorkflowState.PAUSED.name
+        this.currentWorkflow?.node.status === WorkflowState.PAUSED
       )
     },
     isStopped () {
       return (
         !this.currentWorkflow ||
-        this.currentWorkflow.node.status === WorkflowState.STOPPED.name
+        this.currentWorkflow.node.status === WorkflowState.STOPPED
       )
     },
     statusMsg () {
@@ -258,7 +254,7 @@ export default {
           // the play/pause button
           !this.isStopped &&
           !this.expecting.stop &&
-          this.currentWorkflow.node.status !== WorkflowState.STOPPING.name &&
+          this.currentWorkflow.node.status !== WorkflowState.STOPPING &&
           (
             this.expecting.paused === null ||
             this.expecting.paused === this.isPaused
@@ -315,7 +311,7 @@ export default {
         this.currentWorkflow.id
       ).then(response => {
         if (response.status === mutationStatus.SUCCEEDED) {
-          this.expecting.stop = WorkflowState.STOPPING
+          this.expecting.stop = WorkflowState.STOPPING // Huh?
         }
       })
     },
diff --git a/src/composables/localStorage.js b/src/composables/localStorage.ts
similarity index 100%
rename from src/composables/localStorage.js
rename to src/composables/localStorage.ts
diff --git a/src/mixins/subscription.js b/src/mixins/subscription.js
index 15a8872bc..7e4d6a52b 100644
--- a/src/mixins/subscription.js
+++ b/src/mixins/subscription.js
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import ViewState from '@/model/ViewState.model'
+import { ViewState } from '@/model/ViewState.model'
 import { toRaw } from 'vue'
 import { mapActions } from 'vuex'
 
diff --git a/src/model/Alert.model.js b/src/model/Alert.model.ts
similarity index 69%
rename from src/model/Alert.model.js
rename to src/model/Alert.model.ts
index 6b609e7fb..faf2fb2cb 100644
--- a/src/model/Alert.model.js
+++ b/src/model/Alert.model.ts
@@ -17,14 +17,17 @@
 
 /** Alert model */
 export class Alert {
-  /**
-   * @param {Error|string} err - original thrown error to log if possible, or an error message.
-   * @param {string} color - color of the displayed alert.
-   * @param {?string} msg - a custom message to display in the alert instead of err.
-   */
-  constructor (err, color, msg = null) {
-    this.err = err
+  /** The text content of the displayed alert. */
+  text: string | Error
+
+  constructor (
+    /** Original thrown error to log if possible, or an error message. */
+    public err: Error | string,
+    /** Color of the displayed alert. */
+    public color: string,
+    /** A custom message to display in the alert instead of err. */
+    msg?: string
+  ) {
     this.text = msg || err
-    this.color = color
   }
 }
diff --git a/src/model/JobState.model.js b/src/model/JobState.model.ts
similarity index 60%
rename from src/model/JobState.model.js
rename to src/model/JobState.model.ts
index 64746c284..47ab804c1 100644
--- a/src/model/JobState.model.js
+++ b/src/model/JobState.model.ts
@@ -15,31 +15,17 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Enumify } from 'enumify'
-
 /**
  * Cylc valid job states.
  *
  * @see https://cylc.github.io/cylc-admin/proposal-state-names.html#taskjob-states
  */
-class JobState extends Enumify {
-  static SUBMITTED = new JobState('submitted')
-  static SUBMIT_FAILED = new JobState('submit-failed')
-  static RUNNING = new JobState('running')
-  static SUCCEEDED = new JobState('succeeded')
-  static FAILED = new JobState('failed')
-  static _ = this.closeEnum()
-
-  /**
-   * Constructor.
-   * @param {String} name
-   */
-  constructor (name) {
-    super()
-    this.name = name
-  }
+export enum JobState {
+  SUBMITTED = 'submitted',
+  SUBMIT_FAILED = 'submit-failed',
+  RUNNING = 'running',
+  SUCCEEDED = 'succeeded',
+  FAILED = 'failed',
 }
 
-export const JobStateNames = JobState.enumValues.map(({ name }) => name)
-
-export default JobState
+export const JobStateNames: readonly JobState[] = Object.values(JobState)
diff --git a/src/model/Subscription.model.js b/src/model/Subscription.model.js
index ecc419d6d..4d59a05ea 100644
--- a/src/model/Subscription.model.js
+++ b/src/model/Subscription.model.js
@@ -16,7 +16,7 @@
  */
 
 import { toRaw } from 'vue'
-import ViewState from '@/model/ViewState.model'
+import { ViewState } from '@/model/ViewState.model'
 import { Alert } from '@/model/Alert.model'
 
 /**
@@ -77,7 +77,7 @@ class Subscription {
         subscriber.setAlert(new Alert(context.message, 'error'))
         if (this.debug) {
           // eslint-disable-next-line no-console
-          console.debug(`Subscription error: ${context.message}`, toRaw(viewState), context)
+          console.debug(`Subscription error: ${context.message}`, ViewState[toRaw(viewState)], context)
         }
       })
     }
diff --git a/src/model/TaskOutput.model.js b/src/model/TaskOutput.model.ts
similarity index 53%
rename from src/model/TaskOutput.model.js
rename to src/model/TaskOutput.model.ts
index e6fe99c7c..77f181362 100644
--- a/src/model/TaskOutput.model.js
+++ b/src/model/TaskOutput.model.ts
@@ -15,40 +15,22 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Enumify } from 'enumify'
-
-/**
- * @typedef {Object} TaskOutput
- * @property {string} name - enum name
- */
-class TaskOutput extends Enumify {
+export enum TaskOutput {
   // @see: https://cylc.github.io/cylc-admin/proposal-state-names.html#outputs
   // @see: https://github.com/cylc/cylc-flow/blob/bb79a6e03437927ecf97deb6a34fa8f1e7ab0835/cylc/flow/task_outputs.py
-  static EXPIRED = new TaskOutput('expired')
-  static SUBMITTED = new TaskOutput('submitted')
-  static SUBMIT_FAILED = new TaskOutput('submit-failed')
-  static STARTED = new TaskOutput('started')
-  static SUCCEEDED = new TaskOutput('succeeded')
-  static FAILED = new TaskOutput('failed')
-  static _ = this.closeEnum()
-
-  /**
-   * Constructor.
-   * @param {String} name
-   */
-  constructor (name) {
-    super()
-    this.name = name
-  }
+  EXPIRED = 'expired',
+  SUBMITTED = 'submitted',
+  SUBMIT_FAILED = 'submit-failed',
+  STARTED = 'started',
+  SUCCEEDED = 'succeeded',
+  FAILED = 'failed',
 }
 
-export const TASK_OUTPUT_NAMES = [
-  TaskOutput.SUBMITTED.name,
-  TaskOutput.STARTED.name,
-  TaskOutput.SUCCEEDED.name,
-  TaskOutput.SUBMIT_FAILED.name,
-  TaskOutput.FAILED.name,
-  TaskOutput.EXPIRED.name
+export const TASK_OUTPUT_NAMES: readonly TaskOutput[] = [
+  TaskOutput.SUBMITTED,
+  TaskOutput.STARTED,
+  TaskOutput.SUCCEEDED,
+  TaskOutput.SUBMIT_FAILED,
+  TaskOutput.FAILED,
+  TaskOutput.EXPIRED
 ]
-
-export default TaskOutput
diff --git a/src/model/TaskState.model.js b/src/model/TaskState.model.ts
similarity index 57%
rename from src/model/TaskState.model.js
rename to src/model/TaskState.model.ts
index 63501409a..793d050dd 100644
--- a/src/model/TaskState.model.js
+++ b/src/model/TaskState.model.ts
@@ -15,36 +15,26 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Enumify } from 'enumify'
-
 /**
  * Cylc valid task states.
  */
-export class TaskState extends Enumify {
-  static SUBMIT_FAILED = new TaskState('submit-failed')
-  static FAILED = new TaskState('failed')
-  static EXPIRED = new TaskState('expired')
-  static RUNNING = new TaskState('running')
-  static SUBMITTED = new TaskState('submitted')
-  static PREPARING = new TaskState('preparing')
-  static WAITING = new TaskState('waiting')
-  static SUCCEEDED = new TaskState('succeeded')
-  static _ = this.closeEnum()
-
-  /**
-   * Constructor.
-   * @param {String} name
-   */
-  constructor (name) {
-    super()
-    this.name = name
-  }
+export enum TaskState {
+  SUBMIT_FAILED = 'submit-failed',
+  FAILED = 'failed',
+  EXPIRED = 'expired',
+  RUNNING = 'running',
+  SUBMITTED = 'submitted',
+  PREPARING = 'preparing',
+  WAITING = 'waiting',
+  SUCCEEDED = 'succeeded',
 }
 
+export const TaskStateNames: readonly TaskState[] = Object.values(TaskState)
+
 /**
  * Task states ordered for display purposes.
  */
-export const TaskStateUserOrder = [
+export const TaskStateUserOrder: readonly TaskState[] = [
   TaskState.WAITING,
   TaskState.PREPARING,
   TaskState.SUBMITTED,
@@ -54,7 +44,3 @@ export const TaskStateUserOrder = [
   TaskState.FAILED,
   TaskState.EXPIRED
 ]
-
-export const TaskStateNames = TaskStateUserOrder.map(({ name }) => name)
-
-export default TaskState
diff --git a/src/model/User.model.js b/src/model/User.model.js
deleted file mode 100644
index 2c1d63237..000000000
--- a/src/model/User.model.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-/**
- * @typedef {object} User
- * @property {string} username - user name
- * @property {string[]} groups - user groups
- * @property {string} created - date when the user was created
- * @property {boolean} admin - whether the user is an administrator or not
- * @property {string} server - server URL
- * @property {string} owner - UIS owner
- * @property {string[]} permissions - list of permissions
- * @property {string} mode - single or multi user mode
- * @property {string} initials - user initials
- */
-export default class User {
-  constructor (username, groups, created, admin, server, owner, permissions, mode, initials) {
-    // the authenticated user
-    // (full info only available when authenticated via the hub)
-    this.username = username
-    this.groups = groups
-    this.created = created
-    this.admin = admin
-    this.server = server || '?' // server can be unset
-    // the UIS owner
-    // (i.e. the user who's workflows we are looking at)
-    // (this might not be the authenticated user for multi-user setups)
-    this.owner = owner
-    this.permissions = permissions
-    this.mode = mode
-    this.initials = initials
-  }
-}
diff --git a/src/model/User.model.ts b/src/model/User.model.ts
new file mode 100644
index 000000000..5c61d840c
--- /dev/null
+++ b/src/model/User.model.ts
@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export default class User {
+  constructor (
+    /** The authenticated user (full info only available when authenticated
+     * via the hub) */
+    public username: string,
+    /** User groups */
+    public groups: string[],
+    /** Date when the user was created */
+    public created: string,
+    /** Whether the user is an administrator or not */
+    public admin: boolean,
+    /** Server URL */
+    public server: string,
+    /** UIS owner (the user whose workflows we are looking at) (this might not
+     * be the authenticated user for multi-user setups) */
+    public owner: string,
+    /** List of permissions */
+    public permissions: string[],
+    public mode: 'single user' | 'multi user',
+    /** User initials */
+    public initials: string
+  ) {
+    this.server ||= '?' // server can be unset
+  }
+}
diff --git a/src/model/ViewState.model.js b/src/model/ViewState.model.ts
similarity index 81%
rename from src/model/ViewState.model.js
rename to src/model/ViewState.model.ts
index 2edcef7d0..0ec4f2afe 100644
--- a/src/model/ViewState.model.js
+++ b/src/model/ViewState.model.ts
@@ -15,8 +15,6 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Enumify } from 'enumify'
-
 /**
  * Represents the state of a view, like views with subscriptions, or other views
  * that load data.
@@ -27,12 +25,9 @@ import { Enumify } from 'enumify'
  * @see https://dev.to/mpocock1/state-management-how-to-tell-a-bad-boolean-from-a-good-boolean-260n
  * @see https://lillo.dev/articles/slaying-a-ui-antipattern/1-fetch-data-with-elm-pattern/
  */
-class ViewState extends Enumify {
-  static NO_STATE = new ViewState()
-  static LOADING = new ViewState()
-  static ERROR = new ViewState()
-  static COMPLETE = new ViewState()
-  static _ = this.closeEnum()
+export enum ViewState {
+  NO_STATE,
+  LOADING,
+  ERROR,
+  COMPLETE,
 }
-
-export default ViewState
diff --git a/src/model/WorkflowState.model.js b/src/model/WorkflowState.model.js
deleted file mode 100644
index 8fed318bc..000000000
--- a/src/model/WorkflowState.model.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { Enumify } from 'enumify'
-
-import {
-  mdiPauseCircle,
-  mdiPlayCircle,
-  mdiSkipNextCircle,
-  mdiStopCircle
-} from '@mdi/js'
-
-/**
- * Cylc valid workflow states.
- */
-export class WorkflowState extends Enumify {
-  static RUNNING = new WorkflowState('running', mdiPlayCircle)
-  static PAUSED = new WorkflowState('paused', mdiPauseCircle)
-  static STOPPING = new WorkflowState('stopping', mdiSkipNextCircle)
-  static STOPPED = new WorkflowState('stopped', mdiStopCircle)
-  static _ = this.closeEnum()
-
-  /**
-   * Constructor.
-   * @param {String} name
-   * @param {String} icon
-   */
-  constructor (name, icon) {
-    super()
-    this.name = name
-    this.icon = icon
-  }
-}
-
-/**
- * Workflow states ordered for display purposes.
- * @type {Map} - Using a map to prevent more unexpected sorting issues
- * @see https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order/38218582#38218582
- */
-export const WorkflowStateOrder = new Map([
-  [WorkflowState.RUNNING.name, 1],
-  [WorkflowState.PAUSED.name, 1],
-  [WorkflowState.STOPPING.name, 1],
-  [WorkflowState.STOPPED.name, 2],
-  [undefined, 9]
-])
-
-export default WorkflowState
diff --git a/src/model/WorkflowState.model.ts b/src/model/WorkflowState.model.ts
new file mode 100644
index 000000000..d518a38fd
--- /dev/null
+++ b/src/model/WorkflowState.model.ts
@@ -0,0 +1,53 @@
+/**
+ * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {
+  mdiPauseCircle,
+  mdiPlayCircle,
+  mdiSkipNextCircle,
+  mdiStopCircle
+} from '@mdi/js'
+
+/**
+ * Cylc valid workflow states.
+ */
+export enum WorkflowState {
+  RUNNING = 'running',
+  PAUSED = 'paused',
+  STOPPING = 'stopping',
+  STOPPED = 'stopped',
+}
+
+export const WorkflowStateIcons: ReadonlyMap<WorkflowState, string> = new Map([
+  [WorkflowState.RUNNING, mdiPlayCircle],
+  [WorkflowState.PAUSED, mdiPauseCircle],
+  [WorkflowState.STOPPING, mdiSkipNextCircle],
+  [WorkflowState.STOPPED, mdiStopCircle]
+])
+
+/**
+ * Workflow states ordered for display purposes.
+ */
+export function getWorkflowStateOrder (state: WorkflowState | undefined): number {
+  switch (state) {
+    case WorkflowState.RUNNING: return 1
+    case WorkflowState.PAUSED: return 1
+    case WorkflowState.STOPPING: return 1
+    case WorkflowState.STOPPED: return 2
+    default: return 9
+  }
+}
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.ts
similarity index 89%
rename from src/plugins/vuetify.js
rename to src/plugins/vuetify.ts
index 09ffeb662..15972de9c 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.ts
@@ -21,10 +21,14 @@ import { VCombobox } from 'vuetify/components/VCombobox'
 import { VSelect } from 'vuetify/components/VSelect'
 import { VTextarea } from 'vuetify/components/VTextarea'
 import { VTextField } from 'vuetify/components/VTextField'
-import colors from 'vuetify/lib/util/colors'
+import colors from 'vuetify/util/colors'
 import { mdiClose } from '@mdi/js'
+import {
+  type VuetifyOptions,
+  type DefaultsInstance,
+} from 'vuetify'
 
-const inputDefaults = Object.fromEntries([
+const inputDefaults: DefaultsInstance = Object.fromEntries([
   VAutocomplete,
   VCombobox,
   VSelect,
@@ -40,10 +44,7 @@ const inputDefaults = Object.fromEntries([
   }
 ]))
 
-/**
- * @type {import('vuetify').VuetifyOptions}
- */
-export const vuetifyOptions = {
+export const vuetifyOptions: VuetifyOptions = {
   theme: {
     defaultTheme: 'light',
     themes: {
diff --git a/src/services/mock/json-server.cjs b/src/services/mock/json-server.cjs
index 81dd0ca61..02ff63a9f 100644
--- a/src/services/mock/json-server.cjs
+++ b/src/services/mock/json-server.cjs
@@ -18,6 +18,7 @@
 // TODO: make it configurable
 const PORT = 3000
 
+/* eslint-disable @typescript-eslint/no-var-requires */
 const userProfile = require('./json/userprofile.json')
 const graphql = require('./graphql.cjs')
 const websockets = require('./websockets.cjs')
diff --git a/src/services/mock/json/index.cjs b/src/services/mock/json/index.cjs
index 2ab94d326..e8e06a40d 100644
--- a/src/services/mock/json/index.cjs
+++ b/src/services/mock/json/index.cjs
@@ -19,8 +19,8 @@ const IntrospectionQuery = require('./IntrospectionQuery.json')
 const userProfile = require('./userprofile.json')
 const taskProxy = require('./taskProxy.json')
 const familyProxy = require('./familyProxy.json')
-const workflowOne = require('./workflows/one')
-const workflowsMulti = require('./workflows/multi')
+const workflowOne = require('./workflows/one.json')
+const workflowsMulti = require('./workflows/multi.json')
 const { LogData } = require('./logData.cjs')
 const { LogFiles } = require('./logFiles.cjs')
 const analysisQuery = require('./analysisQuery.json')
diff --git a/src/services/mock/websockets.cjs b/src/services/mock/websockets.cjs
index a81d0dcd0..0455a5d3d 100644
--- a/src/services/mock/websockets.cjs
+++ b/src/services/mock/websockets.cjs
@@ -15,6 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+/* eslint-disable @typescript-eslint/no-var-requires */
 const { isArray } = require('lodash')
 const graphql = require('./graphql.cjs')
 
diff --git a/src/services/workflow.service.js b/src/services/workflow.service.js
index 80f454c1c..8609c7cec 100644
--- a/src/services/workflow.service.js
+++ b/src/services/workflow.service.js
@@ -17,7 +17,7 @@
 
 import { cloneDeep, isEqual } from 'lodash'
 import gql from 'graphql-tag'
-import ViewState from '@/model/ViewState.model'
+import { ViewState } from '@/model/ViewState.model'
 import Subscription from '@/model/Subscription.model'
 import {
   dummyMutations,
diff --git a/src/utils/aotf.js b/src/utils/aotf.js
index 32c65c00a..a858bf3b2 100644
--- a/src/utils/aotf.js
+++ b/src/utils/aotf.js
@@ -444,12 +444,7 @@ export function processMutations (mutations, types) {
  * @return {Array<String>}
  */
 export function getStates (text) {
-  const defaultStates = [
-    WorkflowState.RUNNING.name,
-    WorkflowState.PAUSED.name,
-    WorkflowState.STOPPING.name,
-    WorkflowState.STOPPED.name
-  ]
+  const defaultStates = Object.values(WorkflowState)
   if (!text) {
     return defaultStates
   }
diff --git a/src/utils/font-size.js b/src/utils/font-size.ts
similarity index 84%
rename from src/utils/font-size.js
rename to src/utils/font-size.ts
index 47f597536..9c96882d7 100644
--- a/src/utils/font-size.js
+++ b/src/utils/font-size.ts
@@ -23,10 +23,10 @@ export const INCREMENT = 2
 /**
  * Sets the font-size to a value.
  *
- * @param {?string} size - Value with units given (doesn't matter which unit).
- * If null then reset to default.
+ * @param size - Value with units given (doesn't matter which unit).
+ * If empty string then reset to default.
  */
-export function resetFontSize (size = null) {
+export function resetFontSize (size: string = '') {
   localStorage.fontSize = size
   document.documentElement.style.fontSize = size
 }
@@ -42,9 +42,9 @@ export function increaseFontSize () {
 /**
  * Get HTML element (computed) font size.
  *
- * @returns {number} current font size in px
+ * @returns current font size in px
  */
-export function getCurrentFontSize () {
+export function getCurrentFontSize (): number {
   const fontSize = window.getComputedStyle(document.documentElement).fontSize // px
   return parseFloat(fontSize)
 }
diff --git a/src/utils/index.js b/src/utils/index.ts
similarity index 74%
rename from src/utils/index.js
rename to src/utils/index.ts
index 525e5d43f..77b162858 100644
--- a/src/utils/index.js
+++ b/src/utils/index.ts
@@ -15,17 +15,20 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { watch } from 'vue'
+import {
+  watch,
+  type WatchOptions,
+  type WatchSource,
+} from 'vue'
 import { i18n } from '@/i18n'
 
 /**
  * i18n-enabled operation, to get the title respecting the locale used
  * in the application settings.
- * @param {string} key - i18n key
- * @param {Object} params - optional object key=value used in the i18n message
- * @returns {string}
+ * @param key - i18n key
+ * @param params - optional object key=value used in the i18n message
  */
-export const getPageTitle = (key, params = {}) => {
+export function getPageTitle (key: string, params = {}): string {
   return `${i18n.global.t('App.name')} | ${i18n.global.t(key, params)}`
 }
 
@@ -33,12 +36,12 @@ export const getPageTitle = (key, params = {}) => {
  * Watch source until it is truthy, then call the callback (and stop watching).
  *
  * Immediate by default.
- *
- * @param {import('vue').WatchSource} source
- * @param {import('vue').WatchCallback} callback
- * @param {import('vue').WatchOptions?} options
  */
-export const when = (source, callback, options = {}) => {
+export function when (
+  source: WatchSource<boolean>,
+  callback: () => void,
+  options: WatchOptions = {}
+): void {
   const unwatch = watch(
     source,
     (ready) => {
diff --git a/src/utils/tasks.js b/src/utils/tasks.js
index 370edf39c..f15dc4e20 100644
--- a/src/utils/tasks.js
+++ b/src/utils/tasks.js
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import TaskState from '@/model/TaskState.model'
+import { TaskState, TaskStateNames } from '@/model/TaskState.model'
 import { TASK_OUTPUT_NAMES } from '@/model/TaskOutput.model'
 
 /**
@@ -41,13 +41,8 @@ const isStoppedOrderedStates = [
  * @link @see https://github.com/cylc/cylc-flow/blob/d66ae5c3ce8c749c8178d1cd53cb8c81d1560346/lib/cylc/task_state_prop.py
  */
 function extractGroupState (childStates, isStopped = false) {
-  const states = isStopped ? isStoppedOrderedStates : TaskState.enumValues
-  for (const state of states) {
-    if (childStates.includes(state.name)) {
-      return state.name
-    }
-  }
-  return ''
+  const states = isStopped ? isStoppedOrderedStates : TaskStateNames
+  return states.find((state) => childStates.includes(state)) ?? ''
 }
 
 function latestJob (taskProxy) {
diff --git a/src/utils/uid.js b/src/utils/uid.ts
similarity index 73%
rename from src/utils/uid.js
rename to src/utils/uid.ts
index 876e86325..8884c18db 100644
--- a/src/utils/uid.js
+++ b/src/utils/uid.ts
@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
  *
  * This program is free software: you can redistribute it and/or modify
@@ -23,7 +23,7 @@
  * in the event they are changed in cylc-flow.
  */
 
-/* eslint-disable */
+/* eslint-disable no-useless-escape */
 
 const UNIVERSAL_ID = new RegExp(`
     (?=.)
@@ -121,10 +121,24 @@ const RELATIVE_ID = new RegExp(`
     $
 `.replace(/[\s\n\r]/g, ''))
 
-/* eslint-enable */
+/* eslint-enable no-useless-escape */
 
-function detokenise (tokens, workflow = true, relative = true) {
-  let parts = []
+interface TokenFields {
+  user?: string
+  workflow?: string
+  cycle?: string
+  task?: string
+  job?: string
+}
+
+type TokenKey = keyof TokenFields
+
+type TokenTree = [TokenKey | 'workflow-part', string, Tokens][]
+
+function detokenise (
+  tokens: Tokens, workflow: boolean = true, relative: boolean = true
+): string {
+  let parts: string[] = []
   let ret = ''
 
   if (workflow) {
@@ -159,7 +173,7 @@ function detokenise (tokens, workflow = true, relative = true) {
   return ret
 }
 
-class Tokens {
+export class Tokens implements TokenFields {
   /* Represents a Cylc UID.
    *
    * Provides the interfaces for parsing to and from string IDs.
@@ -184,29 +198,35 @@ class Tokens {
    *   tokens.relativeID  // the task part of the ID (the bit after the //)
    */
 
-  static KEYS = ['user', 'workflow', 'cycle', 'task', 'job']
+  static KEYS: readonly TokenKey[] = ['user', 'workflow', 'cycle', 'task', 'job']
+  static KEYS_LO_TO_HI: readonly TokenKey[] = [...Tokens.KEYS].reverse()
 
-  constructor (id, relative = false) {
-    let match
-    let user
-    let workflow
-    let cycle
-    let task
-    let job
+  user?: string
+  workflow?: string
+  cycle?: string
+  task?: string
+  job?: string
 
-    if (id === null) {
+  id!: string
+  workflowID!: string
+  relativeID!: string
+  namespace?: string
+  edge?: [Tokens, Tokens]
+
+  constructor (id: string, relative: boolean = false) {
+    if (id == null) {
       throw new Error(`Invalid ID ${id}`)
     }
 
+    let match: RegExpMatchArray | null = null
+
     // try to match relative ID (the leading // is implicit)
     if (relative) {
       match = `//${id}`.match(RELATIVE_ID)
       if (match) {
-        user = undefined
-        workflow = undefined
-        cycle = match[1]
-        task = match[3]
-        job = match[5]
+        this.cycle = match[1]
+        this.task = match[3]
+        this.job = match[5]
       }
     }
 
@@ -214,46 +234,30 @@ class Tokens {
     if (!match) {
       match = id.match(UNIVERSAL_ID)
       if (match) {
-        user = match[1]
-        workflow = match[3]
-        cycle = match[5]
-        task = match[7]
-        job = match[9]
+        this.user = match[1]
+        this.workflow = match[3]
+        this.cycle = match[5]
+        this.task = match[7]
+        this.job = match[9]
+      } else {
+        throw new Error(`Invalid ID ${id}`)
       }
     }
 
-    if (!match) {
-      throw new Error(`Invalid ID ${id}`)
-    }
-
-    // UID tokens
-    this.user = user
-    this.workflow = workflow
-    this.cycle = cycle
-    this.task = task
-    this.job = job
-
-    // derived properties
-    this.namespace = undefined
-    this.edge = undefined
-    this.id = undefined
-    this.workflowID = undefined
-    this.relativeID = undefined
-
-    // update derived properties
+    // set derived properties
     this.compute()
   }
 
-  compute () {
+  protected compute (): void {
     this.id = detokenise(this)
 
-    if (this.cycle && this.cycle.startsWith('$namespace|')) {
+    if (this.cycle?.startsWith('$namespace|')) {
       // this is a namespace definition
       this.namespace = this.cycle.replace('$namespace|', '')
       this.cycle = undefined
       this.task = undefined
       this.job = undefined
-    } else if (this.cycle && this.cycle.startsWith('$edge|')) {
+    } else if (this.cycle?.startsWith('$edge|')) {
       // this is an edge definition
       const [left, right] = this.id.replace(/.*\$edge\|/, '').split('|')
       this.edge = [new Tokens(left, true), new Tokens(right, true)]
@@ -266,70 +270,61 @@ class Tokens {
     this.relativeID = detokenise(this, false, true)
   }
 
-  set (fields) {
-    for (const [key, value] of Object.entries(fields)) {
-      if (Tokens.KEYS.indexOf(key) === -1) {
-        throw new Error(`Invalid key: ${key}`)
-      }
-      if (typeof value !== 'string' && typeof value !== 'undefined') {
-        throw new Error(`Invalid type for value: ${value}`)
-      }
-      this[key] = value
-    }
-    this.compute()
-  }
-
-  clone (fields = null) {
+  clone (fields?: TokenFields): Tokens {
     const ret = Object.create(
       Object.getPrototypeOf(this),
       Object.getOwnPropertyDescriptors(this)
     )
     if (fields) {
-      ret.set(fields)
+      for (const [key, value] of Object.entries(fields)) {
+        if (Tokens.KEYS.indexOf(key as TokenKey) === -1) {
+          throw new Error(`Invalid key: ${key}`)
+        }
+        if (typeof value !== 'string' && typeof value !== 'undefined') {
+          throw new Error(`Invalid type for value: ${value}`)
+        }
+        ret[key] = value
+      }
+      ret.compute()
     }
     return ret
   }
 
-  workflowHierarchy () {
-    const hier = []
-    const tokensList = []
-    let tokens
+  workflowHierarchy (): [string, Tokens][] {
+    if (!this.workflow) {
+      throw new Error('Cannot get workflow hierarchy for a relative ID')
+    }
+    const hier: string[] = []
+    const tokensList: [string, Tokens][] = []
     for (const part of this.workflow.split('/')) {
       // for each level of the hierarchy
       hier.push(part)
       // copy these tokens
-      tokens = this.clone()
-      // amending the workflow ID to match its level in the hierarchy
-      tokens.set({
+      const tokens = this.clone({
+        // amending the workflow ID to match its level in the hierarchy
         workflow: hier.join('/'),
         // wipe the relative tokens in-case they were set
         cycle: undefined,
         task: undefined,
-        job: undefined
+        job: undefined,
       })
       tokensList.push([part, tokens])
     }
     return tokensList
   }
 
-  lowestToken () {
-    let key
-    for (let ind = Tokens.KEYS.length; ind >= 0; ind--) {
-      key = Tokens.KEYS[ind]
-      if (this[key]) {
-        return key
-      }
-    }
+  lowestToken (): TokenKey {
+    return Tokens.KEYS_LO_TO_HI.find(key => this[key]) as TokenKey
   }
 
-  tree () {
-    const ret = []
+  tree (): TokenTree {
+    const ret: TokenTree = []
     if (this.user) {
       let tokens = new Tokens(`~${this.user}`)
       ret.push(['user', this.user, tokens])
       if (this.workflow) {
         const parts = this.workflow.split('/')
-        const last = parts.pop()
+        const last = parts.pop() as string
         for (const part of parts) {
           if (!tokens.workflow) {
             tokens = tokens.clone({ workflow: part })
@@ -361,5 +356,3 @@ class Tokens {
     return ret
   }
 }
-
-export { Tokens }
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 8c76abde7..51c39c9c4 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -144,9 +144,10 @@ import { mdiBook, mdiBookMultiple, mdiBookOpenVariant, mdiCog, mdiHubspot, mdiTa
 import { getPageTitle } from '@/utils/index'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
 import { createUrl } from '@/utils/urls'
-import { WorkflowState, WorkflowStateOrder } from '@/model/WorkflowState.model'
+import { WorkflowState, getWorkflowStateOrder } from '@/model/WorkflowState.model'
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
 import gql from 'graphql-tag'
+import { upperFirst } from 'lodash'
 
 const QUERY = gql`
 subscription App {
@@ -224,12 +225,12 @@ export default {
           acc[state] = (acc[state] || 0) + 1
           return acc
         }, {})
-      return WorkflowState.enumValues
-        .sort((left, right) => WorkflowStateOrder.get(left) - WorkflowStateOrder.get(right))
+      return Object.values(WorkflowState)
+        .sort((left, right) => getWorkflowStateOrder(left) - getWorkflowStateOrder(right))
         .map(state => {
           return {
-            text: state.name.charAt(0).toUpperCase() + state.name.slice(1),
-            count: count[state.name] || 0
+            text: upperFirst(state),
+            count: count[state] || 0
           }
         })
     },
diff --git a/src/views/Guide.vue b/src/views/Guide.vue
index cd45f659b..f37b8a212 100644
--- a/src/views/Guide.vue
+++ b/src/views/Guide.vue
@@ -55,24 +55,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <td>Job</td>
               </tr>
               <tr
-                v-bind:key="state.name.name"
                 v-for="state of states"
+                :key="state"
               >
                 <td style="font-size: 2em;">
                   <!-- set times to make the progress change -->
                   <task
                     :task="{
-                      state: state.name,
-                      task: {meanElapsedTime: 30}
+                      state,
+                      task: { meanElapsedTime: 30 }
                     }"
                     :startTime="String(Date.now())"
                   />
                 </td>
                 <td>
-                  <span>{{ state.name }}</span>
+                  <span>{{ state }}</span>
                 </td>
                 <td style="font-size: 2em;">
-                  <job :status="state.name" />
+                  <job :status="state" />
                 </td>
               </tr>
             </table>
@@ -120,7 +120,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <template v-slot:prepend>
                   <task
                     style="font-size: 2em;"
-                    :task="{state: 'waiting', isHeld: true}"
+                    :task="{ state: TaskState.WAITING, isHeld: true }"
                     class="mr-4"
                   />
                 </template>
@@ -137,7 +137,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <template v-slot:prepend>
                   <task
                     style="font-size: 2em;"
-                    :task="{state: 'waiting', isQueued: true}"
+                    :task="{ state: TaskState.WAITING, isQueued: true }"
                     class="mr-4"
                   />
                 </template>
@@ -153,7 +153,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <template v-slot:prepend>
                   <task
                     style="font-size: 2em;"
-                    :task="{state: 'waiting', isRunahead: true}"
+                    :task="{ state: TaskState.WAITING, isRunahead: true }"
                     class="mr-4"
                   />
                 </template>
@@ -186,7 +186,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import Task from '@/components/cylc/Task.vue'
 import Job from '@/components/cylc/Job.vue'
-import { TaskStateUserOrder } from '@/model/TaskState.model'
+import { TaskState, TaskStateUserOrder } from '@/model/TaskState.model'
 import { getPageTitle } from '@/utils'
 
 export default {
@@ -202,8 +202,9 @@ export default {
   },
   // TODO: extract task states and descriptions from the GraphQL API
   //       once this is an enumeration.
-  data: () => ({
-    states: TaskStateUserOrder
+  setup: () => ({
+    states: TaskStateUserOrder,
+    TaskState,
   })
 }
 </script>
diff --git a/src/views/UserProfile.vue b/src/views/UserProfile.vue
index 83f6e92dd..f9f80dd7f 100644
--- a/src/views/UserProfile.vue
+++ b/src/views/UserProfile.vue
@@ -246,9 +246,9 @@ import { mdiCog, mdiFormatFontSizeDecrease, mdiFormatFontSizeIncrease } from '@m
 import { useCyclePointsOrderDesc, useJobTheme, useReducedAnimation } from '@/composables/localStorage'
 import { getPageTitle } from '@/utils/index'
 import { decreaseFontSize, getCurrentFontSize, increaseFontSize, resetFontSize } from '@/utils/font-size'
-import { allViews, useDefaultView } from '@/views/views.js'
+import { allViews, useDefaultView } from '@/views/views'
 import Job from '@/components/cylc/Job.vue'
-import JobState from '@/model/JobState.model'
+import { JobStateNames } from '@/model/JobState.model'
 
 // TODO: update where user preferences are stored after #335
 
@@ -293,7 +293,7 @@ export default {
     },
   },
 
-  jobStates: JobState.enumValues.map(state => state.name),
+  jobStates: JobStateNames,
 
   jobThemes: [
     'default',
diff --git a/src/views/Workspace.vue b/src/views/Workspace.vue
index c8dfb9c3b..1d9220710 100644
--- a/src/views/Workspace.vue
+++ b/src/views/Workspace.vue
@@ -38,11 +38,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import { ref } from 'vue'
 import { onBeforeRouteUpdate } from 'vue-router'
-import { allViews } from '@/views/views.js'
+import { allViews } from '@/views/views'
 import { getPageTitle } from '@/utils/index'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionMixin from '@/mixins/subscription'
-import ViewState from '@/model/ViewState.model'
+import { ViewState } from '@/model/ViewState.model'
 import Lumino from '@/components/cylc/workflow/Lumino.vue'
 import Toolbar from '@/components/cylc/workflow/Toolbar.vue'
 import { toolbarHeight } from '@/utils/toolbar'
diff --git a/src/views/views.js b/src/views/views.ts
similarity index 89%
rename from src/views/views.js
rename to src/views/views.ts
index a3f815652..a6e70ec4e 100644
--- a/src/views/views.js
+++ b/src/views/views.ts
@@ -15,7 +15,10 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { defineAsyncComponent } from 'vue'
+import {
+  defineAsyncComponent,
+  type Component,
+} from 'vue'
 import { useLocalStorage } from '@vueuse/core'
 import {
   mdiChartLine,
@@ -36,11 +39,12 @@ const AnalysisView = defineAsyncComponent(() => import('@/views/Analysis.vue'))
 const GanttView = defineAsyncComponent(() => import('@/views/Gantt.vue'))
 const SimpleTreeView = defineAsyncComponent(() => import('@/views/SimpleTree.vue'))
 
-/**
- * @typedef {Object} CylcView
- * @property {import('vue').DefineComponent} component - the dynamic async Vue component
- * @property {string} icon - the icon for this view
- */
+export interface CylcView {
+  /** The dynamic async Vue component */
+  component: Component
+  /** The icon for this view */
+  icon: string
+}
 
 export const TREE = 'Tree'
 
@@ -52,10 +56,8 @@ export const TREE = 'Tree'
  *
  * Note for peformance reasons this should not be made reactive as they are
  * already Vue components.
- *
- * @type {Map<string, CylcView>}
  */
-export const allViews = new Map([
+export const allViews: Map<string, CylcView> = new Map([
   [TREE, { component: TreeView, icon: mdiFileTree }],
   ['Table', { component: TableView, icon: mdiTable }],
   ['Graph', { component: GraphView, icon: mdiGraph }],
diff --git a/tests/e2e/specs/dashboard.cy.js b/tests/e2e/specs/dashboard.cy.js
index a7e0e568a..a5afe5d12 100644
--- a/tests/e2e/specs/dashboard.cy.js
+++ b/tests/e2e/specs/dashboard.cy.js
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { WorkflowStateOrder } from '@/model/WorkflowState.model'
+import { WorkflowState } from '@/model/WorkflowState.model'
 
 describe('Dashboard', () => {
   beforeEach(() => {
@@ -45,7 +45,7 @@ describe('Dashboard', () => {
       .then($tdElement => {
         return $tdElement[1].textContent.toLowerCase()
       })
-      .should('equal', [...WorkflowStateOrder.entries()][0][0])
+      .should('equal', Object.values(WorkflowState)[0])
   })
 
   it('Disables cylc hub button in single user mode', () => {
diff --git a/tests/e2e/specs/table.cy.js b/tests/e2e/specs/table.cy.js
index 40afeaae9..03d9fcd92 100644
--- a/tests/e2e/specs/table.cy.js
+++ b/tests/e2e/specs/table.cy.js
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import TaskState from '@/model/TaskState.model'
+import { TaskState } from '@/model/TaskState.model'
 
 const initialNumRows = 7
 
@@ -58,14 +58,14 @@ describe('Table view', () => {
         .should('have.length', initialNumRows)
       cy
         .get('td > div.d-flex > div')
-        .contains(TaskState.FAILED.name)
+        .contains(TaskState.FAILED)
         .should('be.visible')
       cy
         .get('[data-cy="filter task state"]')
         .click()
       cy
         .get('.v-list-item')
-        .contains(TaskState.RUNNING.name)
+        .contains(TaskState.RUNNING)
         .click({ force: true })
       cy
         .get('td > div.d-flex > div')
@@ -85,7 +85,7 @@ describe('Table view', () => {
         .click()
       cy
         .get('.v-list-item')
-        .contains(TaskState.SUCCEEDED.name)
+        .contains(TaskState.SUCCEEDED)
         .click({ force: true })
       cy
         .get('.c-table table > tbody > tr')
diff --git a/tests/e2e/specs/tree.cy.js b/tests/e2e/specs/tree.cy.js
index 99174a096..6ad018edb 100644
--- a/tests/e2e/specs/tree.cy.js
+++ b/tests/e2e/specs/tree.cy.js
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import TaskState from '@/model/TaskState.model'
+import { TaskState, TaskStateNames } from '@/model/TaskState.model'
 
 describe('Tree view', () => {
   it('Should display cycle points for the mocked workflow', () => {
@@ -217,7 +217,7 @@ describe('Tree view', () => {
       cy.get('[data-cy="filter task state"]')
         .click()
         .get('.v-list-item')
-        .contains(new RegExp(`^${TaskState.FAILED.name}$`))
+        .contains(new RegExp(`^${TaskState.FAILED}$`))
         .click()
       for (const name of [/^succeeded$/, /^retrying$/]) {
         cy.get('.node-data-task')
@@ -243,7 +243,7 @@ describe('Tree view', () => {
         .get('[data-cy="filter task state"]')
         .click()
         .get('.v-list-item')
-        .contains(TaskState.WAITING.name)
+        .contains(TaskState.WAITING)
         .click({ force: true })
       cy
         .get('.node-data-task:visible')
@@ -343,12 +343,11 @@ describe('Tree view', () => {
     cy.visit('/#/tree/one')
     cy.get('[data-cy="filter task state"]')
       .click()
-    // eslint-disable-next-line no-lone-blocks
-    TaskState.enumValues.forEach(state => {
+    for (const state of TaskStateNames) {
       cy.get('.v-list-item')
-        .contains(state.name)
+        .contains(state)
         .click({ force: true })
-    })
+    }
     // Click outside to close dropdown
     cy.get('noscript')
       .click({ force: true })
diff --git a/tests/unit/components/cylc/gscan/gscan.vue.spec.js b/tests/unit/components/cylc/gscan/gscan.vue.spec.js
index 5ba158036..2af0eeead 100644
--- a/tests/unit/components/cylc/gscan/gscan.vue.spec.js
+++ b/tests/unit/components/cylc/gscan/gscan.vue.spec.js
@@ -23,13 +23,13 @@ import GScan from '@/components/cylc/gscan/GScan.vue'
 import CylcObjectPlugin from '@/components/cylc/cylcObject/plugin'
 import {
   WorkflowState,
-  WorkflowStateOrder
+  getWorkflowStateOrder
 } from '@/model/WorkflowState.model'
-import TaskState from '@/model/TaskState.model'
+import { TaskState } from '@/model/TaskState.model'
 import {
   getWorkflowTreeSortValue,
   sortedWorkflowTree
-} from '@/components/cylc/gscan/sort.js'
+} from '@/components/cylc/gscan/sort'
 
 import {
   TEST_TREE,
@@ -58,15 +58,15 @@ describe('GScan component', () => {
   describe('Sorting', () => {
     it('sets workflow sort order by status', () => {
       // for each worflow state ...
-      for (const workflowState of WorkflowState) {
+      for (const workflowState of Object.values(WorkflowState)) {
         // it should associate a workflow with the correct sort order
         expect(
           getWorkflowTreeSortValue({
             type: 'workflow',
-            node: { status: workflowState.name },
+            node: { status: workflowState },
             children: []
           })
-        ).to.equal(WorkflowStateOrder.get(workflowState.name))
+        ).to.equal(getWorkflowStateOrder(workflowState))
 
         // it should associate a nested workflow with the correct sort order
         expect(
@@ -76,7 +76,7 @@ describe('GScan component', () => {
             children: [
               {
                 type: 'workflow',
-                node: { status: workflowState.name },
+                node: { status: workflowState },
                 children: []
               },
               {
@@ -87,7 +87,7 @@ describe('GScan component', () => {
               }
             ]
           })
-        ).to.equal(WorkflowStateOrder.get(workflowState.name))
+        ).to.equal(getWorkflowStateOrder(workflowState))
       }
     })
 
@@ -135,7 +135,7 @@ describe('GScan component', () => {
       const filteredOutNodesCache = new Map()
       // filter for all workflow states
       await wrapper.setData({
-        filters: { 'workflow state': WorkflowStateOrder.keys() },
+        filters: { 'workflow state': Object.values(WorkflowState) },
       })
       filterNodes(wrapper, filteredOutNodesCache)
       expect(getIDMap(filteredOutNodesCache)).toEqual({
@@ -152,7 +152,7 @@ describe('GScan component', () => {
       const filteredOutNodesCache = new Map()
 
       await wrapper.setData({
-        filters: { 'workflow state': [WorkflowState.RUNNING.name] },
+        filters: { 'workflow state': [WorkflowState.RUNNING] },
       })
       filterNodes(wrapper, filteredOutNodesCache)
       expect(getIDMap(filteredOutNodesCache)).toEqual({
@@ -166,8 +166,8 @@ describe('GScan component', () => {
       await wrapper.setData({
         filters: {
           'workflow state': [
-            WorkflowState.STOPPING.name,
-            WorkflowState.STOPPED.name,
+            WorkflowState.STOPPING,
+            WorkflowState.STOPPED,
           ]
         },
       })
@@ -211,7 +211,7 @@ describe('GScan component', () => {
       const filteredOutNodesCache = new Map()
 
       await wrapper.setData({
-        filters: { 'task state': [TaskState.RUNNING.name] }
+        filters: { 'task state': [TaskState.RUNNING] }
       })
       filterNodes(wrapper, filteredOutNodesCache)
       expect(getIDMap(filteredOutNodesCache)).toEqual({
@@ -223,7 +223,7 @@ describe('GScan component', () => {
       })
 
       await wrapper.setData({
-        filters: { 'task state': [TaskState.SUBMITTED.name] }
+        filters: { 'task state': [TaskState.SUBMITTED] }
       })
       filterNodes(wrapper, filteredOutNodesCache)
       expect(getIDMap(filteredOutNodesCache)).toEqual({
@@ -242,8 +242,8 @@ describe('GScan component', () => {
       await wrapper.setData({
         searchWorkflows: 'a',
         filters: {
-          'workflow state': [WorkflowState.STOPPED.name],
-          'task state': [TaskState.SUBMIT_FAILED.name],
+          'workflow state': [WorkflowState.STOPPED],
+          'task state': [TaskState.SUBMIT_FAILED],
         },
       })
       filterNodes(wrapper, filteredOutNodesCache)
diff --git a/tests/unit/components/cylc/gscan/utils.js b/tests/unit/components/cylc/gscan/utils.js
index 96765575b..8ab80e0d2 100644
--- a/tests/unit/components/cylc/gscan/utils.js
+++ b/tests/unit/components/cylc/gscan/utils.js
@@ -16,21 +16,21 @@
  */
 
 import { WorkflowState } from '@/model/WorkflowState.model'
-import TaskState from '@/model/TaskState.model'
+import { TaskState } from '@/model/TaskState.model'
 import { Tokens } from '@/utils/uid'
 
 const RUNNING_STATE_TOTALS = {
-  [TaskState.RUNNING.name]: 1,
-  [TaskState.SUBMITTED.name]: 0,
+  [TaskState.RUNNING]: 1,
+  [TaskState.SUBMITTED]: 0,
 }
 
 const SUBMITTED_STATE_TOTALS = {
-  [TaskState.RUNNING.name]: 0,
-  [TaskState.SUBMITTED.name]: 1,
+  [TaskState.RUNNING]: 0,
+  [TaskState.SUBMITTED]: 1,
 }
 
 const SUBMIT_FAILED_STATE_TOTALS = {
-  [TaskState.SUBMIT_FAILED.name]: 1,
+  [TaskState.SUBMIT_FAILED]: 1,
 }
 
 export const TEST_TREE = {
@@ -52,7 +52,7 @@ export const TEST_TREE = {
               type: 'workflow',
               tokens: new Tokens('~u/a/x1'),
               node: {
-                status: WorkflowState.STOPPED.name,
+                status: WorkflowState.STOPPED,
                 stateTotals: SUBMIT_FAILED_STATE_TOTALS,
                 latestStateTasks: [],
               }
@@ -63,7 +63,7 @@ export const TEST_TREE = {
               type: 'workflow',
               tokens: new Tokens('~u/a/x2'),
               node: {
-                status: WorkflowState.STOPPED.name,
+                status: WorkflowState.STOPPED,
                 latestStateTasks: [],
               }
             }
@@ -75,7 +75,7 @@ export const TEST_TREE = {
           type: 'workflow',
           tokens: new Tokens('~u/b'),
           node: {
-            status: WorkflowState.STOPPING.name,
+            status: WorkflowState.STOPPING,
             stateTotals: RUNNING_STATE_TOTALS,
             latestStateTasks: [],
           }
@@ -86,7 +86,7 @@ export const TEST_TREE = {
           type: 'workflow',
           tokens: new Tokens('~u/c'),
           node: {
-            status: WorkflowState.RUNNING.name,
+            status: WorkflowState.RUNNING,
             stateTotals: SUBMITTED_STATE_TOTALS,
             latestStateTasks: [],
           }
diff --git a/tests/unit/components/cylc/gscan/workflowicon.spec.js b/tests/unit/components/cylc/gscan/workflowicon.spec.js
index be4226129..922d50abd 100644
--- a/tests/unit/components/cylc/gscan/workflowicon.spec.js
+++ b/tests/unit/components/cylc/gscan/workflowicon.spec.js
@@ -17,7 +17,7 @@
 
 import { shallowMount } from '@vue/test-utils'
 import WorkflowIcon from '@/components/cylc/gscan/WorkflowIcon.vue'
-import WorkflowState from '@/model/WorkflowState.model'
+import { WorkflowState, WorkflowStateIcons } from '@/model/WorkflowState.model'
 import { createVuetify } from 'vuetify'
 import { mdiHelpCircle } from '@mdi/js'
 
@@ -30,8 +30,8 @@ describe('WorkflowIcon', () => {
       expected: mdiHelpCircle
     },
     {
-      status: WorkflowState.STOPPED.name,
-      expected: WorkflowState.STOPPED.icon
+      status: WorkflowState.STOPPED,
+      expected: WorkflowStateIcons.get(WorkflowState.STOPPED)
     },
   ])('uses the right icon for state: $status', ({ status, expected }) => {
     const wrapper = shallowMount(WorkflowIcon, {
diff --git a/tests/unit/components/cylc/table/table.data.js b/tests/unit/components/cylc/table/table.data.js
index f51dc8276..14b519083 100644
--- a/tests/unit/components/cylc/table/table.data.js
+++ b/tests/unit/components/cylc/table/table.data.js
@@ -14,8 +14,8 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import TaskState from '@/model/TaskState.model'
-import JobState from '@/model/JobState.model'
+import { TaskState } from '@/model/TaskState.model'
+import { JobState } from '@/model/JobState.model'
 import { Tokens } from '@/utils/uid'
 
 const tk = {
@@ -32,7 +32,7 @@ export const simpleTableTasks = [
       tokens: tk.taskA,
       node: {
         id: tk.taskA.id,
-        state: TaskState.RUNNING.name,
+        state: TaskState.RUNNING,
         task: {
           meanElapsedTime: 2,
         },
@@ -49,7 +49,7 @@ export const simpleTableTasks = [
             submittedTime: new Date().toISOString(),
             startedTime: new Date().toISOString(),
             finishedTime: null,
-            state: JobState.RUNNING.name
+            state: JobState.RUNNING
           },
           children: []
         }
@@ -66,7 +66,7 @@ export const simpleTableTasks = [
         submittedTime: new Date().toISOString(),
         startedTime: new Date().toISOString(),
         finishedTime: null,
-        state: JobState.RUNNING.name
+        state: JobState.RUNNING
       },
       children: []
     },
@@ -79,7 +79,7 @@ export const simpleTableTasks = [
       tokens: tk.taskB,
       node: {
         id: tk.taskB.id,
-        state: TaskState.WAITING.name,
+        state: TaskState.WAITING,
         name: 'taskB',
       },
       children: []
@@ -94,7 +94,7 @@ export const simpleTableTasks = [
       tokens: tk.taskC,
       node: {
         id: tk.taskC.id,
-        state: TaskState.SUBMITTED.name,
+        state: TaskState.SUBMITTED,
         name: 'taskC',
       },
       children: []
diff --git a/tests/unit/components/cylc/table/table.vue.spec.js b/tests/unit/components/cylc/table/table.vue.spec.js
index 9d9fd41ed..5ecc7001c 100644
--- a/tests/unit/components/cylc/table/table.vue.spec.js
+++ b/tests/unit/components/cylc/table/table.vue.spec.js
@@ -19,7 +19,7 @@ import { mount } from '@vue/test-utils'
 import { createVuetify } from 'vuetify'
 import sinon from 'sinon'
 import { simpleTableTasks } from './table.data'
-import TaskState from '@/model/TaskState.model'
+import { TaskState } from '@/model/TaskState.model'
 import CylcObjectPlugin from '@/components/cylc/cylcObject/plugin'
 import Table from '@/components/cylc/table/Table.vue'
 import WorkflowService from '@/services/workflow.service'
@@ -106,7 +106,7 @@ describe('Table component', () => {
         wrapper.vm.tasksFilter = {
           id: '',
           states: [
-            TaskState.WAITING.name
+            TaskState.WAITING
           ]
         }
         // await nextTick()
@@ -122,7 +122,7 @@ describe('Table component', () => {
         wrapper.vm.tasksFilter = {
           id: 'taskA',
           states: [
-            TaskState.WAITING.name
+            TaskState.WAITING
           ]
         }
         expect(wrapper.vm.filteredTasks.length).to.equal(0)
diff --git a/tests/unit/components/cylc/toolbar.vue.spec.js b/tests/unit/components/cylc/toolbar.vue.spec.js
index ccefc99df..0f7120497 100644
--- a/tests/unit/components/cylc/toolbar.vue.spec.js
+++ b/tests/unit/components/cylc/toolbar.vue.spec.js
@@ -19,7 +19,7 @@ import { mount } from '@vue/test-utils'
 import { createVuetify } from 'vuetify'
 import { createStore } from 'vuex'
 import Toolbar from '@/components/cylc/Toolbar.vue'
-import WorkflowState from '@/model/WorkflowState.model'
+import { WorkflowState } from '@/model/WorkflowState.model'
 import storeOptions from '@/store/options'
 
 describe('Toolbar component', () => {
@@ -45,7 +45,7 @@ describe('Toolbar component', () => {
       {
         id: 'user/id',
         name: 'test',
-        status: WorkflowState.RUNNING.name
+        status: WorkflowState.RUNNING
       }
     ]
     store.state.workflows.workflowName = 'test'
diff --git a/tests/unit/components/cylc/workflow/toolbar.vue.spec.js b/tests/unit/components/cylc/workflow/toolbar.vue.spec.js
index 87cfc9cc2..a00265b9a 100644
--- a/tests/unit/components/cylc/workflow/toolbar.vue.spec.js
+++ b/tests/unit/components/cylc/workflow/toolbar.vue.spec.js
@@ -37,7 +37,7 @@ describe('Workspace toolbar component', () => {
         plugins: [store, createVuetify(), CylcObjectPlugin],
       },
       props: {
-        views: [],
+        views: new Map(),
         workflowName: 'strewth',
       },
     })
diff --git a/tests/unit/mixins/subscription.spec.js b/tests/unit/mixins/subscription.spec.js
index 51c79076d..725536bf6 100644
--- a/tests/unit/mixins/subscription.spec.js
+++ b/tests/unit/mixins/subscription.spec.js
@@ -20,7 +20,7 @@ import sinon from 'sinon'
 import { toRaw } from 'vue'
 import { createStore } from 'vuex'
 import { Alert } from '@/model/Alert.model'
-import ViewState from '@/model/ViewState.model'
+import { ViewState } from '@/model/ViewState.model'
 import storeOptions from '@/store/options'
 import subscriptionMixin from '@/mixins/subscription'
 
diff --git a/tests/unit/model/subscription.model.spec.js b/tests/unit/model/subscription.model.spec.js
index 79c8b7669..98c0be747 100644
--- a/tests/unit/model/subscription.model.spec.js
+++ b/tests/unit/model/subscription.model.spec.js
@@ -19,7 +19,7 @@ import sinon from 'sinon'
 import gql from 'graphql-tag'
 import Subscription from '@/model/Subscription.model'
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
-import ViewState from '@/model/ViewState.model'
+import { ViewState } from '@/model/ViewState.model'
 
 describe('SubscriptionQuery model', () => {
   const query = gql`query { workflow { id } }`
diff --git a/tests/unit/model/taskstate.model.spec.js b/tests/unit/model/taskstate.model.spec.js
index 491dc8ef1..0c6ec6711 100644
--- a/tests/unit/model/taskstate.model.spec.js
+++ b/tests/unit/model/taskstate.model.spec.js
@@ -23,7 +23,7 @@ import {
 describe('TaskState model', () => {
   describe('TaskStateUserOrder', () => {
     it('contains the same states as TaskState in a different order', () => {
-      expect([...TaskState].sort()).to.deep.equal(TaskStateUserOrder.sort())
+      expect(Object.values(TaskState).sort()).to.deep.equal(TaskStateUserOrder.sort())
     })
   })
 })
diff --git a/tests/unit/services/workflow.service.spec.js b/tests/unit/services/workflow.service.spec.js
index 3ae3bbff3..6044f89f4 100644
--- a/tests/unit/services/workflow.service.spec.js
+++ b/tests/unit/services/workflow.service.spec.js
@@ -27,7 +27,7 @@ import Subscription from '@/model/Subscription.model'
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
 import WorkflowService from '@/services/workflow.service'
 import * as graphqlModule from '@/graphql/index'
-import ViewState from '@/model/ViewState.model'
+import { ViewState } from '@/model/ViewState.model'
 import { TreeCallback, WorkflowCallback } from './testCallback'
 
 const sandbox = sinon.createSandbox()
diff --git a/tests/unit/utils/tasks.spec.js b/tests/unit/utils/tasks.spec.js
index 0511e3f36..98fc8676a 100644
--- a/tests/unit/utils/tasks.spec.js
+++ b/tests/unit/utils/tasks.spec.js
@@ -15,48 +15,53 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import TaskState from '@/model/TaskState.model'
+import { TaskState } from '@/model/TaskState.model'
 import { dtMean, extractGroupState, latestJob, formatDuration, jobMessageOutputs } from '@/utils/tasks'
 
 describe('tasks', () => {
   describe('extractGroupState', () => {
-    it('should return the correct state for the node groups when not stopped', () => {
-      [
-        [
-          TaskState.FAILED.name, // expected
-          [TaskState.WAITING, TaskState.FAILED].map((state) => state.name)], // childStates
-        [
-          TaskState.WAITING.name,
-          [TaskState.WAITING].map((state) => state.name)],
-        [
-          TaskState.RUNNING.name,
-          [TaskState.SUBMITTED, TaskState.RUNNING].map((state) => state.name)]
-      ].forEach((val) => {
-        const groupState = extractGroupState(val[1], false)
-        expect(groupState).to.equal(val[0])
-      })
-    })
-
-    it('should return the correct state for the node groups when stopped', () => {
-      [
-        [
-          TaskState.RUNNING.name, // expected
-          [TaskState.WAITING, TaskState.SUBMITTED, TaskState.RUNNING].map((state) => state.name)], // childStates
-        [
-          TaskState.SUCCEEDED.name,
-          [TaskState.SUCCEEDED].map((state) => state.name)],
-        [
-          TaskState.RUNNING.name,
-          [TaskState.SUBMITTED, TaskState.RUNNING, TaskState.EXPIRED].map((state) => state.name)]
-      ].forEach((val) => {
-        const groupState = extractGroupState(val[1], true)
-        expect(groupState).to.equal(val[0])
-      })
-    })
-
-    it('should return empty when no states provided', () => {
-      expect(extractGroupState([])).to.equal('')
-    })
+    it.each([
+      {
+        childStates: [TaskState.WAITING, TaskState.FAILED],
+        stopped: false,
+        expected: TaskState.FAILED
+      },
+      {
+        childStates: [TaskState.WAITING],
+        stopped: false,
+        expected: TaskState.WAITING
+      },
+      {
+        childStates: [TaskState.SUBMITTED, TaskState.RUNNING],
+        stopped: false,
+        expected: TaskState.RUNNING
+      },
+      {
+        childStates: [TaskState.WAITING, TaskState.SUBMITTED, TaskState.RUNNING],
+        stopped: true,
+        expected: TaskState.RUNNING
+      },
+      {
+        childStates: [TaskState.SUCCEEDED],
+        stopped: true,
+        expected: TaskState.SUCCEEDED
+      },
+      {
+        childStates: [TaskState.SUBMITTED, TaskState.RUNNING, TaskState.EXPIRED],
+        stopped: true,
+        expected: TaskState.RUNNING
+      },
+      {
+        childStates: [],
+        expected: ''
+      }
+    ])(
+      'extractGroupState($childStates, stopped = $stopped) -> $expected',
+      ({ childStates, stopped, expected }) => {
+        const groupState = extractGroupState(childStates, stopped)
+        expect(groupState).to.equal(expected)
+      }
+    )
   })
 
   describe.each([
diff --git a/tests/unit/utils/uid.spec.js b/tests/unit/utils/uid.spec.js
index def8325d1..f3f64ec21 100644
--- a/tests/unit/utils/uid.spec.js
+++ b/tests/unit/utils/uid.spec.js
@@ -23,7 +23,7 @@ describe('Universal ID (UID)', () => {
       // full ID
       expect(
         Object.assign({}, new Tokens('~user/workflow//cycle/task/01'))
-      ).to.deep.equal({
+      ).toEqual({
         user: 'user',
         workflow: 'workflow',
         cycle: 'cycle',
@@ -39,7 +39,7 @@ describe('Universal ID (UID)', () => {
       // workflow ID fragment
       expect(
         Object.assign({}, new Tokens('~user'))
-      ).to.deep.equal({
+      ).toEqual({
         user: 'user',
         workflow: undefined,
         cycle: undefined,
@@ -55,7 +55,7 @@ describe('Universal ID (UID)', () => {
       // relative ID fragment
       expect(
         Object.assign({}, new Tokens('cycle', true))
-      ).to.deep.equal({
+      ).toEqual({
         user: undefined,
         workflow: undefined,
         cycle: 'cycle',
@@ -73,7 +73,7 @@ describe('Universal ID (UID)', () => {
       // namespaces (i.e. task/family definitions)
       expect(
         Object.assign({}, new Tokens('$namespace|foo', true))
-      ).to.deep.equal({
+      ).toEqual({
         user: undefined,
         workflow: undefined,
         cycle: undefined,
@@ -89,7 +89,7 @@ describe('Universal ID (UID)', () => {
       // edges
       expect(
         Object.assign({}, new Tokens('$edge|1/a|1/b', true))
-      ).to.deep.equal({
+      ).toEqual({
         user: undefined,
         workflow: undefined,
         cycle: undefined,
@@ -112,15 +112,11 @@ describe('Universal ID (UID)', () => {
       expect(a.job).to.equal('01')
     })
 
-    it('should be mutable via the set method', () => {
+    it('should clone', () => {
       const a = new Tokens('w//c')
-      const b = a.clone()
-      b.set({ workflow: 'x', task: 't' })
-
+      const b = a.clone({ workflow: 'x', task: 't' })
       // "a" should be unchanged
-      expect(
-        Object.assign({}, a)
-      ).to.deep.equal({
+      expect(Object.assign({}, a)).toEqual({
         user: undefined,
         workflow: 'w',
         cycle: 'c',
@@ -134,9 +130,7 @@ describe('Universal ID (UID)', () => {
       })
 
       // "b" should be updated
-      expect(
-        Object.assign({}, b)
-      ).to.deep.equal({
+      expect(Object.assign({}, b)).toEqual({
         user: undefined,
         workflow: 'x',
         cycle: 'c',
@@ -150,32 +144,13 @@ describe('Universal ID (UID)', () => {
       })
 
       // should be able to wipe tokens using "undefined"
-      b.set({ task: undefined })
-      expect(b.task).to.equal(undefined)
-    })
-
-    it('should clone and set in the same operation', () => {
-      const a = new Tokens('w//c')
-      const b = a.clone({ cycle: 'd', task: 't' })
-      expect(
-        Object.assign({}, b)
-      ).to.deep.equal({
-        user: undefined,
-        workflow: 'w',
-        cycle: 'd',
-        task: 't',
-        job: undefined,
-        id: 'w//d/t',
-        workflowID: 'w',
-        relativeID: 'd/t',
-        namespace: undefined,
-        edge: undefined
-      })
+      const c = b.clone({ task: undefined })
+      expect(c.task).toBe(undefined)
     })
 
     it('should iterate hierarchical workflows', () => {
       const tokens = new Tokens('~u/a/b/c/d')
-      expect(tokens.workflowHierarchy()).to.deep.equal([
+      expect(tokens.workflowHierarchy()).toEqual([
         ['a', new Tokens('~u/a')],
         ['b', new Tokens('~u/a/b')],
         ['c', new Tokens('~u/a/b/c')],
@@ -215,7 +190,7 @@ describe('Universal ID (UID)', () => {
     it('should yield the tree to this token', () => {
       expect(
         new Tokens('~u/w1/w2/w3//c/t/01').tree()
-      ).to.deep.equal([
+      ).toEqual([
         [
           'user',
           'u',
@@ -255,7 +230,7 @@ describe('Universal ID (UID)', () => {
 
       expect(
         new Tokens('~u/w//c').tree()
-      ).to.deep.equal([
+      ).toEqual([
         [
           'user',
           'u',
@@ -275,7 +250,7 @@ describe('Universal ID (UID)', () => {
 
       expect(
         new Tokens('~u').tree()
-      ).to.deep.equal([
+      ).toEqual([
         [
           'user',
           'u',
diff --git a/tests/unit/views/views.spec.js b/tests/unit/views/views.spec.js
index 5530bdb9b..98fcd549f 100644
--- a/tests/unit/views/views.spec.js
+++ b/tests/unit/views/views.spec.js
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { TREE, useDefaultView } from '@/views/views.js'
+import { TREE, useDefaultView } from '@/views/views'
 
 describe('useDefaultView composable', () => {
   it(`returns the ${TREE} view if not set in localStorage`, () => {
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 000000000..af4278791
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,41 @@
+{
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.vue",
+        // "tests/**/*"
+    ],
+    "exclude": [
+        "src/services/mock/json/*"
+    ],
+    "compilerOptions": {
+        // "checkJs": true,
+        "paths": {
+            "@/*": ["./src/*"]
+        },
+
+        "allowJs": true,
+
+        // Disable errors about implicit stuff during migration to TS:
+        "noImplicitAny": false,
+        "noImplicitReturns": false,
+
+        // Vue/Vite recommended settings:
+        "isolatedModules": true,
+        "strict": true,
+        "types": [
+            "vite/client"
+        ],
+
+        "target": "ES2020",
+        "skipLibCheck": true,
+
+        "module": "ES2020",
+        "moduleResolution": "node"
+    },
+    "watchOptions": {
+        "excludeDirectories": [
+            "**/node_modules",
+            "dist"
+        ]
+    }
+}
diff --git a/vite.config.js b/vite.config.ts
similarity index 100%
rename from vite.config.js
rename to vite.config.ts
diff --git a/yarn.lock b/yarn.lock
index 2dbd36159..29075c53d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -646,7 +646,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint-community/regexpp@npm:^4.6.0, @eslint-community/regexpp@npm:^4.6.1":
+"@eslint-community/regexpp@npm:^4.5.1, @eslint-community/regexpp@npm:^4.6.0, @eslint-community/regexpp@npm:^4.6.1":
   version: 4.10.0
   resolution: "@eslint-community/regexpp@npm:4.10.0"
   checksum: 10c0/c5f60ef1f1ea7649fa7af0e80a5a79f64b55a8a8fa5086de4727eb4c86c652aedee407a9c143b8995d2c0b2d75c1222bec9ba5d73dbfc1f314550554f0979ef4
@@ -1995,7 +1995,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/json-schema@npm:*":
+"@types/json-schema@npm:*, @types/json-schema@npm:^7.0.12":
   version: 7.0.15
   resolution: "@types/json-schema@npm:7.0.15"
   checksum: 10c0/a996a745e6c5d60292f36731dd41341339d4eeed8180bb09226e5c8d23759067692b1d88e5d91d72ee83dfc00d3aca8e7bd43ea120516c17922cbcb7c3e252db
@@ -2009,6 +2009,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:4.14.202":
+  version: 4.14.202
+  resolution: "@types/lodash@npm:4.14.202"
+  checksum: 10c0/6064d43c8f454170841bd67c8266cc9069d9e570a72ca63f06bceb484cb4a3ee60c9c1f305c1b9e3a87826049fd41124b8ef265c4dd08b00f6766609c7fe9973
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:*":
   version: 20.11.17
   resolution: "@types/node@npm:20.11.17"
@@ -2018,6 +2025,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/semver@npm:^7.5.0":
+  version: 7.5.8
+  resolution: "@types/semver@npm:7.5.8"
+  checksum: 10c0/8663ff927234d1c5fcc04b33062cb2b9fcfbe0f5f351ed26c4d1e1581657deebd506b41ff7fdf89e787e3d33ce05854bc01686379b89e9c49b564c4cfa988efa
+  languageName: node
+  linkType: hard
+
 "@types/sinonjs__fake-timers@npm:8.1.1":
   version: 8.1.1
   resolution: "@types/sinonjs__fake-timers@npm:8.1.1"
@@ -2057,6 +2071,129 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/eslint-plugin@npm:7.1.0":
+  version: 7.1.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:7.1.0"
+  dependencies:
+    "@eslint-community/regexpp": "npm:^4.5.1"
+    "@typescript-eslint/scope-manager": "npm:7.1.0"
+    "@typescript-eslint/type-utils": "npm:7.1.0"
+    "@typescript-eslint/utils": "npm:7.1.0"
+    "@typescript-eslint/visitor-keys": "npm:7.1.0"
+    debug: "npm:^4.3.4"
+    graphemer: "npm:^1.4.0"
+    ignore: "npm:^5.2.4"
+    natural-compare: "npm:^1.4.0"
+    semver: "npm:^7.5.4"
+    ts-api-utils: "npm:^1.0.1"
+  peerDependencies:
+    "@typescript-eslint/parser": ^7.0.0
+    eslint: ^8.56.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/e5644a987969cbb614bbf766b6bf51341e123c774953690548610147eae0041d70e48ef42be97b68a6e2f5ed9aae37fe040e8054d35bb0568c14194ba564b2d8
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/parser@npm:7.1.0":
+  version: 7.1.0
+  resolution: "@typescript-eslint/parser@npm:7.1.0"
+  dependencies:
+    "@typescript-eslint/scope-manager": "npm:7.1.0"
+    "@typescript-eslint/types": "npm:7.1.0"
+    "@typescript-eslint/typescript-estree": "npm:7.1.0"
+    "@typescript-eslint/visitor-keys": "npm:7.1.0"
+    debug: "npm:^4.3.4"
+  peerDependencies:
+    eslint: ^8.56.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/8fcbfc8c0c86abb750173096e7ca09e1cd44aba3f6115bdb94ffb6b409b86ee23526e9d5a44935b69a6be2385893e66d8e55d92063206028dc48f70d379afcab
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/scope-manager@npm:7.1.0":
+  version: 7.1.0
+  resolution: "@typescript-eslint/scope-manager@npm:7.1.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:7.1.0"
+    "@typescript-eslint/visitor-keys": "npm:7.1.0"
+  checksum: 10c0/2fd167730bbe984343ab94739b00bd82e8cdeea9e63674b099cc5c89b420b28dbf79f40dab48022dc717db8d14ae6ee2739e0fcbdcc0321bc9da5f2602b55788
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/type-utils@npm:7.1.0":
+  version: 7.1.0
+  resolution: "@typescript-eslint/type-utils@npm:7.1.0"
+  dependencies:
+    "@typescript-eslint/typescript-estree": "npm:7.1.0"
+    "@typescript-eslint/utils": "npm:7.1.0"
+    debug: "npm:^4.3.4"
+    ts-api-utils: "npm:^1.0.1"
+  peerDependencies:
+    eslint: ^8.56.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/3e3eea6c03692a643bf4ed11646b0679c6ff13baf1647d97e793f3d8c3adb83061e27a17c2a1470166a3c6c444b974bebc8096d36e0b4b3c36c289ff38bcfc9b
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/types@npm:7.1.0":
+  version: 7.1.0
+  resolution: "@typescript-eslint/types@npm:7.1.0"
+  checksum: 10c0/095cde3e773b7605c5e0c86642002768ced09e94def7f3c6f49a67863f47d7c8ae15413a4ab1a2407f779d1b5ede5fb3000bc98b1cf9ed7ec938acc38cac89e7
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/typescript-estree@npm:7.1.0":
+  version: 7.1.0
+  resolution: "@typescript-eslint/typescript-estree@npm:7.1.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:7.1.0"
+    "@typescript-eslint/visitor-keys": "npm:7.1.0"
+    debug: "npm:^4.3.4"
+    globby: "npm:^11.1.0"
+    is-glob: "npm:^4.0.3"
+    minimatch: "npm:9.0.3"
+    semver: "npm:^7.5.4"
+    ts-api-utils: "npm:^1.0.1"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/063845dc8526dfda722d1b00960443a5158d1bce2bc39bf49bd353f33f42aa30116105a87b55a04df3eaef99c0d1c13fb987c53848dff43de6152c66dd3ba41c
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/utils@npm:7.1.0":
+  version: 7.1.0
+  resolution: "@typescript-eslint/utils@npm:7.1.0"
+  dependencies:
+    "@eslint-community/eslint-utils": "npm:^4.4.0"
+    "@types/json-schema": "npm:^7.0.12"
+    "@types/semver": "npm:^7.5.0"
+    "@typescript-eslint/scope-manager": "npm:7.1.0"
+    "@typescript-eslint/types": "npm:7.1.0"
+    "@typescript-eslint/typescript-estree": "npm:7.1.0"
+    semver: "npm:^7.5.4"
+  peerDependencies:
+    eslint: ^8.56.0
+  checksum: 10c0/3fefd51307d0e294462106c57c4b12cd610bfe1bdcc5ca0142bfac6a5d0d37c18d14be5ec89740eb85515f5512f45219a6048df0efccd457e96f9d0612af4abf
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/visitor-keys@npm:7.1.0":
+  version: 7.1.0
+  resolution: "@typescript-eslint/visitor-keys@npm:7.1.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:7.1.0"
+    eslint-visitor-keys: "npm:^3.4.1"
+  checksum: 10c0/9015a10e6ee2a99fc99e0f7a3f274496a813c2c239e868f29e7c0da919c825fe192fe21d3410c43d8a801e8186b51f08ef06523d2c3010570d893a1486ac293d
+  languageName: node
+  linkType: hard
+
 "@ungap/structured-clone@npm:^1.2.0":
   version: 1.2.0
   resolution: "@ungap/structured-clone@npm:1.2.0"
@@ -2190,6 +2327,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@volar/language-core@npm:2.1.2, @volar/language-core@npm:~2.1.2":
+  version: 2.1.2
+  resolution: "@volar/language-core@npm:2.1.2"
+  dependencies:
+    "@volar/source-map": "npm:2.1.2"
+  checksum: 10c0/1018a18c15e040194488df656be9f0545010298cf3aa3eaab6d431a7e7f391bed1953329aac7468060f2ff89a4ac356aad374029eeaa2b3d10180e4ccf3c41a5
+  languageName: node
+  linkType: hard
+
+"@volar/source-map@npm:2.1.2":
+  version: 2.1.2
+  resolution: "@volar/source-map@npm:2.1.2"
+  dependencies:
+    muggle-string: "npm:^0.4.0"
+  checksum: 10c0/ea4c3be1dbb72b625b148ba8d09b92709529a3bb5c506033ba38cdfc7841af732fd29db690715ad7819527354d9ea894f61cba9e484149827e7666325eef589e
+  languageName: node
+  linkType: hard
+
+"@volar/typescript@npm:~2.1.2":
+  version: 2.1.2
+  resolution: "@volar/typescript@npm:2.1.2"
+  dependencies:
+    "@volar/language-core": "npm:2.1.2"
+    path-browserify: "npm:^1.0.1"
+  checksum: 10c0/afc4be65d884e255d428cc4a33ea3cc1b7cc9fd8ffe44a379d8a4f52e6def97fbfc5eb5ced860e591e957334c756db796bb38c5df432925a551f6e2e02b87399
+  languageName: node
+  linkType: hard
+
 "@vue/compiler-core@npm:3.4.11":
   version: 3.4.11
   resolution: "@vue/compiler-core@npm:3.4.11"
@@ -2203,6 +2368,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/compiler-core@npm:3.4.21":
+  version: 3.4.21
+  resolution: "@vue/compiler-core@npm:3.4.21"
+  dependencies:
+    "@babel/parser": "npm:^7.23.9"
+    "@vue/shared": "npm:3.4.21"
+    entities: "npm:^4.5.0"
+    estree-walker: "npm:^2.0.2"
+    source-map-js: "npm:^1.0.2"
+  checksum: 10c0/3ee871b95e17948d10375093c8dd3265923f844528a24ac67512c201ddb9b628021c010565f3e50f2e551b217c502e80a7901384f616a977a04f81e68c64a37c
+  languageName: node
+  linkType: hard
+
 "@vue/compiler-dom@npm:3.4.11":
   version: 3.4.11
   resolution: "@vue/compiler-dom@npm:3.4.11"
@@ -2213,6 +2391,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/compiler-dom@npm:^3.4.0":
+  version: 3.4.21
+  resolution: "@vue/compiler-dom@npm:3.4.21"
+  dependencies:
+    "@vue/compiler-core": "npm:3.4.21"
+    "@vue/shared": "npm:3.4.21"
+  checksum: 10c0/b4a1099eddacded2663d12388b48088ca0be0d8969a070476f49e4e65da9b22851fc897cc693662b178e7e7fdee98fcf9ea3617a1f626c3a1b2089815cb1264e
+  languageName: node
+  linkType: hard
+
 "@vue/compiler-sfc@npm:3.4.11":
   version: 3.4.11
   resolution: "@vue/compiler-sfc@npm:3.4.11"
@@ -2254,6 +2442,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/language-core@npm:2.0.6":
+  version: 2.0.6
+  resolution: "@vue/language-core@npm:2.0.6"
+  dependencies:
+    "@volar/language-core": "npm:~2.1.2"
+    "@vue/compiler-dom": "npm:^3.4.0"
+    "@vue/shared": "npm:^3.4.0"
+    computeds: "npm:^0.0.1"
+    minimatch: "npm:^9.0.3"
+    path-browserify: "npm:^1.0.1"
+    vue-template-compiler: "npm:^2.7.14"
+  peerDependencies:
+    typescript: "*"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/bd9cf8ba641e3f4532b04bc99181af8b4b949b072576a24b5ed8600e3def798b2f5147247b5aef62b2215d629678e6ef357bcd8b458be17ee27541dd6978b56f
+  languageName: node
+  linkType: hard
+
 "@vue/reactivity@npm:3.4.11":
   version: 3.4.11
   resolution: "@vue/reactivity@npm:3.4.11"
@@ -2303,6 +2511,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/shared@npm:3.4.21, @vue/shared@npm:^3.4.0":
+  version: 3.4.21
+  resolution: "@vue/shared@npm:3.4.21"
+  checksum: 10c0/79cba4228c3c1769ba8024302d7dbebf6ed1b77fb2e7a69e635cdebaa1c18b409e9c27ce27ccbe3a98e702a7e2dae1b87754d87f0b29adfe2a8f9e1e7c7899d5
+  languageName: node
+  linkType: hard
+
 "@vue/test-utils@npm:2.4.5":
   version: 2.4.5
   resolution: "@vue/test-utils@npm:2.4.5"
@@ -3399,6 +3614,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"computeds@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "computeds@npm:0.0.1"
+  checksum: 10c0/8a8736f1f43e4a99286519785d71a10ece8f444a2fa1fc2fe1f03dedf63f3477b45094002c85a2826f7631759c9f5a00b4ace47456997f253073fc525e8983de
+  languageName: node
+  linkType: hard
+
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -3568,6 +3790,9 @@ __metadata:
     "@lumino/default-theme": "npm:2.1.4"
     "@lumino/widgets": "npm:2.3.1"
     "@mdi/js": "npm:7.4.47"
+    "@types/lodash": "npm:4.14.202"
+    "@typescript-eslint/eslint-plugin": "npm:7.1.0"
+    "@typescript-eslint/parser": "npm:7.1.0"
     "@unhead/vue": "npm:1.8.10"
     "@vitejs/plugin-vue": "npm:5.0.4"
     "@vitest/coverage-istanbul": "npm:1.4.0"
@@ -3580,7 +3805,6 @@ __metadata:
     cypress: "npm:13.7.0"
     cypress-vite: "npm:1.5.0"
     dedent: "npm:1.5.1"
-    enumify: "npm:2.0.0"
     eslint: "npm:8.57.0"
     eslint-config-standard: "npm:17.1.0"
     eslint-plugin-compat: "npm:4.2.0"
@@ -3611,6 +3835,7 @@ __metadata:
     standard: "npm:17.1.0"
     subscriptions-transport-ws: "npm:0.11.0"
     svg-pan-zoom: "npm:3.6.1"
+    typescript: "npm:5.3.3"
     vite: "npm:5.1.6"
     vite-plugin-eslint: "npm:1.8.1"
     vite-plugin-istanbul: "npm:6.0.0"
@@ -3620,6 +3845,7 @@ __metadata:
     vue-i18n: "npm:9.10.2"
     vue-router: "npm:4.3.0"
     vue-the-mask: "npm:0.11.1"
+    vue-tsc: "npm:2.0.6"
     vue3-apexcharts: "npm:1.4.1"
     vuetify: "npm:3.5.4"
     vuex: "npm:4.1.0"
@@ -3730,6 +3956,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"de-indent@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "de-indent@npm:1.0.2"
+  checksum: 10c0/7058ce58abd6dfc123dd204e36be3797abd419b59482a634605420f47ae97639d0c183ec5d1b904f308a01033f473673897afc2bd59bc620ebf1658763ef4291
+  languageName: node
+  linkType: hard
+
 "debug@npm:*, debug@npm:4, debug@npm:4.3.4, debug@npm:^4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4":
   version: 4.3.4
   resolution: "debug@npm:4.3.4"
@@ -4020,13 +4253,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"enumify@npm:2.0.0":
-  version: 2.0.0
-  resolution: "enumify@npm:2.0.0"
-  checksum: 10c0/641096d9614fa33738ace4aa3cbc17bb38a9a8ea906bfed3214e76e084c9f20f75f898fc4488ab8bbb0425800b629c7ccc6e646f2a05c51fb86d3636f06df291
-  languageName: node
-  linkType: hard
-
 "env-paths@npm:^2.2.0":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -5536,7 +5762,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globby@npm:11.1.0":
+"globby@npm:11.1.0, globby@npm:^11.1.0":
   version: 11.1.0
   resolution: "globby@npm:11.1.0"
   dependencies:
@@ -5693,6 +5919,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"he@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "he@npm:1.2.0"
+  bin:
+    he: bin/he
+  checksum: 10c0/a27d478befe3c8192f006cdd0639a66798979dfa6e2125c6ac582a19a5ebfec62ad83e8382e6036170d873f46e4536a7e795bf8b95bf7c247f4cc0825ccc8c17
+  languageName: node
+  linkType: hard
+
 "hey-listen@npm:^1.0.8":
   version: 1.0.8
   resolution: "hey-listen@npm:1.0.8"
@@ -7181,6 +7416,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"minimatch@npm:9.0.3, minimatch@npm:^9.0.1, minimatch@npm:^9.0.3":
+  version: 9.0.3
+  resolution: "minimatch@npm:9.0.3"
+  dependencies:
+    brace-expansion: "npm:^2.0.1"
+  checksum: 10c0/85f407dcd38ac3e180f425e86553911d101455ca3ad5544d6a7cec16286657e4f8a9aa6695803025c55e31e35a91a2252b5dc8e7d527211278b8b65b4dbd5eac
+  languageName: node
+  linkType: hard
+
 "minimatch@npm:^3.0.4, minimatch@npm:^3.0.5, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
@@ -7190,15 +7434,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^9.0.1":
-  version: 9.0.3
-  resolution: "minimatch@npm:9.0.3"
-  dependencies:
-    brace-expansion: "npm:^2.0.1"
-  checksum: 10c0/85f407dcd38ac3e180f425e86553911d101455ca3ad5544d6a7cec16286657e4f8a9aa6695803025c55e31e35a91a2252b5dc8e7d527211278b8b65b4dbd5eac
-  languageName: node
-  linkType: hard
-
 "minimist@npm:^1.2.0, minimist@npm:^1.2.6, minimist@npm:^1.2.8":
   version: 1.2.8
   resolution: "minimist@npm:1.2.8"
@@ -7352,6 +7587,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"muggle-string@npm:^0.4.0":
+  version: 0.4.1
+  resolution: "muggle-string@npm:0.4.1"
+  checksum: 10c0/e914b63e24cd23f97e18376ec47e4ba3aa24365e4776212b666add2e47bb158003212980d732c49abf3719568900af7861873844a6e2d3a7ca7e86952c0e99e9
+  languageName: node
+  linkType: hard
+
 "nanoid@npm:^3.1.23, nanoid@npm:^3.3.7":
   version: 3.3.7
   resolution: "nanoid@npm:3.3.7"
@@ -7872,6 +8114,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-browserify@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "path-browserify@npm:1.0.1"
+  checksum: 10c0/8b8c3fd5c66bd340272180590ae4ff139769e9ab79522e2eb82e3d571a89b8117c04147f65ad066dccfb42fcad902e5b7d794b3d35e0fd840491a8ddbedf8c66
+  languageName: node
+  linkType: hard
+
 "path-exists@npm:^3.0.0":
   version: 3.0.0
   resolution: "path-exists@npm:3.0.0"
@@ -9599,6 +9848,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-api-utils@npm:^1.0.1":
+  version: 1.3.0
+  resolution: "ts-api-utils@npm:1.3.0"
+  peerDependencies:
+    typescript: ">=4.2.0"
+  checksum: 10c0/f54a0ba9ed56ce66baea90a3fa087a484002e807f28a8ccb2d070c75e76bde64bd0f6dce98b3802834156306050871b67eec325cb4e918015a360a3f0868c77c
+  languageName: node
+  linkType: hard
+
 "ts-invariant@npm:^0.10.3":
   version: 0.10.3
   resolution: "ts-invariant@npm:0.10.3"
@@ -9753,6 +10011,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@npm:5.3.3":
+  version: 5.3.3
+  resolution: "typescript@npm:5.3.3"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/e33cef99d82573624fc0f854a2980322714986bc35b9cb4d1ce736ed182aeab78e2cb32b385efa493b2a976ef52c53e20d6c6918312353a91850e2b76f1ea44f
+  languageName: node
+  linkType: hard
+
+"typescript@patch:typescript@npm%3A5.3.3#optional!builtin<compat/typescript>":
+  version: 5.3.3
+  resolution: "typescript@patch:typescript@npm%3A5.3.3#optional!builtin<compat/typescript>::version=5.3.3&hash=e012d7"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/1d0a5f4ce496c42caa9a30e659c467c5686eae15d54b027ee7866744952547f1be1262f2d40de911618c242b510029d51d43ff605dba8fb740ec85ca2d3f9500
+  languageName: node
+  linkType: hard
+
 "uc.micro@npm:^1.0.1, uc.micro@npm:^1.0.5":
   version: 1.0.6
   resolution: "uc.micro@npm:1.0.6"
@@ -10238,6 +10516,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue-template-compiler@npm:^2.7.14":
+  version: 2.7.16
+  resolution: "vue-template-compiler@npm:2.7.16"
+  dependencies:
+    de-indent: "npm:^1.0.2"
+    he: "npm:^1.2.0"
+  checksum: 10c0/66667ffd5095b707f169c902c4f1a011e9d5ab99fc228e4dac14eb5ca7f107ed99bff261b21578a4b391d2f3d320a8050e754404443472acad13ddaa4bd7bae2
+  languageName: node
+  linkType: hard
+
 "vue-the-mask@npm:0.11.1":
   version: 0.11.1
   resolution: "vue-the-mask@npm:0.11.1"
@@ -10245,6 +10533,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue-tsc@npm:2.0.6":
+  version: 2.0.6
+  resolution: "vue-tsc@npm:2.0.6"
+  dependencies:
+    "@volar/typescript": "npm:~2.1.2"
+    "@vue/language-core": "npm:2.0.6"
+    semver: "npm:^7.5.4"
+  peerDependencies:
+    typescript: "*"
+  bin:
+    vue-tsc: bin/vue-tsc.js
+  checksum: 10c0/e1bacf84549697828c1040ae2e32cd2fabdd4ee1dc4ff9ea741d4ab1ec704b9727085221d6f2ca39a335cf21fd17be23706759e9c65b808eedef762372d59dec
+  languageName: node
+  linkType: hard
+
 "vue3-apexcharts@npm:1.4.1":
   version: 1.4.1
   resolution: "vue3-apexcharts@npm:1.4.1"