update a few more components to typescript

components/MDContent.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import { useRouter } from 'next/router'
 
-function BackLinks({ linkList }) {
+interface BackLinksProps {
+  linkList: unknown[]
+}
 
+function BackLinks({ linkList }) {
   return (<div className="note-footer">
     <h3 className="backlink-heading">Link to this note</h3>
     {(linkList != null && linkList.length > 0)
       ?
       <>
-
         <div className="backlink-container">
           {linkList.map(aLink =>
             <div key={aLink.slug} className="backlink">
@@ -26,7 +28,14 @@ function BackLinks({ linkList }) {
   </div>);
 }
 
-function MDContent({ content, backLinks, handleOpenNewContent }) {
+
+interface MDContentProps {
+  content: unknown
+  backLinks: unknown[]
+  handleOpenNewContent: (arg?: unknown) => void
+}
+
+function MDContent({ content, backLinks, handleOpenNewContent }: MDContentProps) {
 
   function _handleInternalLinkClick() {
     //Processing fetching

pages/notes/[id].tsx

@@ -2,7 +2,6 @@ import Head from "next/head";
 import Layout from "../../components/Layout";
 import Util from "../../lib/utils"
 import FolderTree from "../../components/FolderTree";
-import { getFlattenArray } from "../../lib/utils";
 import MDContent from "../../components/MDContent";
 
 
@@ -17,7 +16,7 @@ export default function Home({ note, backLinks, fileNames, tree, flattenNodes })
         <nav className="nav-bar">
           <FolderTree tree={tree} flattenNodes={flattenNodes} />
         </nav>
-        <MDContent content={note.data} fileNames={fileNames} handleOpenNewContent={null} backLinks={backLinks} />
+        <MDContent content={note.data} handleOpenNewContent={null} backLinks={backLinks} />
       </div>
 
     </Layout>
@@ -41,15 +40,15 @@ export function getStaticProps({ params }) {
   const tree = Util.convertObject(Util.getDirectoryData());
   const flattenNodes = Util.getFlattenArray(tree)
 
-  const listOfEdges = edges.filter(anEdge => anEdge.target === params.id)
-  const internalLinks = listOfEdges.map(anEdge => nodes.find(aNode => aNode.slug === anEdge.source)).filter(element => element !== undefined)
+  const listOfEdges: unknown[] = edges.filter(anEdge => anEdge.target === params.id)
+  const internalLinks: unknown[] = listOfEdges.map(anEdge => nodes.find(aNode => aNode.slug === anEdge.source)).filter(element => element !== undefined)
   const backLinks = [...new Set(internalLinks)]
   return {
     props: {
       note,
       tree: tree,
       flattenNodes: flattenNodes,
-      backLinks: backLinks.filter(link => link.slug !== params.id),
+      backLinks: backLinks.filter((link: Array<unknown & { slug: string }>) => link.slug !== params.id),
     },
   };
 }

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "target": "ESNext",
     "lib": [
       "dom",
       "dom.iterable",