Migrate all files to typescript

README.md

@@ -300,7 +300,7 @@ plugins: [
 ]
 ```
 
-_[service-worker-registration.js](src/utils/service-worker-registration.js)_
+_[service-worker-registration.ts](src/utils/service-worker-registration.ts)_
 
 ```js
 const register = () => {
@@ -997,7 +997,7 @@ It is obvious that nothing can match SWR in terms of performance.
 
 Some users leave the app open for extended periods of time, so another thing we can do is revalidate the app while it is running:
 
-_[service-worker-registration.js](src/utils/service-worker-registration.js)_
+_[service-worker-registration.ts](src/utils/service-worker-registration.ts)_
 
 ```diff
 + const ACTIVE_REVALIDATION_INTERVAL = 1 * 60 * 60

src/App.jsx → src/App.tsx

@@ -1,3 +1,4 @@
+import type { FC } from 'react'
 import { lazy, Suspense } from 'react'
 import { Routes, Route, Navigate } from 'react-router-dom'
 
@@ -19,7 +20,7 @@ const routes = pagesManifest.map(({ path }, ind) => {
   return <Route key={path} path={path} element={<Element />} />
 })
 
-const App = () => {
+const App: FC<{}> = () => {
   return (
     <>
       <Navigation />

src/index.jsx → src/index.tsx

@@ -9,7 +9,7 @@ import 'utils/delay-page-visibility'
 import 'utils/service-worker-registration'
 import App from './App'
 
-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById('root')!).render(
   <BrowserRouter>
     <StyledEngineProvider injectFirst>
       <PrerenderProvider>

src/pages/Comparison.jsx → src/pages/Comparison.tsx

@@ -1,3 +1,4 @@
+import type { FC } from 'react'
 import { Meta } from 'frontend-essentials'
 import { css } from '@emotion/css'
 
@@ -15,7 +16,7 @@ import $ from 'jquery'
 import moment from 'moment'
 $(`#${_.isDate(moment().toDate())}`)
 
-const { title, description } = pagesManifest.find(({ chunk }) => chunk === 'comparison')
+const { title, description } = pagesManifest.find(({ chunk }) => chunk === 'comparison') as any
 
 const listData = {
   csr: {
@@ -421,7 +422,7 @@ const fastNetworkData = [
   { type: 'SSSR (RSC)', initialLoad: 'A', repeatedLoads: 'A+ (full cache), A (partial cache)', navigations: 'A+' }
 ]
 
-const Comparison = () => {
+const Comparison: FC<{}> = () => {
   return (
     <div>
       <Meta title={`${title} | Client-side Rendering`} description={description} />
@@ -433,7 +434,7 @@ const Comparison = () => {
       <main className={style.main}>
         {Object.values(listData).map(({ name, title, pros, cons }) => (
           <div key={name} className={style.section}>
-            <Subtitle className={style.subtitle} title={title} placement="top">
+            <Subtitle className={style.subtitle} title={title}>
               {name}
             </Subtitle>
 

src/pages/Home.jsx → src/pages/Home.tsx

@@ -1,3 +1,4 @@
+import type { FC } from 'react'
 import { css, cx } from '@emotion/css'
 import { Meta } from 'frontend-essentials'
 import { Button, Switch, TextField, Select, MenuItem, Slider, Rating } from '@mui/material'
@@ -6,9 +7,9 @@ import pagesManifest from 'pages-manifest.json'
 import Title from 'components/common/Title'
 import Info from 'components/common/Info'
 
-const { title, description } = pagesManifest.find(({ chunk }) => chunk === 'home')
+const { title, description } = pagesManifest.find(({ chunk }) => chunk === 'home') as any
 
-const Home = () => {
+const Home: FC<{}> = () => {
   return (
     <div>
       <Meta

src/pages/LoremIpsum.jsx → src/pages/LoremIpsum.tsx

@@ -1,3 +1,4 @@
+import type { FC } from 'react'
 import { Meta, useFetch } from 'frontend-essentials'
 import { css } from '@emotion/css'
 
@@ -11,9 +12,9 @@ import $ from 'jquery'
 import moment from 'moment'
 $(`#${_.isDate(moment().toDate())}`)
 
-const { title, description, data } = pagesManifest.find(({ chunk }) => chunk === 'lorem-ipsum')
+const { title, description, data } = pagesManifest.find(({ chunk }) => chunk === 'lorem-ipsum') as any
 
-const LoremIpsum = () => {
+const LoremIpsum: FC<{}> = () => {
   const { data: loremIpsum } = useFetch(data.url, {
     credentials: 'include',
     mode: 'no-cors',

src/pages/Pokemon.jsx → src/pages/Pokemon.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, FC } from 'react'
 import { NavLink } from 'react-router-dom'
 import { Meta, LazyRender, useFetch } from 'frontend-essentials'
 import startCase from 'lodash/startCase'
@@ -17,10 +17,10 @@ import $ from 'jquery'
 import moment from 'moment'
 $(`#${_.isDate(moment().toDate())}`)
 
-const { title, description, data } = pagesManifest.find(({ chunk }) => chunk === 'pokemon')
-const { data: pokemonInfoData } = pagesManifest.find(({ chunk }) => chunk === 'pokemon-info')
+const { title, description, data } = pagesManifest.find(({ chunk }) => chunk === 'pokemon') as any
+const { data: pokemonInfoData } = pagesManifest.find(({ chunk }) => chunk === 'pokemon-info') as any
 
-const Pokemon = () => {
+const Pokemon: FC<{}> = () => {
   const { data: pokemon } = useFetch(data[0].url, {
     uuid: 'pokemon',
     immutable: true
@@ -68,7 +68,7 @@ const Pokemon = () => {
 
 const MainSkeleton = () => {
   return new Array(100)
-    .fill()
+    .fill(undefined)
     .map((_, ind) => (
       <Skeleton className={style.skeleton} key={ind} variant="rectangular" width={200} height={222} animation={false} />
     ))

src/pages/PokemonInfo.jsx → src/pages/PokemonInfo.tsx

@@ -1,3 +1,4 @@
+import type { FC } from 'react'
 import { useParams, useLocation } from 'react-router-dom'
 import { Meta, useFetch } from 'frontend-essentials'
 import startCase from 'lodash/startCase'
@@ -15,9 +16,9 @@ import $ from 'jquery'
 import moment from 'moment'
 $(`#${_.isDate(moment().toDate())}`)
 
-const { description, data } = pagesManifest.find(({ chunk }) => chunk === 'pokemon-info')
+const { description, data } = pagesManifest.find(({ chunk }) => chunk === 'pokemon-info') as any
 
-const PokemonInfo = () => {
+const PokemonInfo: FC<{}> = () => {
   const { name: nameParam } = useParams()
   const { state: selectedPokemon } = useLocation()
 

src/pages/WebVitals.jsx → src/pages/WebVitals.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, FC } from 'react'
 import { Meta } from 'frontend-essentials'
 import { onCLS, onFCP, onFID, onINP, onLCP, onTTFB } from 'web-vitals'
 import { css } from '@emotion/css'
@@ -13,11 +13,18 @@ import $ from 'jquery'
 import moment from 'moment'
 $(`#${_.isDate(moment().toDate())}`)
 
+type Metrics = {
+  [name: string]: {
+    value: number
+    rating: string
+  }
+}
+
 const METRICS_ORDER = ['TTFB', 'FCP', 'LCP', 'CLS', 'FID', 'INP']
-const { title, description } = pagesManifest.find(({ chunk }) => chunk === 'core-web-vitals')
+const { title, description } = pagesManifest.find(({ chunk }) => chunk === 'core-web-vitals') as any
 
-const WebVitals = () => {
-  const [metrics, setMetrics] = useState({})
+const WebVitals: FC<{}> = () => {
+  const [metrics, setMetrics] = useState<Metrics>({})
 
   useEffect(() => {
     onCLS(addMetric)

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es2017",
     "jsx": "react-jsx",
-    "module": "es2015",
+    "module": "esnext",
     "moduleResolution": "node",
     "baseUrl": "src",
     "allowJs": true,
@@ -13,5 +13,6 @@
     "skipLibCheck": true,
     "sourceMap": true
   },
-  "include": ["src"]
+  "include": ["src"],
+  "files": ["src/index.d.ts"]
 }