[chore] initial TypeScript setup and migration

- Set up TypeScript configuration and dependencies - Converted all JS files to TS files - Temporarily resolved type issues using 'any'
barrystone · Jul 23, 2024 · f340ef6 · f340ef6
1 parent ed34326
commit f340ef6
Show file tree

Hide file tree

Showing 30 changed files with 10,594 additions and 4,445 deletions.
diff --git a/components/AboutSection.js → components/AboutSection.tsx b/components/AboutSection.js → components/AboutSection.tsx
@@ -10,19 +10,23 @@ const AboutSection = () => {
   }, []);
 
   const aboutAnimation = () => {
-    const skillsetClasslist = document.querySelector('.skillset').classList;
+    const skillsetElement = document.querySelector('.skillset');
+    const skillsetClasslist = skillsetElement
+      ? skillsetElement.classList
+      : null;
 
     const enterAnimation = () => {
       const aboutElement = document
         .getElementById('aboutSection')
         ?.getBoundingClientRect();
       if (
-        aboutElement?.top >= 0 - aboutElement?.height / 4 &&
-        aboutElement?.top <=
-          window.innerHeight - aboutElement?.height + aboutElement?.height / 4
+        aboutElement && // Add null check for aboutElement
+        aboutElement.top >= 0 - aboutElement.height / 4 &&
+        aboutElement.top <=
+          window.innerHeight - aboutElement.height + aboutElement.height / 4
       ) {
         window.requestAnimationFrame(() => {
-          skillsetClasslist.add('skillset--show');
+          skillsetClasslist?.add('skillset--show');
         });
 
         window.removeEventListener('scroll', enterAnimation);
@@ -31,38 +35,38 @@ const AboutSection = () => {
     window.addEventListener('scroll', enterAnimation);
 
     // skillSet title hover animation
-    document.getElementById('skill').addEventListener('mouseleave', () => {
+    document.getElementById('skill')?.addEventListener('mouseleave', () => {
       window.requestAnimationFrame(() => {
-        skillsetClasslist.add('skillset--show');
+        skillsetClasslist?.add('skillset--show');
       });
     });
-    document.getElementById('skill').addEventListener('mouseover', () => {
-      skillsetClasslist.remove('skillset--show');
+    document.getElementById('skill')?.addEventListener('mouseover', () => {
+      skillsetClasslist?.remove('skillset--show');
     });
 
     // projectContent title
     const projectContentTitle = document.getElementById('collects');
-    projectContentTitle.addEventListener('click', () => {
+    projectContentTitle?.addEventListener('click', () => {
       window.open('https://github.com/barrystone', '_blank');
     });
-    projectContentTitle.addEventListener('mouseover', () => {
+    projectContentTitle?.addEventListener('mouseover', () => {
       projectContentTitle.innerHTML = 'Github';
     });
-    projectContentTitle.addEventListener('mouseleave', () => {
+    projectContentTitle?.addEventListener('mouseleave', () => {
       projectContentTitle.innerHTML = '我的作品';
       projectContentTitle.style.cursor = 'pointer';
     });
   };
 
   const screwsRotate = () => {
-    const rotete = (id) => {
+    const rotete = (id: any) => {
       const screws = document.querySelectorAll('.section-about__screwbox');
-      document.getElementById(id).addEventListener('mouseover', () => {
+      document.getElementById(id)?.addEventListener('mouseover', () => {
         for (let screw of screws) {
           screw.classList.add('section-about__screwbox--rotate');
         }
       });
-      document.getElementById(id).addEventListener('mouseleave', () => {
+      document.getElementById(id)?.addEventListener('mouseleave', () => {
         for (let screw of screws) {
           screw.classList.remove('section-about__screwbox--rotate');
         }

diff --git a/components/NoteSection.js → components/NoteSection.tsx b/components/NoteSection.js → components/NoteSection.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import analyzeReadme from '../utils/analyzeReadme';
 
 const NoteSection = () => {
-  const [notes, setNotes] = useState({});
+  const [notes, setNotes] = useState<{ [key: string]: any }>({});
 
   useEffect(() => {
     fetchNotes();
@@ -23,7 +23,7 @@ const NoteSection = () => {
         const serverSideData = await res.json();
         setNotes(serverSideData.analyzedData);
       }
-    } catch (err) {
+    } catch (err: any) {
       console.log('error', err.message);
     }
   };
@@ -47,7 +47,7 @@ const NoteSection = () => {
                   <p>{e}</p>
                 </div>
                 <ul key={idx}>
-                  {notes[e].splice(0, listNotes).map((f, index) => (
+                  {notes[e].splice(0, listNotes).map((f: any, index: any) => (
                     <li
                       key={index}
                       className={
@@ -57,18 +57,19 @@ const NoteSection = () => {
                             ''
                       }
                     >
-                      <a href={Object.values(f)} target="_blank">
+                      <a href={Object.values(f).toString()} target="_blank">
                         {Object.keys(f)}
                       </a>
                     </li>
                   ))}
+
                   {notes[e].length > 0 ? (
                     <li
                       style={{
                         listStyle: 'none',
                         letterSpacing: '.3rem',
                         fontSize: '1.8rem',
-                        marginTop: '-1.5rem'
+                        marginTop: '-1.5rem',
                       }}
                     >
                       ...

diff --git a/components/RepoSection.js → components/RepoSection.tsx b/components/RepoSection.js → components/RepoSection.tsx
@@ -4,7 +4,7 @@ import languageImg from '../utils/languageImg';
 
 // import ReposDataTesting from '../_data/reposData_210524.json';
 
-const RepoSection = ({ reposData: staticReposData }) => {
+const RepoSection = ({ reposData: staticReposData }: { reposData: any[] }) => {
   const sliderSettings = {
     dots: false,
     infinite: true,
@@ -16,7 +16,7 @@ const RepoSection = ({ reposData: staticReposData }) => {
     autoplaySpeed: 3000,
   };
 
-  const [reposData, setReposData] = useState([]);
+  const [reposData, setReposData] = useState<any[]>([]);
   const [RwdSlideSettings, setRwdSlideSettings] = useState(sliderSettings);
 
   const onRwdSlideSettings = () => {

diff --git a/components/ResumeLinkTemplate.js → components/ResumeLinkTemplate.tsx b/components/ResumeLinkTemplate.js → components/ResumeLinkTemplate.tsx
@@ -7,7 +7,7 @@ const ResumeLinkTemplate = ({
   achievementData,
   language,
   projectsSource: { startElement, elementField },
-}) => {
+}: any) => {
   const projectFields = projectsData[0];
   const projects = projectsData.slice(1);
   const achievements = achievementData.slice(1);
@@ -51,9 +51,11 @@ const ResumeLinkTemplate = ({
       </Head>
       <div className="resumelinks">
         <div className="switchLang">
-          <Link href={switchLangURL} as={process.env.BACKEND_URL}>
-            {switchLangTitle}
-          </Link>
+          {switchLangURL && (
+            <Link href={switchLangURL} as={process.env.BACKEND_URL}>
+              {switchLangTitle}
+            </Link>
+          )}
         </div>
         <div className="github">
           <span>{githubTitle}</span>
@@ -69,7 +71,7 @@ const ResumeLinkTemplate = ({
         <section>
           <h2>{projectsTitle}</h2>
           <ul>
-            {projects.map((e, idx) => (
+            {projects.map((e: any, idx: any) => (
               <li>
                 <img src={e[4]} alt="" className="projectimg" />
                 <br />
@@ -81,7 +83,7 @@ const ResumeLinkTemplate = ({
                 </span>
                 <br />
                 {/* project fields */}
-                {e.slice(1).map((field, index) =>
+                {e.slice(1).map((field: any, index: any) =>
                   field && index < 3 ? (
                     <div className="projectfield">
                       {/* project field */}
@@ -113,7 +115,7 @@ const ResumeLinkTemplate = ({
         <section>
           <h2>{achievementsTitle}</h2>
           <ul>
-            {achievements.map((e) => (
+            {achievements.map((e: any) => (
               <li>
                 {/* 中文[0] or EN[2] elementField */}
                 <span>{e[elementField]}:</span>

diff --git a/components/VirtualSpace.js → components/VirtualSpace.tsx b/components/VirtualSpace.js → components/VirtualSpace.tsx
diff --git a/components/VirtualSpaceScene.js b/components/VirtualSpaceScene.js