Enable TypeScript (#6472)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

.eslintrc

@@ -8,12 +8,39 @@
   "settings": {
     "import/resolver": {
       "webpack": {
-        "config": "client/webpack/prod.config.js"
+        "config": "webpack/prod.config.js"
       }
     }
   },
-  
+
   "rules": {
     "no-underscore-dangle": ["error", { "allow": ["__REDUX_DEVTOOLS_EXTENSION__"] }]
-  }
+  },
+
+  "overrides": [
+    {
+        "files": ["*.ts", "*.tsx"],
+
+        "parser": "@typescript-eslint/parser",
+        "plugins": [
+          "@typescript-eslint"
+        ],
+        "extends": [
+          "wagtail",
+          "plugin:@typescript-eslint/recommended"
+        ],
+        "rules": {
+          "no-underscore-dangle": ["error", { "allow": ["__REDUX_DEVTOOLS_EXTENSION__"] }],
+
+          // note you must disable the base rule as it can report incorrect errors
+          "no-use-before-define": "off",
+          "@typescript-eslint/no-use-before-define": ["error"],
+
+          "@typescript-eslint/explicit-module-boundary-types": "off",
+          "@typescript-eslint/explicit-member-accessibility": "off",
+          "@typescript-eslint/explicit-function-return-type": "off",
+          "@typescript-eslint/no-explicit-any": "off"
+        }
+    }
+  ]
 }

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-    presets: ['@babel/preset-env', '@babel/preset-react'],
+    presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
 };

client/package.json

@@ -5,9 +5,9 @@
   "description": "Wagtail's client side code",
   "license": "BSD-3-Clause",
   "author": "Wagtail",
-  "main": "src/index.js",
+  "main": "src/index.ts",
   "files": [
-    "src/index.js"
+    "src/index.ts"
   ],
   "devDependencies": {},
   "dependencies": {},

client/src/components/Draftail/decorators/TooltipEntity.js

@@ -80,8 +80,6 @@ class TooltipEntity extends Component {
     } = this.props;
     const { showTooltipAt } = this.state;
 
-    // Contrary to what JSX A11Y says, this should be a button but it shouldn't be focusable.
-    /* eslint-disable springload/jsx-a11y/interactive-supports-focus */
     return (
       <a
         href={url}

client/src/components/Explorer/reducers/nodes.js

@@ -67,8 +67,8 @@ export default function nodes(state = defaultState, { type, payload }) {
       [payload.id]: node(state[payload.id], { type, payload }),
     });
 
-  // eslint-disable-next-line no-case-declarations
   case 'GET_CHILDREN_SUCCESS':
+    // eslint-disable-next-line no-case-declarations
     const newState = Object.assign({}, state, {
       [payload.id]: node(state[payload.id], { type, payload }),
     });

client/webpack/base.config.js

@@ -41,6 +41,7 @@ module.exports = function exports() {
       }),
     ],
     resolve: {
+      extensions: ['.ts', '.tsx', '.js'],
       alias: {
         'wagtail-client': path.resolve('.', 'client'),
       },
@@ -48,7 +49,7 @@ module.exports = function exports() {
     module: {
       rules: [
         {
-          test: /\.js$/,
+          test: /\.(js|ts)x?$/,
           loader: 'babel-loader',
           exclude: /node_modules/,
         },

package.json

@@ -38,14 +38,17 @@
     "@babel/core": "^7.12.3",
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-react": "^7.12.1",
+    "@babel/preset-typescript": "^7.12.1",
+    "@typescript-eslint/eslint-plugin": "^4.5.0",
+    "@typescript-eslint/parser": "^4.5.0",
     "@wagtail/stylelint-config-wagtail": "^0.1.0",
     "babel-jest": "^26.6.0",
     "babel-loader": "^8.1.0",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.9.1",
     "enzyme-to-json": "^3.3.0",
-    "eslint": "^4.18.2",
-    "eslint-config-wagtail": "0.1.1",
+    "eslint": "^7.11.0",
+    "eslint-config-wagtail": "^0.1.1",
     "eslint-import-resolver-webpack": "^0.8.1",
     "eslint-plugin-import": "^1.8.1",
     "eslint-plugin-jsx-a11y": "^1.5.3",
@@ -65,6 +68,7 @@
     "react-test-renderer": "^16.2.0",
     "redux-mock-store": "^1.3.0",
     "stylelint": "^13.5.0",
+    "typescript": "^4.0.3",
     "webpack": "^3.10.0"
   },
   "dependencies": {

tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+        "jsx": "react",
+        "lib": ["es2015", "dom"],
+        "noImplicitAny": false,  // TODO: Enable once all existing code is typed
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "strictNullChecks": true,
+        "esModuleInterop": true
+    },
+    "files": [
+        "client/src/index.ts",
+        "client/src/custom.d.ts"
+    ]
+}