From f340ef69215a942a289ae2dd59e7477e9da25ede Mon Sep 17 00:00:00 2001 From: barrystone Date: Wed, 24 Jul 2024 00:14:13 +0800 Subject: [PATCH] [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' --- .../{AboutSection.js => AboutSection.tsx} | 34 +- .../{NoteSection.js => NoteSection.tsx} | 11 +- .../{RepoSection.js => RepoSection.tsx} | 4 +- ...LinkTemplate.js => ResumeLinkTemplate.tsx} | 16 +- .../{VirtualSpace.js => VirtualSpace.tsx} | 0 components/VirtualSpaceScene.js | 192 - components/VirtualSpaceScene.tsx | 239 + components/layout/{Footer.js => Footer.tsx} | 0 components/layout/{Header.js => Header.tsx} | 0 .../layout/{Navigation.js => Navigation.tsx} | 8 +- .../{Itemscircle.js => Itemscircle.tsx} | 20 +- .../{ProjectContent.js => ProjectContent.tsx} | 2 +- .../updating/{Skillset.js => Skillset.tsx} | 4 +- devTools/{logrocket.js => logrocket.ts} | 0 env-config.js | 2 +- next-env.d.ts | 5 + next.config.js | 8 +- package-lock.json | 14326 +++++++++++----- package.json | 9 +- pages/{about.js => about.tsx} | 0 pages/api/{hello.js => hello.ts} | 2 +- pages/api/{notes.js => notes.ts} | 2 +- pages/api/testapi/{[id].js => [id].ts} | 2 +- pages/{index.js => index.tsx} | 18 +- pages/{resumeLinks.js => resumeLinks.tsx} | 5 +- .../{resumeLinks_EN.js => resumeLinks_EN.tsx} | 5 +- pages/{space.js => space.tsx} | 0 tsconfig.json | 117 + utils/{analyzeReadme.js => analyzeReadme.ts} | 6 +- utils/{languageImg.js => languageImg.ts} | 2 +- 30 files changed, 10594 insertions(+), 4445 deletions(-) rename components/{AboutSection.js => AboutSection.tsx} (77%) rename components/{NoteSection.js => NoteSection.tsx} (89%) rename components/{RepoSection.js => RepoSection.tsx} (97%) rename components/{ResumeLinkTemplate.js => ResumeLinkTemplate.tsx} (92%) rename components/{VirtualSpace.js => VirtualSpace.tsx} (100%) delete mode 100644 components/VirtualSpaceScene.js create mode 100644 components/VirtualSpaceScene.tsx rename components/layout/{Footer.js => Footer.tsx} (100%) rename components/layout/{Header.js => Header.tsx} (100%) rename components/layout/{Navigation.js => Navigation.tsx} (85%) rename components/updating/{Itemscircle.js => Itemscircle.tsx} (89%) rename components/updating/{ProjectContent.js => ProjectContent.tsx} (93%) rename components/updating/{Skillset.js => Skillset.tsx} (98%) rename devTools/{logrocket.js => logrocket.ts} (100%) create mode 100644 next-env.d.ts rename pages/{about.js => about.tsx} (100%) rename pages/api/{hello.js => hello.ts} (76%) rename pages/api/{notes.js => notes.ts} (87%) rename pages/api/testapi/{[id].js => [id].ts} (53%) rename pages/{index.js => index.tsx} (63%) rename pages/{resumeLinks.js => resumeLinks.tsx} (95%) rename pages/{resumeLinks_EN.js => resumeLinks_EN.tsx} (95%) rename pages/{space.js => space.tsx} (100%) create mode 100644 tsconfig.json rename utils/{analyzeReadme.js => analyzeReadme.ts} (89%) rename utils/{languageImg.js => languageImg.ts} (93%) diff --git a/components/AboutSection.js b/components/AboutSection.tsx similarity index 77% rename from components/AboutSection.js rename to components/AboutSection.tsx index dc7b1ab..d7718c6 100644 --- a/components/AboutSection.js +++ b/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 b/components/NoteSection.tsx similarity index 89% rename from components/NoteSection.js rename to components/NoteSection.tsx index 72bc276..02facae 100644 --- a/components/NoteSection.js +++ b/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 = () => {

{e}