Typescript migration

.eslintrc.cjs

@@ -12,7 +12,18 @@ module.exports = {
   extends: [
     'plugin:vue/vue3-recommended',
     'airbnb-base',
+    'plugin:@typescript-eslint/recommended',
   ],
+  settings: {
+    'import/resolver': {
+      typescript: {
+        alwaysTryTypes: true,
+      },
+      node: {
+        extensions: ['.js', '.ts', '.vue'],
+      },
+    },
+  },
   rules: {
     'max-len': [
       'error',
@@ -26,11 +37,43 @@ module.exports = {
     'no-loss-of-precision': 'off',
     'import/extensions': [
       'error',
-      'never',
+      'ignorePackages',
+      {
+        js: 'never',
+        ts: 'never',
+        vue: 'always',
+      },
     ],
     'linebreak-style': [
       'error',
       'unix',
     ],
+    // TS handles unused-vars more accurately than airbnb's base rule.
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
   },
+  overrides: [
+    {
+      files: ['*.ts', '*.vue'],
+      parser: 'vue-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        extraFileExtensions: ['.vue'],
+      },
+      rules: {
+        // The base airbnb rule errors on `if (x) doThing();` style; TS code
+        // tends to use return-types, so loosen the brace-style requirements.
+        'no-shadow': 'off',
+        '@typescript-eslint/no-shadow': 'error',
+      },
+    },
+  ],
 };

.github/workflows/ci.yml

@@ -39,6 +39,9 @@ jobs:
       - name: Lint
         run: yarn lint
 
+      - name: Type check
+        run: yarn typecheck
+
       - name: Unit tests
         run: yarn test
 

index.html

@@ -16,6 +16,6 @@
       <strong>We're sorry but fluxmultisig doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package.json

@@ -11,7 +11,8 @@
     "preview": "vite preview",
     "test": "vitest run",
     "test:watch": "vitest",
-    "lint": "eslint --ext .js,.vue src"
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint --ext .js,.ts,.vue src"
   },
   "repository": {
     "type": "git",
@@ -33,15 +34,22 @@
     "vue": "^3.5.13"
   },
   "devDependencies": {
+    "@types/node": "^25.7.0",
+    "@typescript-eslint/eslint-plugin": "^8.59.3",
+    "@typescript-eslint/parser": "^8.59.3",
     "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/tsconfig": "^0.9.1",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "~15.0.0",
+    "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "~2.31.0",
     "eslint-plugin-vue": "^9.32.0",
     "terser": "^5.47.1",
+    "typescript": "^6.0.3",
     "vite": "^5.4.11",
     "vite-plugin-node-polyfills": "^0.22.0",
-    "vitest": "^4.1.6"
+    "vitest": "^4.1.6",
+    "vue-tsc": "^3.2.8"
   },
   "browserslist": [
     "> 1%",