diff --git a/src/containers/tool/ArticleSticker/ArticleSticker.js b/src/containers/tool/ArticleSticker/ArticleSticker.tsx
similarity index 80%
rename from src/containers/tool/ArticleSticker/ArticleSticker.js
rename to src/containers/tool/ArticleSticker/ArticleSticker.tsx
index 9f2992161..66701624b 100644
--- a/src/containers/tool/ArticleSticker/ArticleSticker.js
+++ b/src/containers/tool/ArticleSticker/ArticleSticker.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import type { TArticle } from '@/spec'
 import { ICON } from '@/config'
 import { Br } from '@/components/Common'
 
@@ -14,7 +15,12 @@ import {
   Text,
 } from './styles/article_sticker'
 
-const CommonSticker = ({ show, viewing }) => {
+type TProps = {
+  show: boolean
+  viewing: TArticle
+}
+
+const ArticleSticker: React.FC<TProps> = ({ show, viewing }) => {
   return (
     <Wrapper show={show}>
       <ItemWrapper>
@@ -37,4 +43,4 @@ const CommonSticker = ({ show, viewing }) => {
   )
 }
 
-export default React.memo(CommonSticker)
+export default React.memo(ArticleSticker)
diff --git a/src/containers/tool/ArticleSticker/CommentSticker.js b/src/containers/tool/ArticleSticker/CommentSticker.tsx
similarity index 95%
rename from src/containers/tool/ArticleSticker/CommentSticker.js
rename to src/containers/tool/ArticleSticker/CommentSticker.tsx
index 814a3f635..7b82fec20 100644
--- a/src/containers/tool/ArticleSticker/CommentSticker.js
+++ b/src/containers/tool/ArticleSticker/CommentSticker.tsx
@@ -29,7 +29,12 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('c:CommentSticker:index')
 
-const CommentSticker = ({
+type TProps = {
+  show: boolean
+  data?: any // TODO
+}
+
+const CommentSticker: React.FC<TProps> = ({
   show,
   data: { pagedCommentsParticipators: users },
 }) => {
diff --git a/src/containers/tool/ArticleSticker/CommunitySticker.js b/src/containers/tool/ArticleSticker/CommunitySticker.tsx
similarity index 78%
rename from src/containers/tool/ArticleSticker/CommunitySticker.js
rename to src/containers/tool/ArticleSticker/CommunitySticker.tsx
index f84fb1aae..5f75e9f72 100644
--- a/src/containers/tool/ArticleSticker/CommunitySticker.js
+++ b/src/containers/tool/ArticleSticker/CommunitySticker.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import type { TViewing } from '@/spec'
 import { ICON_BASE } from '@/config'
 import { Button } from '@/components/Buttons'
 
@@ -10,7 +11,12 @@ import {
   Divider,
 } from './styles/community_sticker'
 
-const CommunitySticker = () => {
+type TProps = {
+  data?: TViewing
+  show?: boolean
+}
+
+const CommunitySticker: React.FC<TProps> = ({ show, data }) => {
   return (
     <React.Fragment>
       <ItemWrapper>
diff --git a/src/containers/tool/ArticleSticker/LeftSticker/Toc.js b/src/containers/tool/ArticleSticker/LeftSticker/Toc.tsx
similarity index 84%
rename from src/containers/tool/ArticleSticker/LeftSticker/Toc.js
rename to src/containers/tool/ArticleSticker/LeftSticker/Toc.tsx
index bbed82d0c..8ef5261fa 100644
--- a/src/containers/tool/ArticleSticker/LeftSticker/Toc.js
+++ b/src/containers/tool/ArticleSticker/LeftSticker/Toc.tsx
@@ -14,9 +14,14 @@ import {
 } from '../styles/left_sticker/toc'
 import { toggleTocMenu } from '../logic'
 
-const Toc = ({ show }) => {
+type TProps = {
+  show: boolean
+  testid?: string
+}
+
+const Toc: React.FC<TProps> = ({ show, testid = 'article-sticker-toc' }) => {
   return (
-    <Wrapper>
+    <Wrapper testid={testid}>
       <HeaderWrapper onClick={toggleTocMenu}>
         <TitleWrapper>
           <TocIcon src={`${ICON}/article/outline.svg`} />
diff --git a/src/containers/tool/ArticleSticker/LeftSticker/index.js b/src/containers/tool/ArticleSticker/LeftSticker/index.tsx
similarity index 66%
rename from src/containers/tool/ArticleSticker/LeftSticker/index.js
rename to src/containers/tool/ArticleSticker/LeftSticker/index.tsx
index 1d8f95547..3732dce0c 100644
--- a/src/containers/tool/ArticleSticker/LeftSticker/index.js
+++ b/src/containers/tool/ArticleSticker/LeftSticker/index.tsx
@@ -13,9 +13,21 @@ import {
   BackText,
 } from '../styles/left_sticker'
 
-const LeftSticker = ({ show, title, isTocMenuOpened }) => {
+type TProps = {
+  show: boolean
+  title: string
+  isTocMenuOpened: boolean
+  testid?: string
+}
+
+const LeftSticker: React.FC<TProps> = ({
+  show,
+  title,
+  isTocMenuOpened,
+  testid = 'article-sticker-left-sidebar',
+}) => {
   return (
-    <Wrapper show={show}>
+    <Wrapper show={show} testid={testid}>
       <BackWrapper>
         <ArrowIcon src={`${ICON}/shape/arrow-simple.svg`} />
         <BackText>Elixir 社区</BackText>
diff --git a/src/containers/tool/ArticleSticker/index.js b/src/containers/tool/ArticleSticker/index.tsx
similarity index 82%
rename from src/containers/tool/ArticleSticker/index.js
rename to src/containers/tool/ArticleSticker/index.tsx
index 5559e0c6a..6ef2df994 100755
--- a/src/containers/tool/ArticleSticker/index.js
+++ b/src/containers/tool/ArticleSticker/index.tsx
@@ -7,13 +7,14 @@
  */
 
 import React from 'react'
-import T from 'prop-types'
 
 import { pluggedIn, buildLog } from '@/utils'
 
 import Sticky from '@/components/Sticky'
 import GotoTop from '@/components/GotoTop'
 
+import type { TStore } from './store'
+
 import LeftSticker from './LeftSticker/index'
 import CommunitySticker from './CommunitySticker'
 import ArticleSticker from './ArticleSticker'
@@ -25,7 +26,15 @@ import { useInit } from './logic'
 /* eslint-disable-next-line */
 const log = buildLog('C:ArticleSticker')
 
-const ArticleStickerContainer = ({ articleSticker: store, testid }) => {
+type TProps = {
+  articleSticker?: TStore
+  testid?: string
+}
+
+const ArticleStickerContainer: React.FC<TProps> = ({
+  articleSticker: store,
+  testid = 'article-sticker',
+}) => {
   useInit(store)
 
   const {
@@ -65,13 +74,4 @@ const ArticleStickerContainer = ({ articleSticker: store, testid }) => {
   )
 }
 
-ArticleStickerContainer.propTypes = {
-  articleSticker: T.any.isRequired,
-  testid: T.string,
-}
-
-ArticleStickerContainer.defaultProps = {
-  testid: 'article-sticker',
-}
-
-export default pluggedIn(ArticleStickerContainer)
+export default pluggedIn(ArticleStickerContainer) as React.FC<TProps>
diff --git a/src/containers/tool/ArticleSticker/logic.js b/src/containers/tool/ArticleSticker/logic.ts
similarity index 77%
rename from src/containers/tool/ArticleSticker/logic.js
rename to src/containers/tool/ArticleSticker/logic.ts
index 676404f54..779b97bda 100755
--- a/src/containers/tool/ArticleSticker/logic.js
+++ b/src/containers/tool/ArticleSticker/logic.ts
@@ -3,13 +3,14 @@ import { useEffect } from 'react'
 
 import { buildLog } from '@/utils'
 // import S from './service'
+import type { TStore } from './store'
 
-let store = null
+let store: TStore | undefined
 
 /* eslint-disable-next-line */
 const log = buildLog('L:ArticleSticker')
 
-export const toggleTocMenu = () => {
+export const toggleTocMenu = (): void => {
   const isTocMenuOpened = !store.isTocMenuOpened
   const isLeftStickerLocked = isTocMenuOpened
 
@@ -20,7 +21,7 @@ export const toggleTocMenu = () => {
 // init & uninit handlers
 // ###############################
 
-export const useInit = (_store) => {
+export const useInit = (_store: TStore): void => {
   useEffect(() => {
     store = _store
     log('useInit: ', store)
diff --git a/src/containers/tool/ArticleSticker/store.js b/src/containers/tool/ArticleSticker/store.js
deleted file mode 100755
index ffd74a846..000000000
--- a/src/containers/tool/ArticleSticker/store.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * ArticleSticker store
- *
- */
-
-import { types as T, getParent } from 'mobx-state-tree'
-// import {} from 'ramda'
-
-import { markStates, buildLog } from '@/utils'
-/* eslint-disable-next-line */
-const log = buildLog('S:ArticleSticker')
-
-const ArticleSticker = T.model('ArticleSticker', {
-  isTocMenuOpened: T.optional(T.boolean, false),
-  // is TOC is opend, then lock the lefsidebar
-  isLeftStickerLocked: T.optional(T.boolean, false),
-})
-  .views((self) => ({
-    get root() {
-      return getParent(self)
-    },
-    get viewingData() {
-      return self.root.viewingData
-    },
-    get bodyScrollDirection() {
-      return self.root.globalLayout.bodyScrollDirection
-    },
-    get isArticleDigestInViewport() {
-      return self.root.articleDigest.inViewport
-    },
-    get isArticleInViewport() {
-      const { articleInViewport } = self.root.postContent
-
-      return articleInViewport
-    },
-    get showLeftSticker() {
-      const {
-        isArticleDigestInViewport,
-        isLeftStickerLocked,
-        bodyScrollDirection,
-      } = self
-
-      if (isArticleDigestInViewport) return false
-      if (isLeftStickerLocked) return true
-
-      return bodyScrollDirection === 'down'
-    },
-    get showCommunity() {
-      return !self.isArticleDigestInViewport && self.isArticleInViewport
-    },
-    get showCommentSticker() {
-      return !self.isArticleInViewport
-    },
-  }))
-  .actions((self) => ({
-    mark(sobj) {
-      markStates(sobj, self)
-    },
-  }))
-
-export default ArticleSticker
diff --git a/src/containers/tool/ArticleSticker/store.ts b/src/containers/tool/ArticleSticker/store.ts
new file mode 100755
index 000000000..e3f3554cd
--- /dev/null
+++ b/src/containers/tool/ArticleSticker/store.ts
@@ -0,0 +1,66 @@
+/*
+ * ArticleSticker store
+ *
+ */
+
+import { types as T, getParent, Instance } from 'mobx-state-tree'
+// import {} from 'ramda'
+
+import type { TRootStore, TViewing, TScrollDirection } from '@/spec'
+import { markStates, buildLog } from '@/utils'
+/* eslint-disable-next-line */
+const log = buildLog('S:ArticleSticker')
+
+const ArticleSticker = T.model('ArticleSticker', {
+  isTocMenuOpened: T.optional(T.boolean, false),
+  // is TOC is opend, then lock the lefsidebar
+  isLeftStickerLocked: T.optional(T.boolean, false),
+})
+  .views((self) => ({
+    get viewingData(): TViewing {
+      const root = getParent(self) as TRootStore
+      return root.viewingData
+    },
+    get bodyScrollDirection(): TScrollDirection {
+      const root = getParent(self) as TRootStore
+      return root.globalLayout.bodyScrollDirection
+    },
+    get isArticleDigestInViewport(): boolean {
+      const root = getParent(self) as TRootStore
+      return root.articleDigest.inViewport
+    },
+    get isArticleInViewport(): boolean {
+      const root = getParent(self) as TRootStore
+      const { articleInViewport } = root.postContent
+
+      return articleInViewport
+    },
+    get showLeftSticker(): boolean {
+      const {
+        isArticleDigestInViewport,
+        isLeftStickerLocked,
+        bodyScrollDirection,
+      } = self as TStore
+
+      if (isArticleDigestInViewport) return false
+      if (isLeftStickerLocked) return true
+
+      return bodyScrollDirection === 'down'
+    },
+    get showCommunity(): boolean {
+      const { isArticleDigestInViewport, isArticleInViewport } = self as TStore
+      return !isArticleDigestInViewport && isArticleInViewport
+    },
+    get showCommentSticker(): boolean {
+      const { isArticleInViewport } = self as TStore
+      return !isArticleInViewport
+    },
+  }))
+  .actions((self) => ({
+    mark(sobj: Record<string, unknown>): void {
+      markStates(sobj, self)
+    },
+  }))
+
+export type TStore = Instance<typeof ArticleSticker>
+export default ArticleSticker
diff --git a/src/spec/article.ts b/src/spec/article.ts
index faf614f80..a75aca0a9 100644
--- a/src/spec/article.ts
+++ b/src/spec/article.ts
@@ -12,6 +12,7 @@ export type TArticle = {
     nickname: string
     avatar: string
   }
+  starredCount?: number
   origialCommunity?: TCommunity
   commentsParticipators?: TUser
   insertedAt?: string