Make TS stricter

gatsby-config.ts

@@ -82,7 +82,13 @@ const config: GatsbyConfig = {
             }
           }
         }`,
-        resolvePages: ({ site, allSitePage: { nodes: allPages } }) => {
+        resolvePages: ({
+          site,
+          allSitePage: { nodes: allPages },
+        }: {
+          site: { siteMetadata: { siteUrl: string } }
+          allSitePage: { nodes: Array<{ path: string }> }
+        }) => {
           return allPages
             .filter((page) => {
               // Filter out 404 pages

gatsby-node.ts

@@ -58,9 +58,11 @@ const checkIsMdxOutdated = (filePath: string): boolean => {
   let englishMatch = ""
   let intlMatch = ""
   try {
+    // @ts-ignore
     englishData.match(re).forEach((match) => {
       englishMatch += match.replace(re, (_, p1, p2) => p1 + p2)
     })
+    // @ts-ignore
     translatedData.match(re).forEach((match) => {
       intlMatch += match.replace(re, (_, p1, p2) => p1 + p2)
     })
@@ -443,7 +445,9 @@ export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"]
     const { createTypes } = actions
     const { sdls } = Schema
 
-    createTypes([...Object.keys(sdls).map((sdlKey) => sdls[sdlKey])])
+    createTypes([
+      ...Object.keys(sdls).map((sdlKey) => sdls[sdlKey as keyof typeof sdls]),
+    ])
   }
 
 export const onPreBootstrap: GatsbyNode["onPreBootstrap"] = ({ reporter }) => {

overrides.d.ts

@@ -1,5 +1,17 @@
+// temporary deactivate this lib since they didn't release the correct types to
+// support react 18
+declare module "react-helmet"
+
+// temporary deactivate this lib. Bump its version to v5 which is built in TS
+// and supports react 18 types
+declare module "react-select"
+
+// temporary deactivate this lib since they didn't release the correct types to
+// support react 18
+declare module "react-instantsearch-dom"
+
 declare module "*developer-docs-links.yaml" {
-  import { DeveloperDocsLink } from "./src/types"
+  type DeveloperDocsLink = import("./src/types").DeveloperDocsLink
   const content: Array<DeveloperDocsLink>
   export default content
 }

package.json

@@ -94,7 +94,7 @@
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.6.3"
+    "typescript": "^4.8.3"
   },
   "scripts": {
     "build": "gatsby build",

src/@chakra-ui/gatsby-plugin/semanticTokens.ts

@@ -9,8 +9,9 @@ const oldDarkThemeColors = oldDarkTheme.colors
 // define each of the old colors as a `semanticToken`:
 // `name: { _light: lightColor, _dark: darkColor }`
 const oldColors = Object.keys(oldLightThemeColors).reduce((colors, color) => {
-  const lightColor = oldLightThemeColors[color]
-  const darkColor = oldDarkThemeColors[color]
+  const lightColor =
+    oldLightThemeColors[color as keyof typeof oldLightThemeColors]
+  const darkColor = oldDarkThemeColors[color as keyof typeof oldDarkThemeColors]
 
   if (typeof lightColor !== "string" || typeof darkColor !== "string") {
     return colors

src/@chakra-ui/gatsby-plugin/styles.ts

@@ -1,9 +1,9 @@
-import { mode } from "@chakra-ui/theme-tools"
+import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools"
 
 import { lightTheme as oldTheme } from "../../theme"
 
 const styles = {
-  global: (props) => ({
+  global: (props: StyleFunctionProps) => ({
     /**
      * THESE ARE OLD GLOBAL STYLES - carried over from old css files
      *

src/components/CodeModal.tsx

@@ -74,7 +74,7 @@ const ModalCloseIcon = styled(Icon)`
   margin: 1rem;
 `
 
-const Overlay = ({ isActive }) => (
+const Overlay = ({ isActive }: { isActive: boolean }) => (
   <StyledOverlay
     initial={false}
     animate={{ opacity: isActive ? 1 : 0, zIndex: isActive ? 1001 : -1 }}

src/components/Codeblock.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from "react"
+import React, { useState, useContext, ReactNode, ReactElement } from "react"
 import styled from "@emotion/styled"
 import { useTheme } from "@emotion/react"
 import Highlight, {
@@ -231,7 +231,7 @@ const codeTheme = {
   },
 }
 
-const getValidChildrenForCodeblock = (child) => {
+const getValidChildrenForCodeblock = (child: ReactElement): ReactElement => {
   try {
     if (typeof child !== "string") {
       return getValidChildrenForCodeblock(child.props.children)

src/components/DeveloperDocsLinks.tsx

@@ -12,34 +12,32 @@ const DeveloperDocsLinks: React.FC<IProps> = ({ headerId }) => (
   <React.Fragment>
     {docLinks
       .filter(({ id }) => id.includes(headerId))
-      .map(({ items, id }) => (
+      .map(({ items = [], id }) => (
         <ul key={id}>
-          {items &&
-            items.map(({ id, to, path, description, items }) => (
-              <ListItem key={id}>
-                {to || path ? (
-                  <Link to={to || path}>
-                    <Translation id={id} />
-                  </Link>
-                ) : (
+          {items.map(({ id, to, path, description, items = [] }) => (
+            <ListItem key={id}>
+              {to || path ? (
+                <Link to={to || path}>
                   <Translation id={id} />
-                )}
-                <i>
-                  {" – "}
-                  <Translation id={description} />
-                </i>
-                <ul>
-                  {items &&
-                    items.map(({ id, to, path }) => (
-                      <ListItem key={id}>
-                        <Link to={to || path}>
-                          <Translation id={id} />
-                        </Link>
-                      </ListItem>
-                    ))}
-                </ul>
-              </ListItem>
-            ))}
+                </Link>
+              ) : (
+                <Translation id={id} />
+              )}
+              <i>
+                {" – "}
+                <Translation id={description} />
+              </i>
+              <ul>
+                {items.map(({ id, to, path }) => (
+                  <ListItem key={id}>
+                    <Link to={to || path}>
+                      <Translation id={id} />
+                    </Link>
+                  </ListItem>
+                ))}
+              </ul>
+            </ListItem>
+          ))}
         </ul>
       ))}
   </React.Fragment>

src/components/FileContributors.tsx

@@ -261,14 +261,19 @@ const FileContributors: React.FC<IProps> = ({
   const [isModalOpen, setModalOpen] = useState(false)
   const intl = useIntl()
 
-  const { loading, error, data } = useQuery(COMMIT_HISTORY, {
+  const { loading, error, data } = useQuery<{
+    repository: {
+      ref: { target: { history: { edges: Array<{ node: Commit }> } } }
+    }
+  }>(COMMIT_HISTORY, {
     variables: { relativePath },
   })
 
   if (error) return null
 
-  const commits: Array<Commit> =
-    data?.repository?.ref?.target?.history?.edges?.map((commit) => commit.node)
+  const commits: Array<Commit> = (
+    data?.repository?.ref?.target?.history?.edges || []
+  ).map((commit) => commit.node)
 
   const lastCommit = commits?.[0] || {}
   const lastContributor = lastCommit?.author || {}