refactor: add types to files

gatsby-theme-oi-wiki/.eslintrc.js

@@ -34,6 +34,8 @@ module.exports = {
   ],
   rules: {
     'object-curly-spacing': ['error', 'always'],
+    'quotes': ['error', 'single', {'allowTemplateLiterals': true}],
+    'semi': ['error', 'never', {'beforeStatementContinuationChars': 'always'}],
     'react/prop-types': [0],
     'comma-dangle': [2, 'always-multiline'],
     'no-unused-vars': 'off',

gatsby-theme-oi-wiki/package.json

@@ -59,7 +59,10 @@
     "use-persisted-state": "^0.3.0"
   },
   "devDependencies": {
+    "@types/autosuggest-highlight": "^3.1.1",
+    "@types/mark.js": "^8.11.6",
     "@types/react-helmet": "^6.1.1",
+    "@types/use-persisted-state": "^0.3.0",
     "@typescript-eslint/eslint-plugin": "^4.28.3",
     "@typescript-eslint/parser": "^4.28.3",
     "eslint": "^7.29.0",
@@ -70,6 +73,7 @@
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.1.2",
     "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.24",
+    "schema-dts": "^0.9.0",
     "ts-graphql-plugin": "^2.1.3",
     "typescript": "^4.3.5"
   },

gatsby-theme-oi-wiki/src/components/AuthorsArray.tsx

@@ -8,25 +8,28 @@ const useStyles = makeStyles((theme) => ({
   },
 }))
 
-const AuthorsArray: React.FC<{authors: string }> = ({ authors }) => {
-  const arr = authors && authors.split(',').map((x) => x.trim())
+export interface AuthorsArrayProps {
+  authors: string;
+}
+
+const AuthorsArray: React.FC<AuthorsArrayProps> = ({ authors }) => {
+  const arr = authors?.split(',').map((x) => x.trim())
   const classes = useStyles()
   return (
     <div>
-      {arr &&
-        arr.map((author) => (
-          <Chip
-            label={` @${author} `}
-            key={author}
-            clickable
-            className={classes.chip}
-            component="a"
-            variant="outlined"
-            href={'https://github.com/' + author.trim()}
-            target="_blank"
-            rel="noopener noreferrer nofollow"
-          />
-        ))}
+      {arr?.map((author) => (
+        <Chip
+          label={` @${author} `}
+          key={author}
+          clickable
+          className={classes.chip}
+          component="a"
+          variant="outlined"
+          href={'https://github.com/' + author.trim()}
+          target="_blank"
+          rel="noopener noreferrer nofollow"
+        />
+      ))}
     </div>
   )
 }

gatsby-theme-oi-wiki/src/components/BackTop.tsx

@@ -30,8 +30,8 @@ const BackTop: React.FC = () => {
   const handleClick: OnClickHandler<HTMLButtonElement> = () => {
     smoothScrollTo(0)
   }
-  const [yPos, setyPos] = useState(0)
-  useThrottledOnScroll(() => setyPos(window.scrollY), 166)
+  const [yPos, setYPos] = useState(0)
+  useThrottledOnScroll(() => setYPos(window.scrollY), 166)
   return (
     <Zoom in={yPos > 400}>
       <Fab disableRipple className={classes.fab} onClick={handleClick}>

gatsby-theme-oi-wiki/src/components/Comment/Card/ReactionButton.tsx

@@ -52,7 +52,7 @@ const ReactionButton: React.FC<ReactionButtonProps> = (props) => {
     }
     setIsClicked(!isClicked)
   }
-  const SvgTag = props.icon;
+  const SvgTag = props.icon
   return (
     <Button
       color="default"

gatsby-theme-oi-wiki/src/components/Details.tsx

@@ -2,20 +2,12 @@ import { Accordion, AccordionDetails } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 import React from 'react'
 
-type Props = {
-  className: string;
-  children: string[] | string;
-  [props: string]: any;
-}
-
 const getDetailsClasses = makeStyles((theme) => ({
   root: {
     '&, &:first-child, &:last-child': {
       margin: '1.2em 0 !important',
     },
     borderLeft: '.3rem solid',
-    // eslint-disable-next-line
-    // @ts-ignore
     borderLeftColor: theme.palette.details.border,
     boxShadow: theme.shadows[1],
   },
@@ -34,12 +26,16 @@ const useStyles = makeStyles(theme => ({
   },
 }))
 
-const Details: React.FC<Props> = (props: Props) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { className = '', children, ...rest } = props
+export interface DetailsProps {
+  className: string;
+  children: string[] | string;
+}
+
+const Details: React.FC<DetailsProps> = (props) => {
+  const { className = '', children } = props
   const detailsClasses = getDetailsClasses()
   const classes = useStyles()
-  const cont = children instanceof Array ? children : [children]
+  const cont = Array.isArray(children) ? children : [children]
   return (
     <Accordion
       variant="outlined"

gatsby-theme-oi-wiki/src/components/EditWarn.tsx

@@ -17,42 +17,37 @@ const EditWarning = (): JSX.Element => {
   )
 }
 
-interface Props {
+export interface EditWarnProps {
   relativePath: string;
   dialogOpen: boolean;
   setDialogOpen: (props: boolean) => any;
   location: Location;
 }
 
-const EditWarn: React.FC<Props> = (props: Props) => {
+const EditWarn: React.FC<EditWarnProps> = (props) => {
   const { relativePath, dialogOpen, setDialogOpen } = props
   const editURL = 'https://github.com/OI-wiki/OI-wiki/edit/master/docs/'
+  const onClose = (): void => {
+    setDialogOpen(false)
+  }
 
   return (
     <Dialog
       open={dialogOpen}
-      onClose={() => {
-        setDialogOpen(false)
-      }}
+      onClose={onClose}
     >
       <DialogTitle>编辑前须知</DialogTitle>
       <DialogContent><EditWarning/></DialogContent>
       <DialogActions>
-        <Button
-          onClick={() => {
-            setDialogOpen(false)
-          }}
-        >
+        <Button onClick={onClose}>
           取消
         </Button>
         <Button
           component="a"
           href={editURL + relativePath}
           target="_blank"
           rel="noopener noreferrer nofollow"
-          onClick={() => {
-            setDialogOpen(false)
-          }}
+          onClick={onClose}
         >
           开始编辑
         </Button>

gatsby-theme-oi-wiki/src/components/Link/LinkTooltip.tsx

@@ -1,58 +1,58 @@
 import React, { useState } from 'react'
 import ToolCard from './ToolCard'
 import { useDidUpdateEffect } from './hooks'
+import { Nullable } from '../../types/common'
 
 export interface PreviewData {
   text: string,
   title: string,
 }
 
-async function getExcerpt (url) : Promise<PreviewData> {
-  console.log('fetching', url)
-  const res = await fetch(url).then(res => res.json())
-  return res
-}
-
-type Props = {
-  url: string, // api url
-  children: any,
-  to: string, // link
+export interface LinkTooltipProps {
+  /** api url */
+  url: string,
+  /** link */
+  to: string,
 }
 
 export type FetchStatus = 'error' | 'fetching' | 'fetched' | 'not_fetched'
 
-const LinkTooltip : React.FC<Props> = function (props: Props) {
+async function getExcerpt(url: string): Promise<PreviewData> {
+  return await fetch(url).then(res => res.json())
+}
+
+const LinkTooltip: React.FC<LinkTooltipProps> = (props) => {
   const { url, children } = props
-  const [content, setContent] = useState<PreviewData>(null)
+  const [content, setContent] = useState<Nullable<PreviewData>>(null)
   const [status, setStatus] = useState<FetchStatus>('not_fetched')
   const [open, setOpen] = useState<boolean>()
+
   useDidUpdateEffect(() => {
     if (status === 'not_fetched') {
-      setStatus('fetching') // 防止重复获取
+      // 防止重复获取
+      setStatus('fetching')
       getExcerpt(url).then(data => {
         setContent(data)
         setStatus('fetched')
       }).catch(e => {
         console.error(e)
-        setStatus('error') // 获取失败
+        setStatus('error')
       })
     }
   }, [open])
 
-  return (
-    <ToolCard
-      onHover={() => {
-        setOpen(true)
-      }}
-      content={content}
-      to={props.to}
-      status={status}
-      closeDelay={200}
-      openDelay={500}
-    >
-      {children}
-    </ToolCard>
-  )
+  return <ToolCard
+    onHover={() => {
+      setOpen(true)
+    }}
+    content={content}
+    to={props.to}
+    status={status}
+    closeDelay={200}
+    openDelay={500}
+  >
+    {children}
+  </ToolCard>
 }
 
 export default LinkTooltip