typescript

VonJie · Feb 18, 2022 · b3e6a1b · b3e6a1b
1 parent 2cc9870
commit b3e6a1b
Show file tree

Hide file tree

Showing 17 changed files with 111 additions and 19 deletions.
diff --git a/components/alert/index.js → components/alert/index.tsx b/components/alert/index.js → components/alert/index.tsx
@@ -1,7 +1,10 @@
 import styles from './index.module.css'
 import cn from 'classnames'
+import React from 'react';
 
-export default function Alert({ children, type }) {
+type AlertType = 'success' | 'error';
+
+export default function Alert({ children, type }: { children: React.ReactNode; type: AlertType; }) {
   return (
     <div
       className={cn({

diff --git a/components/date/index.js → components/date/index.tsx b/components/date/index.js → components/date/index.tsx
@@ -1,6 +1,6 @@
 import { parseISO, format } from 'date-fns'
 
-export default function Date({ dateString }) {
+export default function Date({ dateString }: { dateString: string }) {
   const date = parseISO(dateString)
   return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
 }
diff --git a/components/layout/index.js → components/layout/index.tsx b/components/layout/index.js → components/layout/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import Head from 'next/head'
 import Image from 'next/image'
 import Link from 'next/link'
@@ -6,10 +7,17 @@ import styles from './index.module.css'
 import utilStyles from '../../styles/utils.module.css'
 import { BASE_PATH } from '../../constants'
 
+
 const name = '木灬文'
 export const siteTitle = 'Next.js Sample Website'
 
-export default function Layout({ children, home }) {
+export default function Layout({
+  children,
+  home
+}: {
+  children: React.ReactNode;
+  home?: boolean
+}) {
   return (
     <div className={styles.container}>
       <Head>

diff --git a/lib/posts.js → lib/posts.ts b/lib/posts.js → lib/posts.ts
@@ -10,7 +10,7 @@ const apisDirectory = path.join(process.cwd(), 'pages/api')
 export function getSortedPostsData() {
   // Get file names under /posts
   const fileNames = fs.readdirSync(postsDirectory)
-  const allPostsData = fileNames
+  const allPostsData: any[] = fileNames
     .filter(file => /\.md$/.test(file))
     .map(fileName => {
       // Remove ".md" from file name to get id
@@ -31,13 +31,11 @@ export function getSortedPostsData() {
     })
 
   // Sort posts by date
-  return allPostsData.sort(({ date: a }, { date: b }) => {
-    if (a < b) {
+  return allPostsData.sort((a, b) => {
+    if (a.date < b.date) {
       return 1
-    } else if (a > b) {
-      return -1
     } else {
-      return 0
+      return -1
     }
   })
 }
@@ -58,7 +56,7 @@ export async function getPostData(id) {
   return {
     id,
     contentHtml,
-    ...matterResult.data
+    ...(matterResult.data as { date: string; title: string })
   }
 }
 
@@ -82,7 +80,7 @@ export function getAllApiIds() {
   return fileNames
     .map(fileName => {
       return {
-        id: fileName.replace(/\.js$/, '')
+        id: fileName.replace(/\.tsx?$/, '')
       }
     })
 }
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,5 +18,10 @@
     "remark-html": "^15.0.1",
     "sass": "^1.49.7",
     "tailwindcss": "^3.0.22"
+  },
+  "devDependencies": {
+    "@types/node": "^17.0.18",
+    "@types/react": "^17.0.39",
+    "typescript": "^4.5.5"
   }
 }
diff --git a/pages/404.js → pages/404.tsx b/pages/404.js → pages/404.tsx
diff --git a/pages/500.js → pages/500.tsx b/pages/500.js → pages/500.tsx
diff --git a/pages/_app.js b/pages/_app.js
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -0,0 +1,6 @@
+import { AppProps } from 'next/app'
+import '../styles/global.css'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
diff --git a/pages/about/index.js → pages/about/index.tsx b/pages/about/index.js → pages/about/index.tsx
diff --git a/pages/api/hello.js → pages/api/hello.ts b/pages/api/hello.js → pages/api/hello.ts
diff --git a/pages/index.js → pages/index.tsx b/pages/index.js → pages/index.tsx
@@ -1,8 +1,9 @@
+import { GetStaticProps } from 'next'
 import Head from 'next/head'
 import Link from 'next/link'
 import Alert from '../components/alert'
 import Date from '../components/date'
-import Layout, { siteTitle } from '../components/layout/'
+import Layout, { siteTitle } from '../components/layout'
 import { getAllApiIds, getSortedPostsData } from '../lib/posts'
 import utilStyles from '../styles/utils.module.css'
 
@@ -59,7 +60,7 @@ export default function Home({ allPostsData, apiIds }) {
   )
 }
 
-export async function getStaticProps() { // getServerSideProps
+export const getStaticProps: GetStaticProps = async () => { // getServerSideProps
   const allPostsData = getSortedPostsData();
   const apiIds = getAllApiIds();
   return {

diff --git a/pages/posts/[id].js → pages/posts/[id].tsx b/pages/posts/[id].js → pages/posts/[id].tsx
diff --git a/pages/posts/first-post.js → pages/posts/first-post.tsx b/pages/posts/first-post.js → pages/posts/first-post.tsx
@@ -16,7 +16,7 @@ export default function FirstPost() {
           console.log(`script loaded correctly, window.FB has been populated`)
         }
       />
-      <h1 class='title'>First Post</h1>
+      <h1 className='title'>First Post</h1>
       <style jsx>{`
         .title {
           color: yellow;

diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}