TS migration. #2288. (#2328)

* Added TS. Updated build and linting config. Added types.

* [ts-migrate][.] Rename files from JS/JSX to TS/TSX

Co-authored-by: ts-migrate <>

* [ts-migrate][.] Run TS Migrate

Co-authored-by: ts-migrate <>

* Corrected files mangled by ts-migrate.

* Updated lint config, minor linting.

* Re-enabled Husky.

* Updated tests and config.

* Reverted webpack devtool config.

* Removed obsolete snapshots.

* Added annotations snap.

* Updated tsconfig includes wrt linting.

* Removed ts-migrate.

Co-authored-by: Timmy Huang <tihuan@users.noreply.github.com>

client/configuration/babel/babel.dev.js

@@ -11,6 +11,7 @@ module.exports = {
       },
     ],
     "@babel/preset-react",
+    "@babel/preset-typescript",
   ],
   plugins: [
     "@babel/plugin-proposal-function-bind",

client/configuration/babel/babel.prod.js

@@ -10,6 +10,7 @@ module.exports = {
       },
     ],
     "@babel/preset-react",
+    "@babel/preset-typescript"
   ],
   plugins: [
     "@babel/plugin-proposal-function-bind",

client/configuration/eslint/eslint.js

@@ -1,13 +1,12 @@
 module.exports = {
   root: true,
-  parser: "babel-eslint",
+  parser: "@typescript-eslint/parser",
   extends: [
-    "airbnb",
+    "airbnb-typescript",
     "plugin:eslint-comments/recommended",
     "plugin:@blueprintjs/recommended",
     "plugin:compat/recommended",
     "plugin:prettier/recommended",
-    "prettier",
   ],
   settings: {
     // AbortController is not supported in iOS Safari 10.3, Chrome 61
@@ -32,18 +31,47 @@ module.exports = {
       jsx: true,
       generators: true,
     },
+    project: "./tsconfig.json",
   },
   rules: {
     "react/jsx-no-target-blank": "off",
     "eslint-comments/require-description": ["error"],
     "no-magic-numbers": "off",
+    "@typescript-eslint/no-magic-numbers": "off",
     "no-nested-ternary": "off",
     "func-style": "off",
     "arrow-parens": "off",
     "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": "off",
     "react/jsx-filename-extension": "off",
     "comma-dangle": "off",
+    "@typescript-eslint/comma-dangle": "off",
     "no-underscore-dangle": "off",
+    // Override airbnb config to allow leading underscore
+    // https://github.com/iamturns/eslint-config-airbnb-typescript/blob/master/lib/shared.js#L35
+    "@typescript-eslint/naming-convention": [
+      "error",
+      {
+        selector: "class",
+        format: ["PascalCase"],
+        leadingUnderscore: "allow",
+      },
+      {
+        selector: "function",
+        format: ["camelCase", "PascalCase"],
+        leadingUnderscore: "allowSingleOrDouble",
+      },
+      {
+        selector: "typeLike",
+        format: ["PascalCase"],
+      },
+      {
+        selector: "variable",
+        format: ["camelCase", "PascalCase", "UPPER_CASE"],
+        leadingUnderscore: "allowSingleOrDouble",
+        trailingUnderscore: "allowDouble",
+      },
+    ],
     "implicit-arrow-linebreak": "off",
     "no-console": "off",
     "spaced-comment": ["error", "always", { exceptions: ["*"] }],
@@ -51,6 +79,7 @@ module.exports = {
     "object-curly-newline": ["error", { consistent: true }],
     "react/prop-types": [0],
     "space-before-function-paren": "off",
+    "@typescript-eslint/space-before-function-paren": "off",
     "function-paren-newline": "off",
     "prefer-destructuring": ["error", { object: true, array: false }],
     "import/prefer-default-export": "off",
@@ -69,9 +98,9 @@ module.exports = {
   },
   overrides: [
     {
-      files: ["**/*.test.js"],
+      files: ["**/*.test.ts"],
       env: {
-        jest: true, // now **/*.test.js files' env has both es6 *and* jest
+        jest: true, // now **/*.test.ts files' env has both es6 *and* jest
       },
       // Can't extend in overrides: https://github.com/eslint/eslint/issues/8813
       // "extends": ["plugin:jest/recommended"]

client/configuration/lint-staged/lint-staged.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  "*.js": "eslint --fix",
+  "*.{js,ts,jsx,tsx}": "eslint --fix",
 };

client/configuration/webpack/webpack.config.dev.js

@@ -23,7 +23,7 @@ const devConfig = {
   module: {
     rules: [
       {
-        test: /\.jsx?$/,
+        test: /\.(ts|js)x?$/,
         loader: "babel-loader",
         options: babelOptions,
       },

client/configuration/webpack/webpack.config.prod.js

@@ -38,7 +38,7 @@ const prodConfig = {
   module: {
     rules: [
       {
-        test: /\.jsx?$/,
+        test: /\.(ts|js)x?$/,
         loader: "babel-loader",
         options: babelOptions,
       },

client/configuration/webpack/webpack.config.shared.js

@@ -29,6 +29,9 @@ module.exports = {
     path: path.resolve("build"),
     publicPath,
   },
+  resolve: {
+    extensions: [".ts", ".tsx", "..."],
+  },
   module: {
     rules: [
       {