4.0 > 4.1: full project migration from JavaScript to TypeScript & many bug fixes

Author: avrtt

README.md

@@ -66,6 +66,10 @@ Here you can find the code and documentation of my minimalist, static, MDX-based
 - [Contribution](#contribution)
   - [To do](#to-do)
 - [Development](#development)
+- [Troubleshooting](#troubleshooting)
+  - [Type checking](#type-checking)
+  - [Type errors with third-party libraries](#type-errors-with-third-party-libraries)
+  - [JSX errors](#jsx-errors)
 - [Copyright](#copyright)
   - [Licensing](#licensing)
   - [Animated emojis](#animated-emojis)
@@ -257,6 +261,28 @@ Feature suggestions and especially bug/typo reports are very welcome. Feel free
 > (про выделение памяти и что по умолчанию 5 GB, как избежать проблем) -->
 
 
+## Troubleshooting
+
+### Type checking
+
+Run `npm run check-types` for tracking TypeScript-specific errors.
+
+TypeScript config is strict, with `noImplicitAny` option enabled.
+
+### Type errors with third-party libraries
+
+When encountering type errors with third-party libraries, it's probably useful to:
+1. check if @types packages are available: `npm install --save-dev @types/package-name`
+2. add custom type declarations in `src/types/module-declarations.d.ts`
+
+### JSX errors
+
+In case of JSX-related errors, verify that:
+1. the TS configuration has `jsx` set correctly
+2. files using JSX have `.tsx` extension
+3. React is imported in files using JSX
+
+
 ## Copyright
 
 ### Licensing

gatsby-ssr.js gatsby-browser.tsxgatsby-ssr.js renamed to gatsby-browser.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
+import type { GatsbyBrowser } from 'gatsby';
 import Layout from './src/components/layout';
 //import { LocationProvider } from '@reach/router';
 
-export const onRenderBody = ({ setHeadComponents }) => {
+export const onRenderBody = ({ setHeadComponents }: { setHeadComponents: (components: React.ReactNode[]) => void }): void => {
   setHeadComponents([
     <meta key="charset" charSet="utf-8" />,
     <meta
@@ -13,12 +14,12 @@ export const onRenderBody = ({ setHeadComponents }) => {
   ]);
 };
 
-export const wrapPageElement = ({ element, props }) => {
-  // prevent undefined pages from wrapping twice since 404.js redirects to NotFound component
+export const wrapPageElement: GatsbyBrowser['wrapPageElement'] = ({ element, props }) => {
+  // prevent undefined pages from wrapping twice since 404.tsx redirects to NotFound component
   if (props.pageContext?.is404) {
     return element
   }
-  // wrap all other pages with layout.jsx
+  // wrap all other pages with layout.tsx
   return <Layout {...props}>{element}</Layout>
 };
 
@@ -31,17 +32,17 @@ export const wrapPageElement = ({ element, props }) => {
   );
 };*/
 
-export const shouldUpdateScroll = () => false;
+export const shouldUpdateScroll: GatsbyBrowser['shouldUpdateScroll'] = () => false;
 
-export const onRouteUpdate = ({ location }) => {
+export const onRouteUpdate: GatsbyBrowser['onRouteUpdate'] = ({ location }) => {
   const exemptPaths = [
     '/adventures', 
     '/research', 
     '/thoughts'
   ];
   // prevent from scrolling on top on specific pages to save position after reload
   const shouldScroll = !exemptPaths.some(path => location.pathname.startsWith(path));
-  if (shouldScroll) {
+  if (shouldScroll && typeof window !== 'undefined') {
     window.scrollTo({ top: 0, behavior: "smooth" });
   }
 };

gatsby-config.js gatsby-config.tsgatsby-config.js renamed to gatsby-config.ts

@@ -1,4 +1,15 @@
-module.exports = {
+import type { GatsbyConfig } from "gatsby";
+
+interface PageWithFrontmatter {
+  path: string;
+  frontmatter?: {
+    slug: string;
+    prioritySitemap?: string;
+    changefreqSitemap?: string;
+  };
+}
+
+const config: GatsbyConfig = {
   siteMetadata: {
     title: `avrtt.blog`,
     description: `My personal all-in-one corner of the internet — a reinvention of old school blogging, community hub, info page, data science & AI learning platform.`,
@@ -27,8 +38,8 @@ module.exports = {
         `,
         feeds: [
           {
-            serialize: ({ query: { site, allMdx } }) => {
-              return allMdx.nodes.map(node => {
+            serialize: ({ query: { site, allMdx } }: { query: { site: any, allMdx: any } }) => {
+              return allMdx.nodes.map((node: any) => {
                 return Object.assign({}, node.frontmatter, {
                   description: node.excerpt,
                   date: node.frontmatter.date,
@@ -93,25 +104,29 @@ module.exports = {
         resolvePages: ({
           allSitePage: { nodes: allPages },
           allMdx: { nodes: allMdxNodes },
+        }: {
+          allSitePage: { nodes: Array<{ path: string }> };
+          allMdx: { nodes: Array<{ frontmatter: { slug: string; prioritySitemap?: string; changefreqSitemap?: string } }> };
         }) => {
           return allPages.map(page => {
+            const pageWithFrontmatter = page as PageWithFrontmatter;
             const mdxNode = allMdxNodes.find(mdx =>
               mdx.frontmatter.slug === page.path.replace(/\/+$/, "")
             )
             if (mdxNode) {
-              page.frontmatter = mdxNode.frontmatter
+              pageWithFrontmatter.frontmatter = mdxNode.frontmatter;
             }
-            return page
+            return pageWithFrontmatter;
           })
         },
-        serialize: (page) => {
+        serialize: (page: PageWithFrontmatter) => {
           const isAboutPage = (page.path === "/about/" || page.path === "/about")
           const changefreq = isAboutPage
             ? "yearly"
             : page.frontmatter?.changefreqSitemap || "weekly"
           const priority = isAboutPage
             ? 1.0
-            : parseFloat(page.frontmatter?.prioritySitemap) || 0.4
+            : parseFloat(page.frontmatter?.prioritySitemap || "0.4") || 0.4
           return {
             url: `https://avrtt.github.io${page.path}`,
             changefreq,
@@ -217,4 +232,6 @@ module.exports = {
       },
     },
   ],
-}
+};
+
+export default config;