Downgrade to TypeScript 4.4.4

Also fixes rehype-shiki types
See: microsoft/TypeScript#46900'

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package.json

@@ -34,6 +34,6 @@
     "postcss": "^8.4.4",
     "prettier": "^2.5.1",
     "tailwindcss": "^3.0.0",
-    "typescript": "^4.5.3"
+    "typescript": "^4.4.4"
   }
 }

utils/rehype-shiki.ts

@@ -1,11 +1,12 @@
 import { raw as parse } from 'hast-util-raw';
 import type { Element, ElementContent } from 'hast';
 import { toString } from 'hast-util-to-string';
-import { visit } from 'unist-util-visit';
+import { visit, Parent } from 'unist-util-visit';
 import type { Visitor } from 'unist-util-visit/complex-types';
 import { Highlighter, Lang } from 'shiki';
 
-const hasTagname = (item: ElementContent): item is Element => 'tagName' in item;
+const isElement = (item: ElementContent): item is Element =>
+  item.type === 'element';
 
 function attacher(options: {
   highlighter: Highlighter;
@@ -18,48 +19,54 @@ function attacher(options: {
       ? true
       : options.ignoreUnknownLanguage;
 
-  const transformer = (tree) => {
-    const visitor: Visitor = (node: Element, _index, parent?: Element) => {
+  const transformer = (tree: Parent): void => {
+    const visitor: Visitor<Element, Element> = (node, _index, parent) => {
       if (!parent || parent.tagName !== 'pre' || node.tagName !== 'code') {
         return;
       }
 
       let lang = getLanguage(node);
 
-      if (ignoreUnknownLanguage && !loadedLanguages.includes(lang)) {
-        lang = null;
+      if (lang && ignoreUnknownLanguage && !loadedLanguages.includes(lang)) {
+        lang = undefined;
       }
 
       const code = parse({
         type: 'raw',
         value: highlighter.codeToHtml(toString(node), lang),
-      }) as Element;
+      });
 
       // Add a `block` prop so we can style inline code differently
-      if (hasTagname(code.children?.[0])) {
-        code.children[0].properties.block = true;
-      }
+      if (code && code.type === 'element') {
+        if (isElement(code.children?.[0])) {
+          if (code.children[0].properties) {
+            code.children[0].properties.block = true;
+          }
+        }
 
-      code.properties.lang = lang;
-      parent.properties = code.properties;
-      parent.children = code.children;
+        if (code.properties) {
+          code.properties.lang = lang;
+        }
+        parent.properties = code.properties;
+        parent.children = code.children;
+      }
     };
     visit(tree, 'element', visitor);
   };
 
   return transformer;
 }
 
-function getLanguage(node: Element): Lang | null {
-  const className = (node.properties.className as string[]) || [];
+function getLanguage(node: Element): Lang | undefined {
+  const className = (node?.properties?.className as string[]) || [];
 
   for (const classListItem of className) {
     if (classListItem.slice(0, 9) === 'language-') {
       return classListItem.slice(9).toLowerCase() as Lang;
     }
   }
 
-  return null;
+  return undefined;
 }
 
 export default attacher;