fix(ts-types): add type guards to any type (#819)

.vscode/settings.json

@@ -9,6 +9,7 @@
     "instanceof",
     "katex",
     "keyof",
+    "mdast",
     "monokai",
     "nocopy",
     "noline",
@@ -17,6 +18,7 @@
     "stylelint",
     "tailwindcss",
     "typeof",
+    "unist",
     "vercel"
   ]
 }

components/CodeBlocks/BlockCode.tsx

@@ -7,7 +7,7 @@ import theme from './monokai';
 interface Props {
   enableLine: boolean;
   lines: Set<number>;
-  language?: string;
+  language: Language;
   children: string;
 }
 
@@ -20,7 +20,7 @@ const BlockCode = ({
   <Highlight
     {...defaultProps}
     code={children}
-    language={language as Language}
+    language={language}
     theme={theme}
   >
     {({ className, style, tokens, getLineProps, getTokenProps }) => (

components/CodeBlocks/LiveCode.test.tsx

@@ -4,7 +4,7 @@ import LiveCode from './LiveCode';
 describe('LiveCode', () => {
   test('should render live code correctly (snapshot)', () => {
     const { container } = render(
-      <LiveCode language="ts">const foo = bar();</LiveCode>
+      <LiveCode language="typescript">const foo = bar();</LiveCode>
     );
 
     expect(container).toMatchSnapshot();

components/CodeBlocks/LiveCode.tsx

@@ -10,7 +10,7 @@ import styles from './LiveCode.module.css';
 import theme from './monokai';
 
 interface Props {
-  language?: string;
+  language?: Language;
   children?: string;
 }
 
@@ -23,7 +23,7 @@ const LiveCode = ({ language, children }: Props): JSX.Element => (
     <LiveProvider
       scope={scope}
       code={children}
-      language={language as Language}
+      language={language}
       theme={theme}
     >
       <LiveEditor padding="1.25rem" className={styles.editor} />

components/CodeBlocks/Pre.tsx

@@ -3,7 +3,12 @@ import { classNames, dynamic } from '@components/utils';
 import type { HTMLProps, ReactElement } from 'react';
 import BlockCode from './BlockCode';
 import styles from './Pre.module.css';
-import { normalizeCode, normalizeLanguage, normalizeLines } from './utils';
+import {
+  normalizeCode,
+  normalizeLanguage,
+  normalizeLanguageName,
+  normalizeLines,
+} from './utils';
 
 const LiveCode = dynamic(() => import('./LiveCode'));
 
@@ -15,6 +20,11 @@ interface Props extends HTMLProps<HTMLPreElement> {
   lines?: string;
 }
 
+interface CodeProps {
+  children?: string;
+  className?: string;
+}
+
 const Pre = ({
   live = false,
   noline = false,
@@ -24,11 +34,11 @@ const Pre = ({
   children,
   className,
 }: Props): JSX.Element => {
-  const codeElement = children as ReactElement;
+  const codeElement = children as ReactElement<CodeProps>;
   const code = normalizeCode(codeElement?.props?.children);
-  const languageClass = codeElement?.props?.className as string;
-  const language = languageClass?.replace('language-', '');
-  const languageName = normalizeLanguage(language);
+  const languageClass = codeElement?.props?.className;
+  const language = normalizeLanguage(languageClass);
+  const languageName = normalizeLanguageName(language);
   const highlightLines = normalizeLines(lines);
 
   return (