Update to TypeScript 4

Author: DaneEveritt

.eslintignore

@@ -1,2 +1,4 @@
 public
+node_modules
 resources/views
+webpack.config.js

.eslintrc.yml

@@ -76,6 +76,13 @@ rules:
     - 1
     - "line-aligned"
   "react/jsx-closing-tag-location": 1
+  # This setup is required to avoid a spam of errors when running eslint about React being
+  # used before it is defined.
+  #
+  # see https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-use-before-define.md#how-to-use
+  no-use-before-define: 0
+  "@typescript-eslint/no-use-before-define":
+    - warn
 overrides:
   - files:
       - "**/*.tsx"

package.json

@@ -75,8 +75,8 @@
         "@types/uuid": "^3.4.5",
         "@types/webpack-env": "^1.15.2",
         "@types/yup": "^0.29.3",
-        "@typescript-eslint/eslint-plugin": "^3.5.0",
-        "@typescript-eslint/parser": "^3.5.0",
+        "@typescript-eslint/eslint-plugin": "^4.22.1",
+        "@typescript-eslint/parser": "^4.22.1",
         "autoprefixer": "^10.1.0",
         "babel-loader": "^8.0.6",
         "babel-plugin-styled-components": "^1.12.0",
@@ -90,15 +90,15 @@
         "eslint-plugin-react": "^7.20.3",
         "eslint-plugin-react-hooks": "^4.0.5",
         "eslint-plugin-standard": "^4.0.1",
-        "fork-ts-checker-webpack-plugin": "^5.0.6",
+        "fork-ts-checker-webpack-plugin": "^6.2.6",
         "postcss": "^8.2.1",
         "redux-devtools-extension": "^2.13.8",
         "source-map-loader": "^1.0.1",
         "style-loader": "^1.2.1",
         "svg-url-loader": "^6.0.0",
         "terser-webpack-plugin": "^3.0.6",
         "twin.macro": "^2.0.7",
-        "typescript": "^3.9.6",
+        "typescript": "^4.2.4",
         "webpack": "^4.43.0",
         "webpack-assets-manifest": "^3.1.1",
         "webpack-bundle-analyzer": "^3.8.0",

resources/scripts/components/server/WebsocketHandler.tsx

@@ -20,6 +20,18 @@ export default () => {
     const setServerStatus = ServerContext.useStoreActions(actions => actions.status.setServerStatus);
     const { setInstance, setConnectionState } = ServerContext.useStoreActions(actions => actions.socket);
 
+    const updateToken = (uuid: string, socket: Websocket) => {
+        if (updatingToken) return;
+
+        updatingToken = true;
+        getWebsocketToken(uuid)
+            .then(data => socket.setToken(data.token, true))
+            .catch(error => console.error(error))
+            .then(() => {
+                updatingToken = false;
+            });
+    };
+
     const connect = (uuid: string) => {
         const socket = new Websocket();
 
@@ -73,18 +85,6 @@ export default () => {
             .catch(error => console.error(error));
     };
 
-    const updateToken = (uuid: string, socket: Websocket) => {
-        if (updatingToken) return;
-
-        updatingToken = true;
-        getWebsocketToken(uuid)
-            .then(data => socket.setToken(data.token, true))
-            .catch(error => console.error(error))
-            .then(() => {
-                updatingToken = false;
-            });
-    };
-
     useEffect(() => {
         connected && setError('');
     }, [ connected ]);

resources/scripts/components/server/files/FileEditContainer.tsx

@@ -24,7 +24,7 @@ const LazyCodemirrorEditor = lazy(() => import(/* webpackChunkName: "editor" */'
 
 export default () => {
     const [ error, setError ] = useState('');
-    const { action } = useParams();
+    const { action } = useParams<{ action: 'new' | string }>();
     const [ loading, setLoading ] = useState(action === 'edit');
     const [ content, setContent ] = useState('');
     const [ modalVisible, setModalVisible ] = useState(false);

tsconfig.json

@@ -3,18 +3,20 @@
     "target": "es2015",
     "module": "es2020",
     "jsx": "react",
-    "strict": true,
-    "noEmit": true,
-    "noImplicitReturns": true,
     "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "sourceMap": true,
-    "baseUrl": ".",
     "lib": [
       "es2015",
       "dom"
     ],
+    "strict": true,
+    "noEmit": true,
+    "sourceMap": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
     "importsNotUsedAsValues": "preserve",
     "paths": {
       "@/*": [

webpack.config.js

@@ -71,10 +71,17 @@ module.exports = {
     },
     plugins: [
         new AssetsManifestPlugin({ writeToDisk: true, publicPath: true, integrity: true, integrityHashes: ['sha384'] }),
-        new ForkTsCheckerWebpackPlugin(isProduction ? {} : {
-            eslint: {
-                files: `${path.join(__dirname, '/resources/scripts')}/**/*.{ts,tsx}`,
+        new ForkTsCheckerWebpackPlugin({
+            typescript: {
+                mode: 'write-references',
+                diagnosticOptions: {
+                    semantic: true,
+                    syntactic: true,
+                },
             },
+            eslint: isProduction ? undefined : {
+                files: `${path.join(__dirname, '/resources/scripts')}/**/*.{ts,tsx}`,
+            }
         }),
         process.env.ANALYZE_BUNDLE ? new BundleAnalyzerPlugin({
             analyzerHost: '0.0.0.0',