From 512b66a8401a9f8523db3456736c54b354cb0051 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Fri, 2 Apr 2021 14:34:05 +0800
Subject: [PATCH 1/2] chore(js-ts): comments wip

---
 .../{CommentsList.js => CommentsList.tsx}     | 34 ++++++-
 .../{EditorFooter.js => EditorFooter.tsx}     | 20 +++-
 .../{EditorHeader.js => EditorHeader.tsx}     | 11 ++-
 .../{LockedMessage.js => LockedMessage.tsx}   |  2 +-
 .../unit/Comments/{index.js => index.tsx}     | 30 +++---
 .../unit/Comments/{logic.js => logic.ts}      | 96 ++++++++++---------
 src/containers/unit/Comments/store.ts         |  2 +-
 src/spec/article.ts                           | 16 ++++
 src/spec/index.ts                             |  8 +-
 utils/bstore.ts                               |  4 +-
 10 files changed, 149 insertions(+), 74 deletions(-)
 rename src/containers/unit/Comments/{CommentsList.js => CommentsList.tsx} (74%)
 rename src/containers/unit/Comments/{EditorFooter.js => EditorFooter.tsx} (80%)
 rename src/containers/unit/Comments/{EditorHeader.js => EditorHeader.tsx} (87%)
 rename src/containers/unit/Comments/{LockedMessage.js => LockedMessage.tsx} (88%)
 rename src/containers/unit/Comments/{index.js => index.tsx} (83%)
 rename src/containers/unit/Comments/{logic.js => logic.ts} (78%)

diff --git a/src/containers/unit/Comments/CommentsList.js b/src/containers/unit/Comments/CommentsList.tsx
similarity index 74%
rename from src/containers/unit/Comments/CommentsList.js
rename to src/containers/unit/Comments/CommentsList.tsx
index 5fc5c07b9..e5aff3c92 100755
--- a/src/containers/unit/Comments/CommentsList.js
+++ b/src/containers/unit/Comments/CommentsList.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import type { TAccount, TComment, TPagedComments, TUser } from '@/spec'
 import Pagi from '@/components/Pagi'
 import { CommentLoading } from '@/components/LoadingEffects'
 import CommentsFilter from './CommentsFilter'
@@ -16,7 +17,17 @@ import {
   CommentBlock,
 } from './styles/comments_list'
 
-const Lists = ({ entries, tobeDeleteId, accountInfo }) => (
+type TListsProps = {
+  entries: TComment[]
+  tobeDeleteId: string
+  accountInfo: TAccount
+}
+
+const Lists: React.FC<TListsProps> = ({
+  entries,
+  tobeDeleteId,
+  accountInfo,
+}) => (
   <>
     {entries.map((c) => (
       <Comment
@@ -29,7 +40,11 @@ const Lists = ({ entries, tobeDeleteId, accountInfo }) => (
   </>
 )
 
-const TotalCountText = ({ count }) => (
+type TTotalCountTextProps = {
+  count: number
+}
+
+const TotalCountText: React.FC<TTotalCountTextProps> = ({ count }) => (
   <TotalCountWrapper>
     {count > 0 && (
       <ListTitle id="lists-info">
@@ -39,7 +54,18 @@ const TotalCountText = ({ count }) => (
   </TotalCountWrapper>
 )
 
-const CommentsList = ({
+type TProps = {
+  accountInfo: TUser
+  pagedComments: TPagedComments
+  restProps: {
+    loading: boolean
+    loadingFresh: boolean
+    tobeDeleteId: string
+    filterType: string
+  }
+}
+
+const CommentsList: React.FC<TProps> = ({
   accountInfo,
   pagedComments: { entries, totalCount, pageSize, pageNumber },
   restProps: { loading, loadingFresh, tobeDeleteId, filterType },
@@ -63,8 +89,6 @@ const CommentsList = ({
         <Lists
           entries={entries}
           accountInfo={accountInfo}
-          pageSize={pageSize}
-          pageNumber={pageNumber}
           tobeDeleteId={tobeDeleteId}
         />
       )}
diff --git a/src/containers/unit/Comments/EditorFooter.js b/src/containers/unit/Comments/EditorFooter.tsx
similarity index 80%
rename from src/containers/unit/Comments/EditorFooter.js
rename to src/containers/unit/Comments/EditorFooter.tsx
index 73827455b..9bc390fd1 100755
--- a/src/containers/unit/Comments/EditorFooter.js
+++ b/src/containers/unit/Comments/EditorFooter.tsx
@@ -16,9 +16,19 @@ import {
   FoldText,
 } from './styles/editor_footer'
 
-import * as logic from './logic'
+import { insertCode, insertQuote, onUploadImageDone } from './logic'
 
-const EditorFooter = ({
+type TProps = {
+  loading: boolean
+  showPreview: boolean
+  onCreate: () => void
+  onBackEdit: () => void
+  onPreview: () => void
+  onFold: () => void
+  showFold: boolean
+}
+
+const EditorFooter: React.FC<TProps> = ({
   loading,
   showPreview,
   onCreate,
@@ -32,13 +42,13 @@ const EditorFooter = ({
       <InputHelper />
     ) : (
       <InputHelper>
-        <div onClick={logic.insertCode}>
+        <div onClick={insertCode}>
           <HelperIcon src={`${ICON_CMD}/extra_code.svg`} />
         </div>
-        <div onClick={logic.insertQuote}>
+        <div onClick={insertQuote}>
           <HelperIcon src={`${ICON_CMD}/extra_quote.svg`} />
         </div>
-        <DocUploader onUploadDone={logic.onUploadImageDone}>
+        <DocUploader onUploadDone={onUploadImageDone}>
           <HelperIcon src={`${ICON_CMD}/extra_image.svg`} />
         </DocUploader>
       </InputHelper>
diff --git a/src/containers/unit/Comments/EditorHeader.js b/src/containers/unit/Comments/EditorHeader.tsx
similarity index 87%
rename from src/containers/unit/Comments/EditorHeader.js
rename to src/containers/unit/Comments/EditorHeader.tsx
index 03ce6b245..43a145f55 100755
--- a/src/containers/unit/Comments/EditorHeader.js
+++ b/src/containers/unit/Comments/EditorHeader.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import type { TAccount, TUser } from '@/spec'
 import { ICON, ICON_CMD } from '@/config'
 
 import AvatarsRow from '@/components/AvatarsRow'
@@ -20,7 +21,15 @@ import {
 import { openInputBox } from './logic'
 // import { Wrapper } from './styles'
 
-const EditorHeader = ({
+type TProps = {
+  accountInfo: TAccount
+  showInputEditor: boolean
+  showInputPreview: boolean
+  countCurrent: number
+  referUsers: TUser[]
+}
+
+const EditorHeader: React.FC<TProps> = ({
   accountInfo,
   showInputEditor,
   showInputPreview,
diff --git a/src/containers/unit/Comments/LockedMessage.js b/src/containers/unit/Comments/LockedMessage.tsx
similarity index 88%
rename from src/containers/unit/Comments/LockedMessage.js
rename to src/containers/unit/Comments/LockedMessage.tsx
index 1dce11e5d..548c1693b 100755
--- a/src/containers/unit/Comments/LockedMessage.js
+++ b/src/containers/unit/Comments/LockedMessage.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { ICON_CMD } from '@/config'
 import { Wrapper, LockIcon, Message } from './styles/locked_message'
 
-const LockedMessage = () => (
+const LockedMessage: React.FC = () => (
   <Wrapper>
     <LockIcon src={`${ICON_CMD}/article_lock.svg`} />
     <Message>讨论已关闭, 不再接受新回复</Message>
diff --git a/src/containers/unit/Comments/index.js b/src/containers/unit/Comments/index.tsx
similarity index 83%
rename from src/containers/unit/Comments/index.js
rename to src/containers/unit/Comments/index.tsx
index 2937bc521..21f08e144 100755
--- a/src/containers/unit/Comments/index.js
+++ b/src/containers/unit/Comments/index.tsx
@@ -15,13 +15,26 @@ import CommentsList from './CommentsList'
 import CommentReplyEditor from './CommentReplyEditor'
 import LockedMessage from './LockedMessage'
 
+import type { TStore } from './store'
 import { Wrapper } from './styles'
 import { useInit, createComment, onReplyEditorClose } from './logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:Comments')
 
-const CommentsContainer = ({ comments: store, ssr, locked, onCreate }) => {
+type TProps = {
+  comments: TStore
+  ssr?: boolean
+  locked?: boolean
+  onCreate?: () => void
+}
+
+const CommentsContainer: React.FC<TProps> = ({
+  comments: store,
+  ssr = false,
+  locked = false,
+  onCreate = log,
+}) => {
   useInit(store, ssr, locked)
 
   const {
@@ -72,17 +85,4 @@ const CommentsContainer = ({ comments: store, ssr, locked, onCreate }) => {
   )
 }
 
-CommentsContainer.propTypes = {
-  onCreate: T.func,
-  ssr: T.bool,
-  comments: T.any.isRequired,
-  locked: T.bool,
-}
-
-CommentsContainer.defaultProps = {
-  onCreate: log,
-  ssr: false,
-  locked: false,
-}
-
-export default pluggedIn(CommentsContainer)
+export default pluggedIn(CommentsContainer) as React.FC<TProps>
diff --git a/src/containers/unit/Comments/logic.js b/src/containers/unit/Comments/logic.ts
similarity index 78%
rename from src/containers/unit/Comments/logic.js
rename to src/containers/unit/Comments/logic.ts
index 90453acf5..7e2481da8 100755
--- a/src/containers/unit/Comments/logic.js
+++ b/src/containers/unit/Comments/logic.ts
@@ -1,8 +1,10 @@
 import { useEffect } from 'react'
 import { curry, isEmpty, mergeDeepRight } from 'ramda'
 
+import type { TUser } from '@/spec'
 import { PAGE_SIZE } from '@/config'
 import { TYPE, EVENT, ERR } from '@/constant'
+
 import {
   asyncSuit,
   buildLog,
@@ -14,6 +16,7 @@ import {
   BStore,
 } from '@/utils'
 
+import type { TStore } from './store'
 import S from './schema'
 
 /* eslint-disable-next-line */
@@ -23,8 +26,8 @@ const { SR71, $solver, asyncRes, asyncErr } = asyncSuit
 const sr71$ = new SR71()
 
 let sub$ = null
-let store = null
 let saveDraftTimmer = null
+let store: TStore | undefined
 
 /* DESC_INSERTED, ASC_INSERTED */
 const defaultArgs = {
@@ -32,9 +35,9 @@ const defaultArgs = {
   filter: { page: 1, size: PAGE_SIZE.D, sort: TYPE.ASC_INSERTED },
 }
 
-export const loadComents = (args = {}) => {
+export const loadComents = (args): void => {
   // log('loadComents passed in: ', args)
-  if (store.loading || store.loadingFresh) return false
+  if (store.loading || store.loadingFresh) return
   args = mergeDeepRight(defaultArgs, args)
   args.id = store.viewingData.id
   args.userHasLogin = store.isLogin
@@ -47,7 +50,7 @@ export const loadComents = (args = {}) => {
   sr71$.query(S.pagedComments, args)
 }
 
-const markLoading = (fresh) => {
+const markLoading = (fresh): void => {
   if (fresh) {
     return store.mark({ loadingFresh: true })
   }
@@ -72,23 +75,23 @@ export const createComment = curry((cb, e) => {
   cb()
 })
 
-export const createCommentPreview = () =>
+export const createCommentPreview = (): void =>
   store.mark({
     showInputEditor: false,
     showInputPreview: true,
   })
 
-export const backToEditor = () =>
+export const backToEditor = (): void =>
   store.mark({
     showInputEditor: true,
     showInputPreview: false,
   })
 
-export const previewReply = (data) => {
+export const previewReply = (data): void => {
   log('previewReply --> : ', data)
 }
 
-export const openInputBox = () => {
+export const openInputBox = (): void => {
   if (!store.isLogin) return store.authWarning({ hideToast: true })
 
   initDraftTimmer()
@@ -98,7 +101,7 @@ export const openInputBox = () => {
   })
 }
 
-export const openCommentEditor = () => {
+export const openCommentEditor = (): void => {
   initDraftTimmer()
 
   store.mark({
@@ -106,15 +109,15 @@ export const openCommentEditor = () => {
   })
 }
 
-export const onCommentInputBlur = () =>
+export const onCommentInputBlur = (): void =>
   store.mark({
     showInputBox: false,
     showInputPreview: false,
     showInputEditor: false,
   })
 
-export const createReplyComment = () => {
-  if (!store.validator('reply')) return false
+export const createReplyComment = (): void => {
+  if (!store.validator('reply')) return
 
   if (store.isEdit) {
     return sr71$.mutate(S.updateComment, {
@@ -124,7 +127,7 @@ export const createReplyComment = () => {
     })
   }
 
-  if (store.replying) return false
+  if (store.replying) return
 
   store.mark({ replying: true })
   return sr71$.mutate(S.replyComment, {
@@ -136,21 +139,21 @@ export const createReplyComment = () => {
   })
 }
 
-export const onCommentInputChange = (editContent) =>
+export const onCommentInputChange = (editContent): void =>
   store.mark({
     countCurrent: countWords(editContent),
     extractMentions: extractMentions(editContent),
     editContent,
   })
 
-export const onReplyInputChange = (replyContent) =>
+export const onReplyInputChange = (replyContent): void =>
   store.mark({
     countCurrent: countWords(replyContent),
     extractMentions: extractMentions(replyContent),
     replyContent,
   })
 
-export const openUpdateEditor = (data) =>
+export const openUpdateEditor = (data): void =>
   store.mark({
     isEdit: true,
     showReplyBox: true,
@@ -160,8 +163,8 @@ export const openUpdateEditor = (data) =>
     replyContent: data.body,
   })
 
-export const openReplyEditor = (data) => {
-  if (!store.isLogin) return store.authWarning()
+export const openReplyEditor = (data): void => {
+  if (!store.isLogin) return store.authWarning({})
 
   initDraftTimmer()
   store.mark({
@@ -174,19 +177,19 @@ export const openReplyEditor = (data) => {
   })
 }
 
-export const replyCommentPreview = () =>
+export const replyCommentPreview = (): void =>
   store.mark({
     showReplyEditor: false,
     showReplyPreview: true,
   })
 
-export const replyBackToEditor = () =>
+export const replyBackToEditor = (): void =>
   store.mark({
     showReplyEditor: true,
     showReplyPreview: false,
   })
 
-export const closeReplyBox = () => {
+export const closeReplyBox = (): void => {
   store.mark({
     showReplyBox: false,
     showReplyEditor: false,
@@ -194,7 +197,7 @@ export const closeReplyBox = () => {
   })
 }
 
-export const onFilterChange = (filterType) => {
+export const onFilterChange = (filterType): void => {
   store.mark({ filterType })
   loadComents({ filter: { page: 1, sort: filterType } })
 }
@@ -206,8 +209,8 @@ export const onFilterChange = (filterType) => {
  * @param {comment.id} string
  * @returns
  */
-export const toggleLikeComment = (comment) => {
-  if (!store.isLogin) return store.authWarning()
+export const toggleLikeComment = (comment): void => {
+  if (!store.isLogin) return store.authWarning({})
   log('likeComment: ', comment)
 
   if (comment.viewerHasLiked) {
@@ -220,21 +223,21 @@ export const toggleLikeComment = (comment) => {
   })
 }
 
-export const onUploadImageDone = (url) =>
+export const onUploadImageDone = (url: string): void =>
   send(EVENT.DRAFT_INSERT_SNIPPET, { data: `![](${url})` })
 
-export const insertQuote = () =>
+export const insertQuote = (): void =>
   send(EVENT.DRAFT_INSERT_SNIPPET, { data: '> ' })
 
-export const insertCode = () => {
+export const insertCode = (): void => {
   const communityRaw = store.curCommunity.raw
   const data = `\`\`\`${communityRaw}\n\n\`\`\``
 
   send(EVENT.DRAFT_INSERT_SNIPPET, { data })
 }
 
-export const onMention = (user) => store.addReferUser(user)
-export const onMentionSearch = (name) => {
+export const onMention = (user: TUser): void => store.addReferUser(user)
+export const onMentionSearch = (name: string): void => {
   if (name?.length >= 1) {
     sr71$.query(S.searchUsers, { name })
   } else {
@@ -242,17 +245,18 @@ export const onMentionSearch = (name) => {
   }
 }
 
-export const deleteComment = () =>
+export const deleteComment = (): void =>
   sr71$.mutate(S.deleteComment, {
     id: store.tobeDeleteId,
     thread: store.activeThread,
   })
 
 // show delete confirm
-export const onDelete = (comment) => store.mark({ tobeDeleteId: comment.id })
-export const cancelDelete = () => store.mark({ tobeDeleteId: null })
+export const onDelete = (comment): void =>
+  store.mark({ tobeDeleteId: comment.id })
+export const cancelDelete = (): void => store.mark({ tobeDeleteId: null })
 
-export const pageChange = (page = 1) => {
+export const pageChange = (page = 1): void => {
   scrollIntoEle('lists-info')
   loadComents({ filter: { page, sort: store.filterType } })
 }
@@ -260,19 +264,19 @@ export const pageChange = (page = 1) => {
 const cancelLoading = () =>
   store.mark({ loading: false, loadingFresh: false, creating: false })
 
-export const onReplyEditorClose = () => {
+export const onReplyEditorClose = (): void => {
   closeReplyBox()
   onCommentInputBlur()
 }
 
-const saveDraftIfNeed = (content) => {
-  if (isEmpty(content)) return false
+const saveDraftIfNeed = (content): void => {
+  if (isEmpty(content)) return
   const curDraftContent = BStore.get('recentDraft')
 
   if (curDraftContent !== content) BStore.set('recentDraft', content)
 }
 
-const clearDraft = () => BStore.set('recentDraft', '')
+const clearDraft = (): void => BStore.remove('recentDraft')
 
 // ###############################
 // Data & Error handlers
@@ -367,7 +371,9 @@ const DataSolver = [
 const ErrSolver = [
   {
     match: asyncErr(ERR.GRAPHQL),
-    action: () => {},
+    action: () => {
+      //
+    },
   },
   {
     match: asyncErr(ERR.TIMEOUT),
@@ -381,11 +387,11 @@ const ErrSolver = [
   },
 ]
 
-const stopDraftTimmer = () => {
+const stopDraftTimmer = (): void => {
   if (saveDraftTimmer) clearInterval(saveDraftTimmer)
 }
 
-const initDraftTimmer = () => {
+const initDraftTimmer = (): void => {
   stopDraftTimmer()
 
   saveDraftTimmer = setInterval(() => {
@@ -399,7 +405,11 @@ const initDraftTimmer = () => {
 // ###############################
 // init & uninit
 // ###############################
-export const useInit = (_store, ssr) => {
+export const useInit = (
+  _store: TStore,
+  ssr: boolean,
+  locked: boolean,
+): void => {
   useEffect(() => {
     // log('effect init')
     store = _store
@@ -410,12 +420,12 @@ export const useInit = (_store, ssr) => {
 
     return () => {
       // log('effect uninit')
-      if (store.loading || store.loadingFresh || !sub$) return false
+      if (store.loading || store.loadingFresh || !sub$) return
 
       stopDraftTimmer()
       sr71$.stop()
       sub$.unsubscribe()
       sub$ = null
     }
-  }, [_store, ssr])
+  }, [_store, ssr, locked])
 }
diff --git a/src/containers/unit/Comments/store.ts b/src/containers/unit/Comments/store.ts
index e7f4c1af7..fa50cbaab 100755
--- a/src/containers/unit/Comments/store.ts
+++ b/src/containers/unit/Comments/store.ts
@@ -93,7 +93,7 @@ const CommentsStore = T.model('CommentsStore', {
       const root = getParent(self) as TRootStore
       return root.account.isLogin
     },
-    get referUsersData() {
+    get referUsersData(): TUser[] {
       const referUsers = stripMobx(self.referUsers)
       const extractMentions = stripMobx(self.extractMentions)
       // @ts-ignore
diff --git a/src/spec/article.ts b/src/spec/article.ts
index b351d18bc..21412d16a 100644
--- a/src/spec/article.ts
+++ b/src/spec/article.ts
@@ -36,3 +36,19 @@ export type TPagedJobs = {
   pageSize: number
   totalPages: number
 }
+
+export type TComment = {
+  id: string
+  body: string
+  author?: TUser
+  insertedAt?: string
+  updatedAt?: string
+}
+
+export type TPagedComments = {
+  entries: TComment[]
+  totalCount: number
+  pageNumber: number
+  pageSize: number
+  totalPages: number
+}
diff --git a/src/spec/index.ts b/src/spec/index.ts
index 4cec5d2fb..1e6435622 100644
--- a/src/spec/index.ts
+++ b/src/spec/index.ts
@@ -33,7 +33,13 @@ export type {
 
 export type { TGQLError } from './graphql'
 
-export type { TArticle, TJob, TPagedJobs } from './article'
+export type {
+  TArticle,
+  TJob,
+  TPagedJobs,
+  TComment,
+  TPagedComments,
+} from './article'
 
 export type {
   TGALLERY_DEFAULT,
diff --git a/utils/bstore.ts b/utils/bstore.ts
index 39206ddc9..919d04aa2 100755
--- a/utils/bstore.ts
+++ b/utils/bstore.ts
@@ -31,8 +31,8 @@ const BStore = {
   // NOTE: if store json, JSON.parse is not need
   // is the json is valid, result will be the json, otherwise it will be string
   get: (value: string, optional?: string): string => store.get(value, optional),
-  set: (key: string, value: string): string => store.set(key, value),
-  remove: (key: string): string => store.remove(key),
+  set: (key: string, value: string): void => store.set(key, value),
+  remove: (key: string): void => store.remove(key),
   clearAll: (): void => store.clearAll(),
   cookie: {
     from_req: (req: Record<string, unknown>, key: string): string =>

From 2cb5c5ed3a0ba142908a259b667892ba8755302c Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Fri, 2 Apr 2021 16:03:16 +0800
Subject: [PATCH 2/2] chore(js-ts): convert to ts && fix warnings

---
 src/components/DotDivider/index.js            | 33 ------------
 src/components/DotDivider/index.tsx           | 28 ++++++++++
 src/components/DotDivider/styles/index.ts     |  5 +-
 .../ImgFallback/{Avatar.js => Avatar.tsx}     | 52 +++++--------------
 .../ImgFallback/{Work.js => Work.tsx}         |  8 ++-
 src/components/ImgFallback/index.js           | 37 -------------
 src/components/ImgFallback/index.tsx          | 45 ++++++++++++++++
 src/components/ImgFallback/styles/avatar.ts   | 13 +++--
 .../Comment/{Actions.js => Actions.tsx}       |  9 +++-
 .../unit/Comments/Comment/DeleteMask.js       | 28 ----------
 .../unit/Comments/Comment/DeleteMask.tsx      | 34 ++++++++++++
 .../{DesktopView.js => DesktopView.tsx}       |  9 +++-
 .../Comment/{Footer.js => Footer.tsx}         |  8 ++-
 .../Comment/{Header.js => Header.tsx}         | 12 ++++-
 .../MobileView/{Header.js => Header.tsx}      |  9 +++-
 .../MobileView/{index.js => index.tsx}        |  0
 .../Comment/{ReplyBar.js => ReplyBar.tsx}     |  7 ++-
 .../Comment/{UpInfo.js => UpInfo.tsx}         |  7 ++-
 .../Comments/Comment/{index.js => index.tsx}  |  0
 ...entBodyEditor.js => CommentBodyEditor.tsx} | 36 +++++++++----
 .../{CommentEditor.js => CommentEditor.tsx}   | 33 +++++++++---
 ...tReplyEditor.js => CommentReplyEditor.tsx} | 47 +++++++++++++----
 .../{CommentsFilter.js => CommentsFilter.tsx} | 21 +++-----
 src/containers/unit/Comments/EditorFooter.tsx |  4 +-
 ...yEditorHeader.js => ReplyEditorHeader.tsx} | 10 +++-
 .../{ReplyToBar.js => ReplyToBar.tsx}         |  7 ++-
 .../{WordsCounter.js => WordsCounter.tsx}     |  6 ++-
 src/containers/unit/Comments/index.tsx        |  3 +-
 .../unit/Comments/styles/comments_filter.ts   |  3 +-
 src/spec/article.ts                           |  8 ++-
 30 files changed, 316 insertions(+), 206 deletions(-)
 delete mode 100755 src/components/DotDivider/index.js
 create mode 100755 src/components/DotDivider/index.tsx
 rename src/components/ImgFallback/{Avatar.js => Avatar.tsx} (55%)
 rename src/components/ImgFallback/{Work.js => Work.tsx} (92%)
 delete mode 100755 src/components/ImgFallback/index.js
 create mode 100755 src/components/ImgFallback/index.tsx
 rename src/containers/unit/Comments/Comment/{Actions.js => Actions.tsx} (77%)
 delete mode 100755 src/containers/unit/Comments/Comment/DeleteMask.js
 create mode 100755 src/containers/unit/Comments/Comment/DeleteMask.tsx
 rename src/containers/unit/Comments/Comment/{DesktopView.js => DesktopView.tsx} (85%)
 rename src/containers/unit/Comments/Comment/{Footer.js => Footer.tsx} (76%)
 rename src/containers/unit/Comments/Comment/{Header.js => Header.tsx} (85%)
 rename src/containers/unit/Comments/Comment/MobileView/{Header.js => Header.tsx} (77%)
 rename src/containers/unit/Comments/Comment/MobileView/{index.js => index.tsx} (100%)
 rename src/containers/unit/Comments/Comment/{ReplyBar.js => ReplyBar.tsx} (77%)
 rename src/containers/unit/Comments/Comment/{UpInfo.js => UpInfo.tsx} (78%)
 rename src/containers/unit/Comments/Comment/{index.js => index.tsx} (100%)
 rename src/containers/unit/Comments/{CommentBodyEditor.js => CommentBodyEditor.tsx} (57%)
 rename src/containers/unit/Comments/{CommentEditor.js => CommentEditor.tsx} (71%)
 rename src/containers/unit/Comments/{CommentReplyEditor.js => CommentReplyEditor.tsx} (65%)
 rename src/containers/unit/Comments/{CommentsFilter.js => CommentsFilter.tsx} (80%)
 rename src/containers/unit/Comments/{ReplyEditorHeader.js => ReplyEditorHeader.tsx} (82%)
 rename src/containers/unit/Comments/{ReplyToBar.js => ReplyToBar.tsx} (78%)
 rename src/containers/unit/Comments/{WordsCounter.js => WordsCounter.tsx} (80%)

diff --git a/src/components/DotDivider/index.js b/src/components/DotDivider/index.js
deleted file mode 100755
index 913949f71..000000000
--- a/src/components/DotDivider/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- *
- * DotDivider
- *
- */
-
-import React from 'react'
-import T from 'prop-types'
-
-import { buildLog } from '@/utils'
-import { Wrapper } from './styles'
-
-/* eslint-disable-next-line */
-const log = buildLog('c:DotDivider:index')
-
-const DotDivider = ({ radius, space, className }) => (
-  <Wrapper radius={radius} space={space} className={className} />
-)
-
-DotDivider.propTypes = {
-  // just for clean styled-component warnings
-  className: T.string,
-  radius: T.number,
-  space: T.number,
-}
-
-DotDivider.defaultProps = {
-  className: 'dot-divider-class',
-  radius: 5,
-  space: 5,
-}
-
-export default React.memo(DotDivider)
diff --git a/src/components/DotDivider/index.tsx b/src/components/DotDivider/index.tsx
new file mode 100755
index 000000000..d3d42bac3
--- /dev/null
+++ b/src/components/DotDivider/index.tsx
@@ -0,0 +1,28 @@
+/*
+ *
+ * DotDivider
+ *
+ */
+
+import React from 'react'
+
+import { buildLog } from '@/utils'
+import { Wrapper } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:DotDivider:index')
+
+export type TProps = {
+  className?: string
+  radius?: number
+  space?: number
+}
+const DotDivider: React.FC<TProps> = ({
+  radius = 3,
+  space = 3,
+  className = 'dot-divider-class',
+}) => {
+  return <Wrapper radius={radius} space={space} className={className} />
+}
+
+export default React.memo(DotDivider)
diff --git a/src/components/DotDivider/styles/index.ts b/src/components/DotDivider/styles/index.ts
index 4b44042f5..fb8dc62b1 100755
--- a/src/components/DotDivider/styles/index.ts
+++ b/src/components/DotDivider/styles/index.ts
@@ -1,8 +1,9 @@
 import styled from 'styled-components'
 import { theme } from '@/utils'
 
-type TDot = { radius: string; space: string }
-export const Wrapper = styled.div<TDot>`
+import type { TProps } from '../index'
+
+export const Wrapper = styled.div<TProps>`
   width: ${({ radius }) => `${radius}px`};
   height: ${({ radius }) => `${radius}px`};
   border-radius: 100%;
diff --git a/src/components/ImgFallback/Avatar.js b/src/components/ImgFallback/Avatar.tsx
similarity index 55%
rename from src/components/ImgFallback/Avatar.js
rename to src/components/ImgFallback/Avatar.tsx
index b8fb81299..6a0f7c2a4 100644
--- a/src/components/ImgFallback/Avatar.js
+++ b/src/components/ImgFallback/Avatar.tsx
@@ -5,25 +5,27 @@
  */
 
 import React from 'react'
-import T from 'prop-types'
 
 import { buildLog } from '@/utils'
 
+import type { TAvatarProps as TProps } from './index'
 import { Wrapper, Name } from './styles/avatar'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:ImgFallback:Avatar')
 
-const Avatar = ({
-  testid,
-  className,
-  size,
-  user,
-  left,
-  right,
-  top,
-  bottom,
-  quote,
+const Avatar: React.FC<TProps> = ({
+  testid = 'avatar-fallback',
+  className = '',
+  size = 15,
+  user = {
+    nickname: '?',
+  },
+  left = 0,
+  right = 0,
+  top = 0,
+  bottom = 0,
+  quote = false,
 }) => {
   const name = user?.nickname
   const sliceCount = size > 32 ? 2 : 1
@@ -44,32 +46,4 @@ const Avatar = ({
   )
 }
 
-Avatar.propTypes = {
-  testid: T.string,
-  className: T.string,
-  user: T.shape({
-    nickname: T.string,
-  }),
-  size: T.number,
-  left: T.number,
-  right: T.number,
-  top: T.number,
-  bottom: T.number,
-  quote: T.bool,
-}
-
-Avatar.defaultProps = {
-  testid: 'avatar-fallback',
-  className: '',
-  size: 15,
-  user: {
-    nickname: '?',
-  },
-  left: 0,
-  right: 0,
-  top: 0,
-  bottom: 0,
-  quote: false,
-}
-
 export default React.memo(Avatar)
diff --git a/src/components/ImgFallback/Work.js b/src/components/ImgFallback/Work.tsx
similarity index 92%
rename from src/components/ImgFallback/Work.js
rename to src/components/ImgFallback/Work.tsx
index d3c3c1667..129eb06b1 100644
--- a/src/components/ImgFallback/Work.js
+++ b/src/components/ImgFallback/Work.tsx
@@ -127,8 +127,12 @@ const rollTheDice = () => {
   }
 }
 
-const Work = () => {
-  return <Wrapper>{rollTheDice()}</Wrapper>
+type TProps = {
+  testid?: string
+}
+
+const Work: React.FC<TProps> = ({ testid = 'image-fallbak-work' }) => {
+  return <Wrapper testid={testid}>{rollTheDice()}</Wrapper>
 }
 
 export default React.memo(Work)
diff --git a/src/components/ImgFallback/index.js b/src/components/ImgFallback/index.js
deleted file mode 100755
index cc40879e8..000000000
--- a/src/components/ImgFallback/index.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- *
- * ImgFallback
- *
- */
-
-import React from 'react'
-import T from 'prop-types'
-
-import { buildLog } from '@/utils'
-
-import Work from './Work'
-import Avatar from './Avatar'
-
-/* eslint-disable-next-line */
-const log = buildLog('c:ImgFallback:index')
-
-const ImgFallback = ({ type, ...restProps }) => {
-  switch (type) {
-    case 'work': {
-      return <Work {...restProps} />
-    }
-
-    default:
-      return <Avatar {...restProps} />
-  }
-}
-
-ImgFallback.propTypes = {
-  type: T.oneOf(['avatar', 'work']),
-}
-
-ImgFallback.defaultProps = {
-  type: 'avatar',
-}
-
-export default React.memo(ImgFallback)
diff --git a/src/components/ImgFallback/index.tsx b/src/components/ImgFallback/index.tsx
new file mode 100755
index 000000000..96a8cf021
--- /dev/null
+++ b/src/components/ImgFallback/index.tsx
@@ -0,0 +1,45 @@
+/*
+ *
+ * ImgFallback
+ *
+ */
+
+import React from 'react'
+
+import type { TUser } from '@/spec'
+import { buildLog } from '@/utils'
+
+import Work from './Work'
+import Avatar from './Avatar'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:ImgFallback:index')
+
+export type TAvatarProps = {
+  testid?: string
+  className?: string
+  user?: TUser
+  size?: number
+  left?: number
+  right?: number
+  top?: number
+  bottom?: number
+  quote?: boolean
+}
+
+type TProps = {
+  type?: 'avatar' | 'work'
+} & TAvatarProps
+
+const ImgFallback: React.FC<TProps> = ({ type = 'avatar', ...restProps }) => {
+  switch (type) {
+    case 'work': {
+      return <Work />
+    }
+
+    default:
+      return <Avatar {...restProps} />
+  }
+}
+
+export default React.memo(ImgFallback)
diff --git a/src/components/ImgFallback/styles/avatar.ts b/src/components/ImgFallback/styles/avatar.ts
index 2de427ecc..e7480e3af 100644
--- a/src/components/ImgFallback/styles/avatar.ts
+++ b/src/components/ImgFallback/styles/avatar.ts
@@ -1,17 +1,16 @@
 import styled from 'styled-components'
 
-import type { TTestable, TSpace } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
+
+import type { TAvatarProps } from '../index'
 import { getFontSize } from './metric/avatar'
 
-type IWrapper = TSpace & {
-  size: string
-  quote: string
-}
+type TWrapper = TTestable & TAvatarProps
 
-export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+export const Wrapper = styled.div.attrs(({ testid }: TWrapper) => ({
   'data-test-id': testid,
-}))<TTestable & IWrapper>`
+}))<TWrapper>`
   ${css.flex('align-both')};
   color: ${theme('thread.articleTitle')};
   width: ${({ size }) => `${size}px`};
diff --git a/src/containers/unit/Comments/Comment/Actions.js b/src/containers/unit/Comments/Comment/Actions.tsx
similarity index 77%
rename from src/containers/unit/Comments/Comment/Actions.js
rename to src/containers/unit/Comments/Comment/Actions.tsx
index c6fd6fe01..c84dcb56d 100755
--- a/src/containers/unit/Comments/Comment/Actions.js
+++ b/src/containers/unit/Comments/Comment/Actions.tsx
@@ -1,9 +1,16 @@
 import React from 'react'
 
+import type { TAccount, TComment } from '@/spec'
+
 import { Wrapper, ReplyAction } from '../styles/comment/actions'
 import { openUpdateEditor, openReplyEditor, onDelete } from '../logic'
 
-const Actions = ({ data, accountInfo }) => {
+type TProps = {
+  data: TComment
+  accountInfo: TAccount
+}
+
+const Actions: React.FC<TProps> = ({ data, accountInfo }) => {
   if (String(data.author.id) === accountInfo.id) {
     return (
       <Wrapper>
diff --git a/src/containers/unit/Comments/Comment/DeleteMask.js b/src/containers/unit/Comments/Comment/DeleteMask.js
deleted file mode 100755
index 17381211d..000000000
--- a/src/containers/unit/Comments/Comment/DeleteMask.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react'
-
-import { Button } from '@/components/Buttons'
-
-import {
-  DeleteOverlay,
-  DeleteHintText,
-  DeleteBtnGroup,
-} from '../styles/comment/delete_mask'
-
-import { cancelDelete, deleteComment } from '../logic'
-
-const DeleteMask = ({ show }) => (
-  <DeleteOverlay show={show}>
-    <DeleteHintText>删除后该该评论将不可恢复</DeleteHintText>
-    <DeleteBtnGroup>
-      <Button size="small" type="red" ghost onClick={cancelDelete}>
-        取消
-      </Button>
-      &nbsp;&nbsp;
-      <Button size="small" type="red" onClick={deleteComment}>
-        确定删除
-      </Button>
-    </DeleteBtnGroup>
-  </DeleteOverlay>
-)
-
-export default React.memo(DeleteMask)
diff --git a/src/containers/unit/Comments/Comment/DeleteMask.tsx b/src/containers/unit/Comments/Comment/DeleteMask.tsx
new file mode 100755
index 000000000..fc6703b35
--- /dev/null
+++ b/src/containers/unit/Comments/Comment/DeleteMask.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { Button } from '@/components/Buttons'
+
+import {
+  DeleteOverlay,
+  DeleteHintText,
+  DeleteBtnGroup,
+} from '../styles/comment/delete_mask'
+
+import { cancelDelete, deleteComment } from '../logic'
+
+type TProps = {
+  show: boolean
+}
+
+const DeleteMask: React.FC<TProps> = ({ show }) => {
+  return (
+    <DeleteOverlay show={show}>
+      <DeleteHintText>删除后该该评论将不可恢复</DeleteHintText>
+      <DeleteBtnGroup>
+        <Button size="small" type="red" ghost onClick={cancelDelete}>
+          取消
+        </Button>
+        &nbsp;&nbsp;
+        <Button size="small" type="red" onClick={deleteComment}>
+          确定删除
+        </Button>
+      </DeleteBtnGroup>
+    </DeleteOverlay>
+  )
+}
+
+export default React.memo(DeleteMask)
diff --git a/src/containers/unit/Comments/Comment/DesktopView.js b/src/containers/unit/Comments/Comment/DesktopView.tsx
similarity index 85%
rename from src/containers/unit/Comments/Comment/DesktopView.js
rename to src/containers/unit/Comments/Comment/DesktopView.tsx
index 9087aff2c..e58ab8010 100644
--- a/src/containers/unit/Comments/Comment/DesktopView.js
+++ b/src/containers/unit/Comments/Comment/DesktopView.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { isEmpty } from 'ramda'
 
+import type { TAccount, TComment } from '@/spec'
 import { Global } from '@/utils'
 
 import MarkDownRender from '@/components/MarkDownRender'
@@ -25,7 +26,13 @@ const getSelection = () => {
   }
 }
 
-const Comment = ({ data, tobeDeleteId, accountInfo }) => {
+type TProps = {
+  data: TComment
+  accountInfo: TAccount
+  tobeDeleteId: string
+}
+
+const Comment: React.FC<TProps> = ({ data, tobeDeleteId, accountInfo }) => {
   return (
     <Wrapper>
       <DeleteMask show={data.id === tobeDeleteId} />
diff --git a/src/containers/unit/Comments/Comment/Footer.js b/src/containers/unit/Comments/Comment/Footer.tsx
similarity index 76%
rename from src/containers/unit/Comments/Comment/Footer.js
rename to src/containers/unit/Comments/Comment/Footer.tsx
index 4a6a7dc96..8aa1f2ddd 100755
--- a/src/containers/unit/Comments/Comment/Footer.js
+++ b/src/containers/unit/Comments/Comment/Footer.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import TimeAgo from 'timeago-react'
 
+import type { TAccount, TComment } from '@/spec'
 import { SpaceGrow } from '@/components/Common'
 import DotDivider from '@/components/DotDivider'
 
@@ -8,7 +9,12 @@ import Actions from './Actions'
 
 import { Wrapper, PublishDateWrapper } from '../styles/comment/footer'
 
-const Footer = ({ data, accountInfo }) => (
+type TProps = {
+  data: TComment
+  accountInfo: TAccount
+}
+
+const Footer: React.FC<TProps> = ({ data, accountInfo }) => (
   <Wrapper>
     <PublishDateWrapper>
       <TimeAgo datetime={data.insertedAt} locale="zh_CN" />
diff --git a/src/containers/unit/Comments/Comment/Header.js b/src/containers/unit/Comments/Comment/Header.tsx
similarity index 85%
rename from src/containers/unit/Comments/Comment/Header.js
rename to src/containers/unit/Comments/Comment/Header.tsx
index 4c51b88e8..16aeee7e6 100755
--- a/src/containers/unit/Comments/Comment/Header.js
+++ b/src/containers/unit/Comments/Comment/Header.tsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import { forEach, clone, pluck } from 'ramda'
 
+import type { TComment } from '@/spec'
+
 import ImgFallback from '@/components/ImgFallback'
 import AvatarsRow from '@/components/AvatarsRow'
 import DotDivider from '@/components/DotDivider'
@@ -21,19 +23,25 @@ import { previewReply } from '../logic'
 const getAuthors = (comment) => {
   /* eslint-disable no-return-assign */
   const replies = forEach((reply) => {
+    /* @ts-ignore */
     return (reply.author.extra_id = reply.id)
   }, clone(comment.replies))
   /* eslint-enable */
 
+  /* @ts-ignore */
   return pluck('author', replies)
 }
 
-const CommentHeader = ({ data }) => {
+type TProps = {
+  data: TComment
+}
+
+const CommentHeader: React.FC<TProps> = ({ data }) => {
   return (
     <Wrapper>
       <Avatar
         src={data.author.avatar}
-        fallback={<ImgFallback user={data.author} width={22} right={10} />}
+        fallback={<ImgFallback user={data.author} size={22} right={10} />}
       />
       <HeaderBaseInfo>
         <CommentHeaderFirst>
diff --git a/src/containers/unit/Comments/Comment/MobileView/Header.js b/src/containers/unit/Comments/Comment/MobileView/Header.tsx
similarity index 77%
rename from src/containers/unit/Comments/Comment/MobileView/Header.js
rename to src/containers/unit/Comments/Comment/MobileView/Header.tsx
index b8f7b888b..d70371571 100644
--- a/src/containers/unit/Comments/Comment/MobileView/Header.js
+++ b/src/containers/unit/Comments/Comment/MobileView/Header.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import type { TComment } from '@/spec'
 import ImgFallback from '@/components/ImgFallback'
 
 import {
@@ -12,13 +13,17 @@ import {
   CommentHeaderFirst,
 } from '../../styles/comment/mobile_view/header'
 
-const CommentHeader = ({ data }) => {
+type TProps = {
+  data: TComment
+}
+
+const CommentHeader: React.FC<TProps> = ({ data }) => {
   return (
     <Wrapper>
       <Avatar
         src={data.author.avatar}
         fallback={
-          <ImgFallback user={data.author} width={24} right={10} top={10} />
+          <ImgFallback user={data.author} size={24} right={10} top={10} />
         }
       />
       <HeaderBaseInfo>
diff --git a/src/containers/unit/Comments/Comment/MobileView/index.js b/src/containers/unit/Comments/Comment/MobileView/index.tsx
similarity index 100%
rename from src/containers/unit/Comments/Comment/MobileView/index.js
rename to src/containers/unit/Comments/Comment/MobileView/index.tsx
diff --git a/src/containers/unit/Comments/Comment/ReplyBar.js b/src/containers/unit/Comments/Comment/ReplyBar.tsx
similarity index 77%
rename from src/containers/unit/Comments/Comment/ReplyBar.js
rename to src/containers/unit/Comments/Comment/ReplyBar.tsx
index f906dc49b..71e58a216 100755
--- a/src/containers/unit/Comments/Comment/ReplyBar.js
+++ b/src/containers/unit/Comments/Comment/ReplyBar.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import type { TComment } from '@/spec'
 import { ICON } from '@/config'
 import { cutRest } from '@/utils'
 
@@ -10,7 +11,11 @@ import {
   ReplyToFloor,
 } from '../styles/comment/reply_bar'
 
-const CommentReplyBar = ({ data }) => {
+type TProps = {
+  data: TComment
+}
+
+const CommentReplyBar: React.FC<TProps> = ({ data }) => {
   return (
     <Wrapper>
       <ReplyIcon src={`${ICON}/article/reply.svg`} />
diff --git a/src/containers/unit/Comments/Comment/UpInfo.js b/src/containers/unit/Comments/Comment/UpInfo.tsx
similarity index 78%
rename from src/containers/unit/Comments/Comment/UpInfo.js
rename to src/containers/unit/Comments/Comment/UpInfo.tsx
index 394abf8d5..a6ae7d205 100755
--- a/src/containers/unit/Comments/Comment/UpInfo.js
+++ b/src/containers/unit/Comments/Comment/UpInfo.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import type { TComment } from '@/spec'
 import { ICON } from '@/config'
 import { prettyNum } from '@/utils'
 
@@ -7,7 +8,11 @@ import { Wrapper, Icon } from '../styles/comment/up_info'
 
 import { toggleLikeComment } from '../logic'
 
-const UpInfo = ({ data }) => (
+type TProps = {
+  data: TComment
+}
+
+const UpInfo: React.FC<TProps> = ({ data }) => (
   <Wrapper>
     <div onClick={() => toggleLikeComment(data)}>
       <Icon src={`${ICON}/shape/vote-up.svg`} viewerDid={data.viewerHasLiked} />
diff --git a/src/containers/unit/Comments/Comment/index.js b/src/containers/unit/Comments/Comment/index.tsx
similarity index 100%
rename from src/containers/unit/Comments/Comment/index.js
rename to src/containers/unit/Comments/Comment/index.tsx
diff --git a/src/containers/unit/Comments/CommentBodyEditor.js b/src/containers/unit/Comments/CommentBodyEditor.tsx
similarity index 57%
rename from src/containers/unit/Comments/CommentBodyEditor.js
rename to src/containers/unit/Comments/CommentBodyEditor.tsx
index 985041934..afd19fd95 100755
--- a/src/containers/unit/Comments/CommentBodyEditor.js
+++ b/src/containers/unit/Comments/CommentBodyEditor.tsx
@@ -1,33 +1,51 @@
 import React from 'react'
 import dynamic from 'next/dynamic'
 
+import type { TUser } from '@/spec'
 import { debounce } from '@/utils'
+
 import { InputEditorWrapper } from './styles/comment_editor'
 import EditorFooter from './EditorFooter'
 
-import * as logic from './logic'
+import {
+  onMentionSearch,
+  onMention,
+  onCommentInputChange,
+  backToEditor,
+  createCommentPreview,
+  onCommentInputBlur,
+} from './logic'
 
 export const BodyEditor = dynamic(() => import('@/components/MarkdownEditor'), {
   /* eslint-disable react/display-name */
   loading: () => <div>loading</div>,
 })
 
-const CommentBodyEditor = ({
+type TProps = {
+  showInputEditor: boolean
+  showInputPreview: boolean
+  body: string
+  mentionList: TUser[]
+  onCreate: () => void
+  creating: boolean
+}
+
+const CommentBodyEditor: React.FC<TProps> = ({
   showInputEditor,
   showInputPreview,
   body,
   mentionList,
   onCreate,
-  restProps: { creating },
+  creating,
 }) => {
   return (
     <div className="comment-editor">
       <InputEditorWrapper showInputEditor={showInputEditor}>
         <BodyEditor
           mentionList={mentionList}
-          onChange={debounce(logic.onCommentInputChange, 200)}
-          onMention={logic.onMention}
-          onMentionSearch={logic.onMentionSearch}
+          onChange={debounce(onCommentInputChange, 200, true)}
+          onMention={onMention}
+          onMentionSearch={onMentionSearch}
           body={body}
         />
       </InputEditorWrapper>
@@ -37,9 +55,9 @@ const CommentBodyEditor = ({
         showFold
         showPreview={showInputPreview}
         onCreate={onCreate}
-        onBackEdit={logic.backToEditor}
-        onPreview={logic.createCommentPreview}
-        onFold={logic.onCommentInputBlur}
+        onBackEdit={backToEditor}
+        onPreview={createCommentPreview}
+        onFold={onCommentInputBlur}
       />
     </div>
   )
diff --git a/src/containers/unit/Comments/CommentEditor.js b/src/containers/unit/Comments/CommentEditor.tsx
similarity index 71%
rename from src/containers/unit/Comments/CommentEditor.js
rename to src/containers/unit/Comments/CommentEditor.tsx
index 2c5b84c9b..3defaa49c 100755
--- a/src/containers/unit/Comments/CommentEditor.js
+++ b/src/containers/unit/Comments/CommentEditor.tsx
@@ -1,15 +1,34 @@
 import React from 'react'
+
+import type { TAccount, TUser } from '@/spec'
 import MarkDownRender from '@/components/MarkDownRender'
+
+import EditorHeader from './EditorHeader'
+import EditorFooter from './EditorFooter'
 import CommentBodyEditor from './CommentBodyEditor'
 
 import { Container, PreviewerWrapper } from './styles/comment_editor'
+import { backToEditor, createCommentPreview } from './logic'
 
-import EditorHeader from './EditorHeader'
-import EditorFooter from './EditorFooter'
+type TProps = {
+  referUsers: TUser[]
+  accountInfo: TAccount
+  mentionList: TUser[]
 
-import * as logic from './logic'
+  /* TODO:  () => void */
+  onCreate?: any
+
+  restProps: {
+    countCurrent: number
+    showInputBox: boolean
+    showInputEditor: boolean
+    showInputPreview: boolean
+    editContent: string
+    creating: boolean
+  }
+}
 
-const CommentEditor = (props) => {
+const CommentEditor: React.FC<TProps> = (props) => {
   const {
     referUsers,
     accountInfo,
@@ -41,7 +60,7 @@ const CommentEditor = (props) => {
           showInputEditor={showInputEditor}
           body={editContent}
           onCreate={onCreate}
-          restProps={{ ...props }}
+          creating={creating}
         />
       )}
       {showInputPreview && (
@@ -53,8 +72,8 @@ const CommentEditor = (props) => {
             loading={creating}
             showPreview={showInputPreview}
             onCreate={onCreate}
-            onBackEdit={logic.backToEditor}
-            onPreview={logic.createCommentPreview}
+            onBackEdit={backToEditor}
+            onPreview={createCommentPreview}
           />
         </div>
       )}
diff --git a/src/containers/unit/Comments/CommentReplyEditor.js b/src/containers/unit/Comments/CommentReplyEditor.tsx
similarity index 65%
rename from src/containers/unit/Comments/CommentReplyEditor.js
rename to src/containers/unit/Comments/CommentReplyEditor.tsx
index fc3f6387e..9e90dce8f 100755
--- a/src/containers/unit/Comments/CommentReplyEditor.js
+++ b/src/containers/unit/Comments/CommentReplyEditor.tsx
@@ -1,10 +1,14 @@
 import React from 'react'
 import dynamic from 'next/dynamic'
 
-import MarkDownRender from '@/components/MarkDownRender'
+import type { TAccount, TUser, TComment } from '@/spec'
 import { debounce } from '@/utils'
+
+import MarkDownRender from '@/components/MarkDownRender'
+
 import ReplyToBar from './ReplyToBar'
 import ReplyEditorHeader from './ReplyEditorHeader'
+import EditorFooter from './EditorFooter'
 
 import {
   Wrapper,
@@ -12,16 +16,37 @@ import {
   PreviewWrapper,
 } from './styles/comment_reply_editor'
 
-import EditorFooter from './EditorFooter'
-
-import * as logic from './logic'
+import {
+  onReplyInputChange,
+  onMention,
+  onMentionSearch,
+  createReplyComment,
+  replyBackToEditor,
+  replyCommentPreview,
+} from './logic'
 
 export const BodyEditor = dynamic(() => import('@/components/MarkdownEditor'), {
   /* eslint-disable react/display-name */
   loading: () => <div>loading</div>,
 })
 
-const CommentReplyEditor = ({
+type TProps = {
+  referUsers: TUser[]
+  show: boolean
+  isEdit: boolean
+  accountInfo: TAccount
+  showReplyPreview: boolean
+  mentionList: TUser[]
+
+  restProps: {
+    countCurrent: number
+    replyContent: string
+    replyToComment: TComment
+    replying: boolean
+  }
+}
+
+const CommentReplyEditor: React.FC<TProps> = ({
   referUsers,
   show,
   isEdit,
@@ -46,9 +71,9 @@ const CommentReplyEditor = ({
           <InputEditorWrapper>
             <BodyEditor
               mentionList={mentionList}
-              onChange={debounce(logic.onReplyInputChange, 450)}
-              onMention={logic.onMention}
-              onMentionSearch={logic.onMentionSearch}
+              onChange={debounce(onReplyInputChange, 450, true)}
+              onMention={onMention}
+              onMentionSearch={onMentionSearch}
               body={replyContent}
             />
           </InputEditorWrapper>
@@ -61,9 +86,9 @@ const CommentReplyEditor = ({
       <EditorFooter
         loading={replying}
         showPreview={showReplyPreview}
-        onCreate={logic.createReplyComment}
-        onBackEdit={logic.replyBackToEditor}
-        onPreview={logic.replyCommentPreview}
+        onCreate={createReplyComment}
+        onBackEdit={replyBackToEditor}
+        onPreview={replyCommentPreview}
       />
     </Wrapper>
   )
diff --git a/src/containers/unit/Comments/CommentsFilter.js b/src/containers/unit/Comments/CommentsFilter.tsx
similarity index 80%
rename from src/containers/unit/Comments/CommentsFilter.js
rename to src/containers/unit/Comments/CommentsFilter.tsx
index 665cca41d..e353d73b9 100755
--- a/src/containers/unit/Comments/CommentsFilter.js
+++ b/src/containers/unit/Comments/CommentsFilter.tsx
@@ -24,30 +24,20 @@ const filterDict = {
 
 const Menus = ({ active }) => (
   <MenuWrapper>
-    <MenuItem
-      onClick={() => onFilterChange(TYPE.ASC_INSERTED)}
-      type={TYPE.ASC_INSERTED}
-      active={active}
-    >
+    <MenuItem onClick={() => onFilterChange(TYPE.ASC_INSERTED)} active={active}>
       综合排序
     </MenuItem>
     <MenuItem
       onClick={() => onFilterChange(TYPE.DESC_INSERTED)}
-      type={TYPE.DESC_INSERTED}
       active={active}
     >
       最近创建
     </MenuItem>
-    <MenuItem
-      onClick={() => onFilterChange(TYPE.MOST_LIKES)}
-      type={TYPE.MOST_LIKES}
-      active={active}
-    >
+    <MenuItem onClick={() => onFilterChange(TYPE.MOST_LIKES)} active={active}>
       最多顶
     </MenuItem>
     <MenuItem
       onClick={() => onFilterChange(TYPE.MOST_DISLIKES)}
-      type={TYPE.MOST_DISLIKES}
       active={active}
     >
       最多踩
@@ -71,7 +61,12 @@ const renderFilterIcon = (filterType) => {
   }
 }
 
-const CommentsFilter = ({ filterType, show }) => (
+type TProps = {
+  filterType: string
+  show: boolean
+}
+
+const CommentsFilter: React.FC<TProps> = ({ filterType, show }) => (
   <FilterWraper show={show}>
     <Tooltip content={<Menus active={filterType} />}>
       <Header>
diff --git a/src/containers/unit/Comments/EditorFooter.tsx b/src/containers/unit/Comments/EditorFooter.tsx
index 9bc390fd1..15023bb68 100755
--- a/src/containers/unit/Comments/EditorFooter.tsx
+++ b/src/containers/unit/Comments/EditorFooter.tsx
@@ -24,8 +24,8 @@ type TProps = {
   onCreate: () => void
   onBackEdit: () => void
   onPreview: () => void
-  onFold: () => void
-  showFold: boolean
+  onFold?: () => void
+  showFold?: boolean
 }
 
 const EditorFooter: React.FC<TProps> = ({
diff --git a/src/containers/unit/Comments/ReplyEditorHeader.js b/src/containers/unit/Comments/ReplyEditorHeader.tsx
similarity index 82%
rename from src/containers/unit/Comments/ReplyEditorHeader.js
rename to src/containers/unit/Comments/ReplyEditorHeader.tsx
index b2705187c..4d35c388e 100755
--- a/src/containers/unit/Comments/ReplyEditorHeader.js
+++ b/src/containers/unit/Comments/ReplyEditorHeader.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import type { TAccount, TUser } from '@/spec'
 import { ICON_CMD } from '@/config'
 
 import { SpaceGrow } from '@/components/Common'
@@ -15,7 +16,14 @@ import {
   ReferToIcon,
 } from './styles/reply_editor_header'
 
-const ReplyEditorHeader = ({
+type TProps = {
+  accountInfo: TAccount
+  countCurrent: number
+  referUsers: TUser[]
+  showPreview: boolean
+}
+
+const ReplyEditorHeader: React.FC<TProps> = ({
   accountInfo,
   countCurrent,
   referUsers,
diff --git a/src/containers/unit/Comments/ReplyToBar.js b/src/containers/unit/Comments/ReplyToBar.tsx
similarity index 78%
rename from src/containers/unit/Comments/ReplyToBar.js
rename to src/containers/unit/Comments/ReplyToBar.tsx
index 217e76462..09261b147 100755
--- a/src/containers/unit/Comments/ReplyToBar.js
+++ b/src/containers/unit/Comments/ReplyToBar.tsx
@@ -1,11 +1,16 @@
 import React from 'react'
 
+import type { TComment } from '@/spec'
 // import { ICON_CMD } from '@/config'
 // import { Wrapper } from './styles'
 import { cutRest } from '@/utils'
 import { ReplyBar, ReplyToBody, ReplyToFloor } from './styles/reply_to_bar'
 
-const ReplyToBar = ({ comment }) => {
+type TProps = {
+  comment: TComment
+}
+
+const ReplyToBar: React.FC<TProps> = ({ comment }) => {
   if (!comment) return null
   return (
     <ReplyBar>
diff --git a/src/containers/unit/Comments/WordsCounter.js b/src/containers/unit/Comments/WordsCounter.tsx
similarity index 80%
rename from src/containers/unit/Comments/WordsCounter.js
rename to src/containers/unit/Comments/WordsCounter.tsx
index 7f546b4d0..f4a3ed902 100755
--- a/src/containers/unit/Comments/WordsCounter.js
+++ b/src/containers/unit/Comments/WordsCounter.tsx
@@ -10,7 +10,11 @@ import {
   CounterTotal,
 } from './styles/words_counter'
 
-const WordsCounter = ({ countCurrent }) => (
+type TProps = {
+  countCurrent: number
+}
+
+const WordsCounter: React.FC<TProps> = ({ countCurrent }) => (
   <Wrapper>
     <CounterCur num={countCurrent}>{countCurrent}</CounterCur>
     <CounterSplit>/</CounterSplit>
diff --git a/src/containers/unit/Comments/index.tsx b/src/containers/unit/Comments/index.tsx
index 21f08e144..a8f5c93f5 100755
--- a/src/containers/unit/Comments/index.tsx
+++ b/src/containers/unit/Comments/index.tsx
@@ -5,11 +5,10 @@
  */
 
 import React from 'react'
-import T from 'prop-types'
 
 import { pluggedIn, buildLog } from '@/utils'
-
 import Modal from '@/components/Modal'
+
 import CommentEditor from './CommentEditor'
 import CommentsList from './CommentsList'
 import CommentReplyEditor from './CommentReplyEditor'
diff --git a/src/containers/unit/Comments/styles/comments_filter.ts b/src/containers/unit/Comments/styles/comments_filter.ts
index 51ecc3e6d..6e363b547 100755
--- a/src/containers/unit/Comments/styles/comments_filter.ts
+++ b/src/containers/unit/Comments/styles/comments_filter.ts
@@ -23,7 +23,8 @@ export const Header = styled.div`
     font-size: 13px;
   `};
 `
-export const FilterIcon = styled(Img)<{ reverse: boolean }>`
+type TFilterIcon = { reverse?: boolean }
+export const FilterIcon = styled(Img)<TFilterIcon>`
   fill: ${theme('comment.title')};
   margin-right: 3px;
   ${css.size(20)};
diff --git a/src/spec/article.ts b/src/spec/article.ts
index 21412d16a..ff67b3c48 100644
--- a/src/spec/article.ts
+++ b/src/spec/article.ts
@@ -40,9 +40,15 @@ export type TPagedJobs = {
 export type TComment = {
   id: string
   body: string
-  author?: TUser
+  floor?: number
   insertedAt?: string
   updatedAt?: string
+  author?: TUser
+  repliesCount?: number
+  replies?: TComment[]
+  replyTo?: TComment
+  likesCount?: number
+  viewerHasLiked?: boolean
 }
 
 export type TPagedComments = {