Enable TypeScript

Author: MetRonnie

.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

@@ -39,6 +39,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.10.3",
@@ -55,6 +56,9 @@
   },
   "devDependencies": {
     "@cypress/code-coverage": "3.12.39",
+    "@types/lodash-es": "4.17.12",
+    "@typescript-eslint/eslint-plugin": "7.1.0",
+    "@typescript-eslint/parser": "7.1.0",
     "@vitejs/plugin-vue": "5.0.4",
     "@vitest/coverage-istanbul": "1.6.0",
     "@vue/test-utils": "2.4.6",
@@ -82,11 +86,13 @@
     "sass": "1.75.0",
     "sinon": "18.0.0",
     "standard": "17.1.0",
+    "typescript": "5.3.3",
     "vite": "5.2.11",
     "vite-plugin-eslint": "1.8.1",
     "vite-plugin-istanbul": "6.0.2",
     "vite-plugin-vuetify": "2.0.3",
-    "vitest": "1.6.0"
+    "vitest": "1.6.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"]
+    },
     {
       "matchDepNames": ["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/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')

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

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