Refactor: typescript

Author: impeiran

src/components/image/index.tsx

@@ -1,8 +1,20 @@
 import React, { useState } from 'react'
 import ImageWrapper from './style'
-import PropTypes from 'prop-types'
 
-const Image = props => {
+const defaultProps = {
+  alt: '',
+  width: 50,
+  height: 50,
+  radius: 8,
+  onClick: (e: React.MouseEvent) => {}
+}
+
+export interface ImageProps extends Partial<typeof defaultProps>{
+  src: string;
+  style?: React.CSSProperties
+}
+
+const Image: React.FC<ImageProps> = (props: ImageProps) => {
   const { src, alt, width, height, radius, style = {}, onClick } = props
 
   const [status, setStatus] = useState('loading')
@@ -26,22 +38,6 @@ const Image = props => {
   )
 }
 
-Image.defaultProps = {
-  alt: '',
-  width: 50,
-  height: 50,
-  radius: 8,
-  onClick: () => {}
-}
-
-Image.propTypes = {
-  src: PropTypes.string.isRequired,
-  width: PropTypes.number,
-  height: PropTypes.number,
-  radius: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string
-  ])
-}
+Image.defaultProps = defaultProps
 
 export default React.memo(Image)

src/components/image/style.ts

@@ -1,6 +1,12 @@
 import styled from 'styled-components'
 
-const ImageWrapper = styled.div`
+interface WrapperProps {
+  width?: number;
+  height?: number;
+  radius?: string | number;
+}
+
+const ImageWrapper = styled.div<WrapperProps>`
   position: relative;
   width: ${props => props.width}px;
   height: ${props => props.height}px;

src/components/loading/index.tsx

@@ -1,17 +1,21 @@
 import React from 'react'
 import styled, { keyframes } from 'styled-components'
 
-const rotate = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
+interface LoadingProps {
+  size?: number;
+  text: string;
+}
 
-  to {
-    transform: rotate(360deg);
-  }
+interface WrapperProps {
+  size: number
+}
+
+const rotate = keyframes`
+  from { transform: rotate(0deg);}
+  to { transform: rotate(360deg);}
 `;
 
-const LoadingWrapper = styled.div`
+const LoadingWrapper = styled.div<WrapperProps>`
   margin: 10px auto;
   width: ${props => props.size}px;
   height: ${props => props.size}px;
@@ -26,7 +30,7 @@ const TextWrapper = styled.div`
   text-align: center;
 `
 
-const Loading = props => {
+const Loading: React.FC<LoadingProps> = (props: LoadingProps) => {
   return (
     <>
       <LoadingWrapper size={props.size || 30} />

src/components/scroll-list/index.tsx

@@ -6,13 +6,20 @@ import styled from 'styled-components'
 // polyfill
 import 'intersection-observer'
 
+export interface Iprops {
+  loading: boolean;
+  completed: boolean;
+  children: React.ReactNode;
+  onLoad: () => void;
+}
+
 const TipWord = styled.div`
   margin: 10px auto;
   color: #333;
   text-align: center;
 `
 
-const ScrollList = props => {
+const ScrollList: React.FC<Iprops> = (props: Iprops) => {
   const { completed, onLoad, loading } = props
 
   const hanlder = useCallback(entries => {
@@ -22,14 +29,14 @@ const ScrollList = props => {
     }
   }, [completed, onLoad])
 
-  const observer = useRef(new IntersectionObserver(hanlder))
-  const bottomEl = useRef()
+  const observer: React.RefObject<IntersectionObserver> = useRef(new IntersectionObserver(hanlder))
+  const bottomEl: any = useRef<HTMLDivElement>()
 
-  useEffect(() => {    
-    observer.current.observe(bottomEl.current)
+  useEffect(() => {
+    observer.current && observer.current.observe(bottomEl.current)
 
     return () => {
-      observer.current.unobserve(bottomEl.current)
+      observer.current && observer.current.unobserve(bottomEl.current)
     }
   }, [])
 

src/components/tabbar/index.tsx

@@ -2,7 +2,16 @@ import React from 'react'
 import { NavLink } from 'react-router-dom'
 import TabbarWrapper, { TabbarItem } from './style'
 
-const Tabbar = props => {
+export interface Tabber {
+  name: string;
+  route: string;
+}
+
+interface Iprops {
+  value: Array<Tabber>;
+}
+
+const Tabbar: React.FC<Iprops> = (props: Iprops) => {
   return (
     <TabbarWrapper>
       {
@@ -18,8 +27,4 @@ const Tabbar = props => {
   )
 }
 
-Tabbar.defaultProps = {
-  value: []
-}
-
 export default React.memo(Tabbar)

src/components/tag/index.tsx

@@ -10,7 +10,20 @@ import {
   COLOR_GREY_INFO
 } from 'style/constants'
 
-const DICT = {
+interface Iprops {
+  type: string
+}
+
+interface cate {
+  text: string;
+  color: string;
+}
+
+interface TagDict {
+  [index: string]: cate;
+}
+
+const DICT: TagDict = {
   top: { text: '置顶', color: COLOR_RED },
   good: { text: '精华', color: COLOR_ORANGE_DEEP },
   share: { text: '分享', color: COLOR_GREEN_TEAL },
@@ -19,7 +32,7 @@ const DICT = {
   default: { text: '话题', color: COLOR_GREY_INFO },
 }
 
-const TagUI = styled.label`
+const TagUI = styled.label<{ color: string }>`
   display: inline-block;
   padding: 7px 10px;
   color: #fff;
@@ -29,7 +42,7 @@ const TagUI = styled.label`
   border-radius: 4px;
 `
 
-const Tag = props => {
+const Tag: React.FC<Iprops> = (props: Iprops) => {
   const type = props.type || 'default'
   return <TagUI color={ DICT[type].color }>{ DICT[type].text }</TagUI>
 }

src/hooks/useAsync.ts

@@ -4,24 +4,45 @@ import { useEffect, useState, useCallback, useRef } from 'react'
 const noop = () => {}
 const defaultOption = {
   mannual: false,
-  onSuccess: noop,
-  onError: noop
+  onSuccess: noop as SuccessHandler,
+  onError: noop as ErrorHandler
+}
+
+export interface SuccessHandler {
+  <T>(res: any):T;
+}
+
+export interface ErrorHandler {
+  (err: any): void;
+}
+
+export interface Option extends Partial<typeof defaultOption>{
+  onSuccess: SuccessHandler;
+  onError: ErrorHandler;
+}
+
+export interface AsyncResult<T> {
+  loading: boolean;
+  run: () => void;
+  result: T | undefined;
 }
 
 /**
  * @param {Function} action should return a Promise
- * @param {Object} option
- * @param {Array} deps dependecies
+ * @param {Object} customOption
  */
-const useAysnc = (action = noop, option = {}, deps = []) => {
-  option = Object.assign({}, defaultOption, option)
+const useAsync = <T>(
+  action: () => Promise<any>, 
+  customOption: object = {}
+): AsyncResult<T> => {
+  let option: Option = Object.assign({}, defaultOption, customOption)
 
-  const result = useRef({})
+  const result = useRef<T>()
   const [loading, setLoading] = useState(false)
 
   const run = useCallback(() => {
     setLoading(true)
-    const ret = action()
+    const ret: Promise<any> = action()
     if (ret.then) {
       ret.then(res => {
         result.current = option.onSuccess(res) || res
@@ -40,8 +61,8 @@ const useAysnc = (action = noop, option = {}, deps = []) => {
   return {
     loading,
     run,
-    result: result.current || {},
+    result: result.current,
   }
 }
 
-export default useAysnc
+export default useAsync

src/hooks/useInitPosition.ts renamed to src/hooks/useInitPosition.js

@@ -2,19 +2,31 @@
 import { useEffect, useRef, useCallback } from 'react'
 import useAsync from './useAsync'
 
-const noop = () => {}
-
 const defaultOption = {
   initPage: 1,
   initPageSize: 10
 }
 
+interface Option extends Partial<typeof defaultOption> {
+  formatResult?<T>(result: any): { list: Array<T> };
+  isNoMore?(result: any): boolean;
+}
+
+interface ActionOption {
+  page: number;
+  pageSize: number;
+}
+
 /**
  * @param {Function} action should return a Promise
  * @param {Object} option
  * @param {Array} deps dependecies
  */
-export default (action = noop, option, deps = []) => {
+export default (
+  action: (res: any) => Promise<any>, 
+  option: Option = defaultOption, 
+  deps: React.DependencyList = []
+) => {
 
   option = Object.assign({}, defaultOption, option || {})
 
@@ -30,7 +42,7 @@ export default (action = noop, option, deps = []) => {
 
   const { loading, run } = useAsync(actionHandler, {
     mannual: true,
-    onSuccess: res => {
+    onSuccess: (res: { list?: any }) => {
       const prevList = infoRef.current.list
       const currentPage = infoRef.current.page
 

src/hooks/useLoadMore.ts

@@ -2,15 +2,15 @@ import React from 'react'
 import { Switch, Route, Redirect } from 'react-router-dom'
 
 import Header from 'components/header'
-import Tabbar from 'components/tabbar'
+import Tabbar, { Tabber } from 'components/tabbar'
 import Topic from 'view/topic'
 import Article from 'view/article'
 import User from 'view/user'
 import About from 'view/about'
 import NotFound from 'view/not-found'
 import Layout, { Fixed, Main } from './style'
 
-const navList = [
+const navList: Tabber[] = [
   { name: '全部', route: '/topic/all' },
   { name: '精华', route: '/topic/good' },
   { name: '分享', route: '/topic/share' },