made header language typescript

.eslintrc.cjs

@@ -17,17 +17,23 @@
 
 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',
     'eslint:recommended',
     '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'
-    ]
+    ],
   },
 }

.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

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

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',
         })
       )

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": {

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"]
     },

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)

src/App.vue

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

src/components/core/Alert.vue

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

src/components/cylc/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'

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
       ) {

src/components/cylc/common/filter.js → 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)
 }