Add TypeScript to the linting process (#13495)

This commit allows developers to write TypeScript files and lint them
(either via a language server in their editor of choice or through the
`yarn lint` command).

The new TypeScript configuration as well as the updated ESLint
configuration not only includes support for parsing TypeScript files,
but also provides some compatibility between JavaScript and TypeScript.
That is, it makes it possible for a TypeScript file that imports a
JavaScript file or a JavaScript file that imports a TypeScript file to
be linted.

Note that this commit does not integrate TypeScript into the build
system yet, so we cannot start converting files to TypeScript and
pushing them to the repo until that final step is complete.

.depcheckrc.yml

@@ -19,6 +19,7 @@ ignores:
   - '@metamask/forwarder'
   - '@metamask/test-dapp'
   - '@metamask/design-tokens' # Only imported in index.css
+  - '@tsconfig/node14' # required dynamically by TS, used in tsconfig.json
   - '@sentry/cli' # invoked as `sentry-cli`
   - 'chromedriver'
   - 'depcheck' # ooo meta

.eslintrc.js

@@ -7,8 +7,9 @@ module.exports = {
   ignorePatterns: [
     'app/vendor/**',
     'builds/**/*',
-    'dist/**/*',
     'development/chromereload.js',
+    'dist/**/*',
+    'node_modules/**/*',
   ],
   overrides: [
     /**
@@ -41,6 +42,7 @@ module.exports = {
         path.resolve(__dirname, '.eslintrc.base.js'),
         path.resolve(__dirname, '.eslintrc.node.js'),
         path.resolve(__dirname, '.eslintrc.babel.js'),
+        path.resolve(__dirname, '.eslintrc.typescript-compat.js'),
       ],
       parserOptions: {
         sourceType: 'module',
@@ -50,6 +52,23 @@ module.exports = {
         // trust that all of the files specified above are indeed modules.
         'import/unambiguous': 'off',
       },
+      settings: {
+        'import/resolver': {
+          // When determining the location of a `require()` call, use Node's
+          // resolution algorithm, then fall back to TypeScript's. This allows
+          // TypeScript files (which Node's algorithm doesn't recognize) to be
+          // imported from JavaScript files, while also preventing issues when
+          // using packages like `prop-types` (where we would otherwise get "No
+          // default export found in imported module 'prop-types'" from
+          // TypeScript because imports work differently there).
+          node: {},
+          typescript: {
+            // Always try to resolve types under `<root>/@types` directory even
+            // it doesn't contain any source code, like `@types/unist`
+            alwaysTryTypes: true,
+          },
+        },
+      },
     },
     /**
      * Modules (ES module syntax)
@@ -75,10 +94,82 @@ module.exports = {
         path.resolve(__dirname, '.eslintrc.base.js'),
         path.resolve(__dirname, '.eslintrc.node.js'),
         path.resolve(__dirname, '.eslintrc.babel.js'),
+        path.resolve(__dirname, '.eslintrc.typescript-compat.js'),
       ],
       parserOptions: {
         sourceType: 'module',
       },
+      settings: {
+        'import/resolver': {
+          // When determining the location of an `import`, use Node's resolution
+          // algorithm, then fall back to TypeScript's. This allows TypeScript
+          // files (which Node's algorithm doesn't recognize) to be imported
+          // from JavaScript files, while also preventing issues when using
+          // packages like `prop-types` (where we would otherwise get "No
+          // default export found in imported module 'prop-types'" from
+          // TypeScript because imports work differently there).
+          node: {},
+          typescript: {
+            // Always try to resolve types under `<root>/@types` directory even
+            // it doesn't contain any source code, like `@types/unist`
+            alwaysTryTypes: true,
+          },
+        },
+      },
+    },
+    /**
+     * TypeScript files
+     */
+    {
+      files: ['*.{ts,tsx}'],
+      extends: [
+        path.resolve(__dirname, '.eslintrc.base.js'),
+        '@metamask/eslint-config-typescript',
+        path.resolve(__dirname, '.eslintrc.typescript-compat.js'),
+      ],
+      rules: {
+        // Turn these off, as it's recommended by typescript-eslint.
+        // See: <https://typescript-eslint.io/docs/linting/troubleshooting#eslint-plugin-import>
+        'import/named': 'off',
+        'import/namespace': 'off',
+        'import/default': 'off',
+        'import/no-named-as-default-member': 'off',
+
+        // Disabled due to incompatibility with Record<string, unknown>.
+        // See: <https://github.com/Microsoft/TypeScript/issues/15300#issuecomment-702872440>
+        '@typescript-eslint/consistent-type-definitions': 'off',
+
+        // Modified to include the 'ignoreRestSiblings' option.
+        // TODO: Migrate this rule change back into `@metamask/eslint-config`
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          {
+            vars: 'all',
+            args: 'all',
+            argsIgnorePattern: '[_]+',
+            ignoreRestSiblings: true,
+          },
+        ],
+      },
+      settings: {
+        'import/resolver': {
+          // When determining the location of an `import`, prefer TypeScript's
+          // resolution algorithm. Note that due to how we've configured
+          // TypeScript in `tsconfig.json`, we are able to import JavaScript
+          // files from TypeScript files.
+          typescript: {
+            // Always try to resolve types under `<root>/@types` directory even
+            // it doesn't contain any source code, like `@types/unist`
+            alwaysTryTypes: true,
+          },
+        },
+      },
+    },
+    {
+      files: ['*.d.ts'],
+      parserOptions: {
+        sourceType: 'script',
+      },
     },
 
     /**

.eslintrc.typescript-compat.js

@@ -0,0 +1,8 @@
+module.exports = {
+  settings: {
+    'import/extensions': ['.js', '.ts', '.tsx'],
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+  },
+};

.gitignore

@@ -46,3 +46,6 @@ notes.txt
 .nyc_output
 
 .metamaskrc
+
+# TypeScript
+tsout/

development/build/index.js

@@ -39,9 +39,11 @@ require('@babel/eslint-parser');
 require('@babel/eslint-plugin');
 require('@metamask/eslint-config');
 require('@metamask/eslint-config-nodejs');
+require('@typescript-eslint/parser');
 require('eslint');
 require('eslint-config-prettier');
 require('eslint-import-resolver-node');
+require('eslint-import-resolver-typescript');
 require('eslint-plugin-import');
 require('eslint-plugin-jsdoc');
 require('eslint-plugin-node');

lavamoat/build-system/policy-override.json

@@ -19,6 +19,8 @@
         "@babel/eslint-plugin": true,
         "@metamask/eslint-config": true,
         "@metamask/eslint-config-nodejs": true,
+        "@metamask/eslint-config-typescript": true,
+        "@typescript-eslint/eslint-plugin": true,
         "eslint": true,
         "eslint-config-prettier": true,
         "eslint-plugin-import": true,
@@ -29,20 +31,58 @@
         "eslint-plugin-react-hooks": true
       }
     },
+    "@typescript-eslint/eslint-plugin": {
+      "packages": {
+        "@typescript-eslint/experimental-utils": true,
+        "@typescript-eslint/scope-manager": true,
+        "debug": true,
+        "eslint": true,
+        "ignore": true,
+        "regexpp": true,
+        "semver": true,
+        "tsutils": true,
+        "typescript": true
+      }
+    },
+    "@typescript-eslint/experimental-utils": {
+      "builtin": {
+        "path": true
+      },
+      "packages": {
+        "@typescript-eslint/scope-manager": true,
+        "@typescript-eslint/types": true,
+        "eslint": true,
+        "eslint-scope": true,
+        "eslint-utils": true
+      }
+    },
+    "@typescript-eslint/scope-manager": {
+      "packages": {
+        "@typescript-eslint/types": true,
+        "@typescript-eslint/visitor-keys": true
+      }
+    },
+    "@typescript-eslint/visitor-keys": {
+      "packages": {
+        "eslint-visitor-keys": true
+      }
+    },
     "eslint-module-utils": {
       "packages": {
+        "@babel/eslint-parser": true,
+        "@typescript-eslint/parser": true,
         "eslint-import-resolver-node": true,
-        "@babel/eslint-parser": true
+        "eslint-import-resolver-typescript": true
       }
     },
-    "node-sass": {
-      "native": true
-    },
     "module-deps": {
       "packages": {
         "loose-envify": true
       }
     },
+    "node-sass": {
+      "native": true
+    },
     "sass": {
       "env": "unfrozen",
       "builtin": {
@@ -51,6 +91,17 @@
       "globals": {
         "Buffer": true
       }
+    },
+    "tsutils": {
+      "packages": {
+        "typescript": true,
+        "tslib": true
+      }
+    },
+    "typescript": {
+      "globals": {
+        "globalThis": true
+      }
     }
   }
 }