chore: Upgrade typescript

.eslintignore

@@ -25,6 +25,7 @@ packages/gatsby-image/withIEPolyfill/index.js
 packages/gatsby/cache-dir/commonjs/**/*
 packages/gatsby-admin/public
 packages/gatsby/gatsby-admin-public
+packages/gatsby-codemods/transforms
 
 packages/gatsby-source-wordpress/test-site/**
 !packages/gatsby-source-wordpress/test-site/__tests__

.eslintrc.js

@@ -29,6 +29,11 @@ module.exports = {
     before: true,
     after: true,
     spyOn: true,
+    // These should be in scope but for some reason eslint can't see them
+    NodeJS: true,
+    JSX: true,
+    NodeRequire: true,
+    TimerHandler: true,
     __PATH_PREFIX__: true,
     __BASE_PATH__: true,
     __ASSET_PREFIX__: true,
@@ -48,8 +53,10 @@ module.exports = {
     "no-unused-vars": [
       "warn",
       {
-        varsIgnorePattern: "^_"
-      }
+        varsIgnorePattern: "^_",
+        argsIgnorePattern: "^_",
+        ignoreRestSiblings: true,
+      },
     ],
     "consistent-return": ["error"],
     "filenames/match-regex": ["error", "^[a-z-\\d\\.]+$", true],
@@ -93,7 +100,9 @@ module.exports = {
         ...TSEslint.configs.recommended.rules,
         // We should absolutely avoid using ts-ignore, but it's not always possible.
         // particular when a dependencies types are incorrect.
-        "@typescript-eslint/ban-ts-ignore": "warn",
+        "@typescript-eslint/ban-ts-comment": {
+          "ts-ignore": "allow-with-description",
+        },
         // This rule is great. It helps us not throw on types for areas that are
         // easily inferrable. However we have a desire to have all function inputs
         // and outputs declaratively typed. So this let's us ignore the parameters
@@ -102,16 +111,38 @@ module.exports = {
           "error",
           { ignoreParameters: true },
         ],
-        "@typescript-eslint/camelcase": [
+        "@typescript-eslint/ban-types": [
           "error",
           {
-            // This rule tries to ensure we use camelCase for all variables, properties
-            // functions, etc. However, it is not always possible to ensure properties
-            // are camelCase. Specifically we have `node.__gatsby_resolve` which breaks
-            // this rule. This allows properties to be whatever they need to be.
-            properties: "never",
-            // Allow unstable api's to use `unstable_`, which is easier to grep
-            allow: ["^unstable_"],
+            extendDefaults: true,
+            types: {
+              "{}": false,
+              object: {
+                fixWith: "Record<string, unknown>",
+              },
+            },
+          },
+        ],
+        "@typescript-eslint/naming-convention": [
+          {
+            selector: "default",
+            format: ["camelCase"],
+          },
+          { selector: "variable", format: ["camelCase", "UPPER_CASE"] },
+          {
+            selector: "parameter",
+            format: ["camelCase"],
+            leadingUnderscore: "allow",
+            prefix: ["unstable_", ""],
+          },
+          {
+            selector: "typeLike",
+            format: ["PascalCase"],
+          },
+          {
+            selector: "interface",
+            format: ["PascalCase"],
+            prefix: ["I"],
           },
         ],
         // This rule tries to prevent using `require()`. However in node code,
@@ -127,6 +158,7 @@ module.exports = {
         // -  baz: string;
         // +  baz: string
         // }
+        "@typescript-eslint/no-extra-semi": false,
         "@typescript-eslint/member-delimiter-style": [
           "error",
           {
@@ -135,13 +167,6 @@ module.exports = {
             },
           },
         ],
-        // This ensures all interfaces are named with an I as a prefix
-        // e.g.,
-        // interface IFoo {}
-        "@typescript-eslint/interface-name-prefix": [
-          "error",
-          { prefixWithI: "always" },
-        ],
         "@typescript-eslint/no-empty-function": "off",
         // This ensures that we always type the return type of functions
         // a high level focus of our TS setup is typing fn inputs and outputs.

e2e-tests/development-runtime/src/components/class-component.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react"
 
 class ClassComponent extends Component {
+  // eslint-disable-next-line no-undef
   state = {
     custom: true,
   }

package.json

@@ -25,8 +25,8 @@
     "@types/signal-exit": "^3.0.0",
     "@types/stack-trace": "^0.0.29",
     "@types/webpack-merge": "^4.1.5",
-    "@typescript-eslint/eslint-plugin": "^2.34.0",
-    "@typescript-eslint/parser": "^2.34.0",
+    "@typescript-eslint/eslint-plugin": "^4.14.2",
+    "@typescript-eslint/parser": "^4.14.2",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^24.9.0",
     "chalk": "^4.1.0",
@@ -73,6 +73,7 @@
     "remark-preset-lint-markdown-style-guide": "^3.0.1",
     "remark-preset-lint-recommended": "^4.0.1",
     "remark-retext": "^4.0.0",
+    "retext": "^7.0.1",
     "retext-diacritics": "^3.0.0",
     "retext-emoji": "^7.0.2",
     "retext-english": "^3.0.4",
@@ -82,11 +83,10 @@
     "retext-spell": "^4.0.0",
     "retext-syntax-mentions": "^2.1.1",
     "retext-syntax-urls": "^2.0.0",
-    "retext": "^7.0.1",
     "rimraf": "^3.0.2",
     "svgo": "1.3.2",
     "ts-jest": "^22",
-    "typescript": "^3.9.7",
+    "typescript": "^4.1.5",
     "unified": "^9.2.0",
     "yargs": "^15.4.1"
   },
@@ -159,4 +159,4 @@
   "workspaces": [
     "packages/*"
   ]
-}
+}

packages/create-gatsby/package.json

@@ -29,13 +29,13 @@
     "fs-extra": "^9.0.1",
     "gatsby-plugin-utils": "^1.0.0-next.0",
     "joi": "^17.2.1",
-    "microbundle": "^0.12.4",
+    "microbundle": "^0.13.0",
     "node-fetch": "^2.6.1",
     "prettier": "^2.1.2",
     "string-length": "^4.0.1",
     "terminal-link": "^2.1.1",
     "tiny-spin": "^1.0.2",
-    "typescript": "^4.0.5",
+    "typescript": "^4.1.5",
     "uuid": "3.4.0"
   },
   "repository": {

packages/create-gatsby/src/utils.ts

@@ -1,6 +1,6 @@
 const ESC = `\u001b`
 
-export const clearLine = (count = 1): Promise<boolean> =>
+export const clearLine = (count = 1): Promise<void> =>
   new Promise(resolve => {
     // First move the cursor up one line...
     process.stderr.moveCursor(0, -count, () => {

packages/create-gatsby/tsconfig.json

@@ -7,6 +7,7 @@
     "allowJs": true /* Allow javascript files to be compiled. */,
     // "checkJs": true,                       /* Report errors in .js files. */
     // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    // If you're getting a warning about declarationDir, it's probably this https://github.com/developit/microbundle/issues/771
     "declaration": false /* Generates corresponding '.d.ts' file. */,
     // "sourceMap": true,                     /* Generates corresponding '.map' file. */
     // "outFile": "./",                       /* Concatenate and emit output to single file. */

packages/gatsby-admin/package.json

@@ -16,8 +16,8 @@
     "@feedback-fish/react": "^1.2.1",
     "@types/react-instantsearch-dom": "^5.2.6",
     "@types/socket.io-client": "^1.4.35",
-    "@typescript-eslint/eslint-plugin": "^2.34.0",
-    "@typescript-eslint/parser": "^2.34.0",
+    "@typescript-eslint/eslint-plugin": "^4.14.2",
+    "@typescript-eslint/parser": "^4.14.2",
     "csstype": "^2.6.14",
     "formik": "^2.2.6",
     "gatsby": "^3.0.0-next.8",
@@ -45,7 +45,7 @@
     "strict-ui": "^0.2.0-0",
     "subscriptions-transport-ws": "^0.9.18",
     "theme-ui": "^0.4.0-rc.14",
-    "typescript": "^3.9.7",
+    "typescript": "^4.1.5",
     "urql": "^1.11.6",
     "yup": "^0.32.8"
   },

packages/gatsby-admin/src/components/instantsearch-provider.tsx

@@ -7,12 +7,13 @@ import {
   ToggleRefinement,
 } from "react-instantsearch-dom"
 import algoliaConfig from "../utils/algolia-config"
+import { ReactNode } from "react"
 
 export default function InstantSearchProvider({
   children,
   searchState,
 }: {
-  children: React.ReactNode
+  children: ReactNode
   searchState?: string
 }): JSX.Element {
   return (

packages/gatsby-admin/src/components/layout.tsx

@@ -5,8 +5,9 @@ import { Helmet } from "react-helmet"
 import Providers from "./providers"
 import Navbar from "./navbar"
 import { PageviewTracker } from "./pageview-tracker"
+import { ReactNode } from "react"
 
-function Layout({ children }: { children: React.ReactNode }): JSX.Element {
+function Layout({ children }: { children: ReactNode }): JSX.Element {
   return (
     <Providers>
       <Helmet>

packages/gatsby-admin/src/components/plugin-search.tsx

@@ -1,5 +1,6 @@
 /* @jsx jsx */
 import { jsx } from "strict-ui"
+import React from "react"
 import { connectAutoComplete } from "react-instantsearch-dom"
 import {
   Combobox,

packages/gatsby-admin/src/pages/plugins.tsx

@@ -5,7 +5,7 @@ import { useQuery } from "urql"
 import { Spinner } from "theme-ui"
 import { Global } from "@emotion/react"
 import { useMutation } from "urql"
-import { useState, Fragment, useEffect } from "react"
+import { useState, Fragment, useEffect, FormEvent } from "react"
 import {
   AnchorButton,
   Button,
@@ -70,8 +70,10 @@ const markdownRenderers = {
           style={style}
         >
           {tokens.map((line, i) => (
+            // eslint-disable-next-line react/jsx-key
             <div {...getLineProps({ line, key: i })}>
               {line.map((token, key) => (
+                // eslint-disable-next-line react/jsx-key
                 <span {...getTokenProps({ token, key })} />
               ))}
             </div>
@@ -319,7 +321,7 @@ export default function PluginView(
           <Flex
             as="form"
             // @ts-ignore
-            onSubmit={(evt: React.FormEvent): void => {
+            onSubmit={(evt: FormEvent): void => {
               evt.preventDefault()
               setValidationError(null)
               let json

packages/gatsby-cli/package.json

@@ -69,7 +69,7 @@
     "rollup": "^2.34.2",
     "rollup-plugin-auto-external": "^2.0.0",
     "rollup-plugin-internal": "^1.0.0",
-    "typescript": "^3.9.7"
+    "typescript": "^4.1.5"
   },
   "files": [
     "lib/",