diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 000000000..20fdcbf38
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,5 @@
+!.eslintrc.js
+.gitignore
+*.json
+*.lock
+*.hbs
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
index e8108cc2b..91203c30b 100755
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,8 +1,20 @@
 // see details:
 // https://github.com/groupher/eslint-config-web/blob/master/index.js
 module.exports = {
-  extends: ['@groupher/eslint-config-web'],
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  extends: [
+    '@groupher/eslint-config-web',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  // extends: ['@groupher/eslint-config-web'],
   settings: {
+    // see if the import lib exsit or not
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
     'import/resolver': {
       'babel-module': {},
       'eslint-import-resolver-custom-alias': {
@@ -14,7 +26,6 @@ module.exports = {
           '@/constant': 'utils/constant',
           '@/hooks': 'src/hooks',
           '@/hoc': 'src/hoc',
-          '@/config': 'config',
           '@/stores': 'src/stores',
           '@/model': 'src/stores/SharedModel',
           '@/utils': 'utils',
@@ -22,12 +33,28 @@ module.exports = {
           '@/Img': 'src/components/Img',
           '@/SvgIcons': 'src/components/SvgIcons',
           '@/i18n': 'i18n',
+          '@/types': 'src/types',
         },
-        extensions: ['.js', '.jsx'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
       },
     },
   },
   rules: {
+    '@typescript-eslint/ban-ts-comment': 0,
+    'react/jsx-filename-extension': [
+      2,
+      { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
+    ],
     'import/no-named-as-default': 0,
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
   },
 }
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 2ae354bdc..d05a018d7 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -29,7 +29,7 @@ jobs:
           repository: 'coderplanets/coderplanets_server'
           path: 'backend_server'
       - name: (Backend) Setup Elixir and OTP
-        uses: actions/setup-elixir@v1
+        uses: erlef/setup-elixir@v1
         with:
           elixir-version: '1.10.3' # Define the elixir version [required]
           otp-version: '22.3' # Define the OTP version [required]
diff --git a/.gitignore b/.gitignore
index be884a229..7feb5f152 100755
--- a/.gitignore
+++ b/.gitignore
@@ -13,3 +13,4 @@ cypress/videos/
 .vscode/
 .DS_Store
 report.*
+.eslintcache
diff --git a/next-env.d.ts b/next-env.d.ts
new file mode 100644
index 000000000..7b7aa2c77
--- /dev/null
+++ b/next-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
diff --git a/package.json b/package.json
index 58805bbea..41523e764 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,8 @@
     "clean": "shjs ./utils/scripts/clean.js",
     "gen": "plop --plopfile ./utils/scripts/generators/index.js",
     "analyze": "cross-env ANALYZE=true next build",
-    "lint": "./node_modules/.bin/eslint --ext .js --fix src/ utils/",
-    "lint:staged": "git diff --cached --name-only --diff-filter=ACRM | grep \".js$\" | xargs ./node_modules/.bin/eslint --ext .js",
+    "lint": "./node_modules/.bin/eslint --ext .js,.ts,.tsx --fix src/ utils/",
+    "lint:staged": "git diff --cached --name-only --diff-filter=ACRM | xargs ./node_modules/.bin/eslint --cache --ext .js,.ts,.tsx && tsc --noemit",
     "test": "cross-env NODE_ENV=test jest --config .jest.config.js",
     "test:dev": "cross-env NODE_ENV=test jest --config .jest.config.js",
     "test:watch": "npm run test -- --watch",
@@ -140,6 +140,9 @@
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
     "@groupher/eslint-config-web": "2.0.9",
+    "@types/ramda": "^0.27.38",
+    "@typescript-eslint/eslint-plugin": "^4.17.0",
+    "@typescript-eslint/parser": "^4.17.0",
     "babel-eslint": "^10.0.2",
     "babel-jest": "^23.6.0",
     "bundlewatch": "^0.2.7",
@@ -160,6 +163,7 @@
     "react-test-renderer": "16.10.0",
     "shelljs": "0.8.4",
     "standard-version": "^8.0.1",
-    "start-server-and-test": "1.10.1"
+    "start-server-and-test": "1.10.1",
+    "typescript": "^4.2.3"
   }
 }
diff --git a/src/components/AlertBar/index.js b/src/components/AlertBar/index.js
index 140f75746..6cb573e28 100755
--- a/src/components/AlertBar/index.js
+++ b/src/components/AlertBar/index.js
@@ -15,7 +15,7 @@ import { Wrapper } from './styles'
 const log = buildLog('c:AlertBar:index')
 
 const AlertBar = ({ children }) => {
-  return <Wrapper testId="alertBar">{children}</Wrapper>
+  return <Wrapper testid="alertBar">{children}</Wrapper>
 }
 
 AlertBar.propTypes = {
diff --git a/src/components/AlertBar/styles/index.js b/src/components/AlertBar/styles/index.js
index 19174d6fe..cd814f4f8 100755
--- a/src/components/AlertBar/styles/index.js
+++ b/src/components/AlertBar/styles/index.js
@@ -4,7 +4,7 @@ import styled from 'styled-components'
 // import { theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   font-size: 14px;
   font-variant: tabular-nums;
diff --git a/src/components/Buttons/NotifyButton/index.js b/src/components/Buttons/NotifyButton/index.js
index 8396fc6f3..c950f0db9 100644
--- a/src/components/Buttons/NotifyButton/index.js
+++ b/src/components/Buttons/NotifyButton/index.js
@@ -25,9 +25,9 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('c:NotifyButton:index')
 
-const NotifyButton = ({ testId, subscribed }) => {
+const NotifyButton = ({ testid, subscribed }) => {
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       {subscribed ? (
         <Main>
           <NotifyOnIcon src={`${ICON}/article/notify-on.svg`} />
@@ -68,12 +68,12 @@ const NotifyButton = ({ testId, subscribed }) => {
 }
 
 NotifyButton.propTypes = {
-  testId: T.string,
+  testid: T.string,
   subscribed: T.bool,
 }
 
 NotifyButton.defaultProps = {
-  testId: 'notify-button',
+  testid: 'notify-button',
   subscribed: false,
 }
 
diff --git a/src/components/Buttons/styles/notify_button/index.js b/src/components/Buttons/styles/notify_button/index.js
index a714ba61c..96861597d 100644
--- a/src/components/Buttons/styles/notify_button/index.js
+++ b/src/components/Buttons/styles/notify_button/index.js
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn()};
 `
diff --git a/src/components/Charger/index.js b/src/components/Charger/index.js
index 7b34f7317..995543aa9 100755
--- a/src/components/Charger/index.js
+++ b/src/components/Charger/index.js
@@ -19,7 +19,7 @@ const log = buildLog('c:Charger:index')
 // bubbles effect: https://codepen.io/Johnm__/pen/qZqgGJ
 const Charger = () => {
   return (
-    <Wrapper testId="charger">
+    <Wrapper testid="charger">
       <Battery>
         <Liquid />
         <MoneySign src={`${ICON_CMD}/battery_heart.svg`} />
diff --git a/src/components/Charger/styles/index.js b/src/components/Charger/styles/index.js
index 9eb791e3d..97a20650b 100755
--- a/src/components/Charger/styles/index.js
+++ b/src/components/Charger/styles/index.js
@@ -106,7 +106,7 @@ const liquid2Rule = styledCss`
 `
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   text-align: center;
   position: relative;
diff --git a/src/components/CollapseMenu/Group.js b/src/components/CollapseMenu/Group.js
index f8c56aa8f..6eba77a92 100644
--- a/src/components/CollapseMenu/Group.js
+++ b/src/components/CollapseMenu/Group.js
@@ -81,7 +81,7 @@ const Group = ({
               key={item.id}
               item={item}
               active={activeItem.id === item.id}
-              activeId={activeItem.id}
+              activeid={activeItem.id}
               onSelect={onSelect}
             />
           ))}
diff --git a/src/components/CollapseMenu/Item.js b/src/components/CollapseMenu/Item.js
index 4c00d11e7..a758e10ae 100644
--- a/src/components/CollapseMenu/Item.js
+++ b/src/components/CollapseMenu/Item.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 import { Wrapper, Title } from './styles/item'
 
-// const Item = ({ item, active, activeId, onSelect }) => {
+// const Item = ({ item, active, activeid, onSelect }) => {
 const Item = ({ item, active, onSelect }) => {
   return (
     <Wrapper active={active}>
diff --git a/src/components/CollapseMenu/index.js b/src/components/CollapseMenu/index.js
index 9cf56e6cf..a120c209f 100755
--- a/src/components/CollapseMenu/index.js
+++ b/src/components/CollapseMenu/index.js
@@ -76,7 +76,7 @@ const defaultItems = [
 ]
 
 const CollapseMenu = ({
-  testId,
+  testid,
   items,
   activeItem,
   onSelect,
@@ -87,7 +87,7 @@ const CollapseMenu = ({
   const groupsKeys = keys(groupedItems)
 
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       {groupsKeys.map((groupKey) => (
         <Group
           key={groupKey}
@@ -105,7 +105,7 @@ const CollapseMenu = ({
 }
 
 CollapseMenu.propTypes = {
-  testId: T.string,
+  testid: T.string,
   items: T.arrayOf(
     T.shape({
       id: T.number,
@@ -124,7 +124,7 @@ CollapseMenu.propTypes = {
 }
 
 CollapseMenu.defaultProps = {
-  testId: 'collapse-menu',
+  testid: 'collapse-menu',
   items: defaultItems,
   activeItem: defaultActiveItem,
   // default display count in each group, the remaining part will be folded
diff --git a/src/components/CrashErrorHint/index.js b/src/components/CrashErrorHint/index.js
index dedb9be98..c6bb8eb78 100755
--- a/src/components/CrashErrorHint/index.js
+++ b/src/components/CrashErrorHint/index.js
@@ -60,7 +60,7 @@ const CrashErrorHint = ({ onReport }) => {
   }, [executeIndex])
 
   return (
-    <Wrapper testId="crashErrorHint" t={themeName}>
+    <Wrapper testid="crashErrorHint" t={themeName}>
       <div />
       <div>
         <Header index={executeIndex} themeName={themeName} />
diff --git a/src/components/CrashErrorHint/styles/index.js b/src/components/CrashErrorHint/styles/index.js
index 632d654a4..ea0c88da8 100755
--- a/src/components/CrashErrorHint/styles/index.js
+++ b/src/components/CrashErrorHint/styles/index.js
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css, theme, themeSkins } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-center', 'justify-between')};
   height: 100vh;
diff --git a/src/components/DigestSentence/index.js b/src/components/DigestSentence/index.js
index 88a03a013..4d1d7d9b3 100755
--- a/src/components/DigestSentence/index.js
+++ b/src/components/DigestSentence/index.js
@@ -16,7 +16,7 @@ import { Wrapper, PreviewWrapper, PreviewText, PreviewIcon } from './styles'
 const log = buildLog('c:DigestSentence:index')
 
 const DigestSentence = ({
-  testId,
+  testid,
   children,
   onPreview,
   top,
@@ -26,7 +26,7 @@ const DigestSentence = ({
 }) => {
   return (
     <Wrapper
-      testId={testId}
+      testid={testid}
       onClick={onPreview}
       top={top}
       bottom={bottom}
@@ -43,7 +43,7 @@ const DigestSentence = ({
 }
 
 DigestSentence.propTypes = {
-  testId: T.string,
+  testid: T.string,
   children: T.oneOfType([T.string, T.node]),
   onPreview: T.func,
   top: T.number,
@@ -53,7 +53,7 @@ DigestSentence.propTypes = {
 }
 
 DigestSentence.defaultProps = {
-  testId: 'digest-sentence',
+  testid: 'digest-sentence',
   children: '可能是最性感的开发者社区，来为你心爱的作品建立...',
   onPreview: log,
   top: 0,
diff --git a/src/components/DigestSentence/styles/index.js b/src/components/DigestSentence/styles/index.js
index edd7ad39e..10ce5676e 100755
--- a/src/components/DigestSentence/styles/index.js
+++ b/src/components/DigestSentence/styles/index.js
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   color: ${theme('thread.articleDigest')};
   font-size: 13px;
diff --git a/src/components/DivideText/index.js b/src/components/DivideText/index.js
index 9072a8ea8..cf47888db 100755
--- a/src/components/DivideText/index.js
+++ b/src/components/DivideText/index.js
@@ -14,9 +14,9 @@ import { Wrapper, Content, LeftLine, RightLine } from './styles'
 /* eslint-disable-next-line */
 const log = buildLog('c:DivideText:index')
 
-const DivideText = ({ testId, children }) => {
+const DivideText = ({ testid, children }) => {
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       <LeftLine />
       <Content>{children}</Content>
       <RightLine />
@@ -25,12 +25,12 @@ const DivideText = ({ testId, children }) => {
 }
 
 DivideText.propTypes = {
-  testId: T.string,
+  testid: T.string,
   children: T.oneOfType([T.string, T.node]).isRequired,
 }
 
 DivideText.defaultProps = {
-  testId: 'divide-text',
+  testid: 'divide-text',
 }
 
 export default React.memo(DivideText)
diff --git a/src/components/DivideText/styles/index.js b/src/components/DivideText/styles/index.js
index 374fd5204..82e792516 100755
--- a/src/components/DivideText/styles/index.js
+++ b/src/components/DivideText/styles/index.js
@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { css } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-center')};
   width: 100%;
diff --git a/src/components/EmailSubscriber/DefaultLayout/index.js b/src/components/EmailSubscriber/DefaultLayout/index.js
index f76f56b01..1676ee87c 100644
--- a/src/components/EmailSubscriber/DefaultLayout/index.js
+++ b/src/components/EmailSubscriber/DefaultLayout/index.js
@@ -10,11 +10,11 @@ import { Wrapper, InnerWrapper } from '../styles/default_layout/index'
 /* eslint-disable-next-line */
 const log = buildLog('c:DefaultLayout:index')
 
-const DefaultLayout = ({ testId, activeByDefault, title, desc }) => {
+const DefaultLayout = ({ testid, activeByDefault, title, desc }) => {
   const [active, setActive] = useState(activeByDefault)
 
   return (
-    <Wrapper testId={testId} active={active}>
+    <Wrapper testid={testid} active={active}>
       <InnerWrapper>
         {!active ? (
           <InActiveView onOpen={() => setActive(true)} />
diff --git a/src/components/EmailSubscriber/index.js b/src/components/EmailSubscriber/index.js
index 45698a8c9..f8ceae344 100755
--- a/src/components/EmailSubscriber/index.js
+++ b/src/components/EmailSubscriber/index.js
@@ -13,7 +13,7 @@ import SimpleLayout from './SimpleLayout'
 import { Wrapper } from './styles'
 
 const EmailSubscriber = ({
-  testId,
+  testid,
   title,
   desc,
   type,
@@ -21,7 +21,7 @@ const EmailSubscriber = ({
   activeByDefault,
 }) => {
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       {type === 'default' ? (
         <DefaultLayout
           activeByDefault={activeByDefault}
@@ -36,7 +36,7 @@ const EmailSubscriber = ({
 }
 
 EmailSubscriber.propTypes = {
-  testId: T.string,
+  testid: T.string,
   title: T.string,
   desc: T.string,
   placeholder: T.string,
@@ -48,7 +48,7 @@ EmailSubscriber.propTypes = {
 }
 
 EmailSubscriber.defaultProps = {
-  testId: 'emailSubscriber',
+  testid: 'emailSubscriber',
   title: '邮件订阅',
   desc: '可随时取消',
   placeholder: '邮件订阅',
diff --git a/src/components/EmailSubscriber/styles/default_layout/index.js b/src/components/EmailSubscriber/styles/default_layout/index.js
index a26d7aa85..63a6ca2ee 100644
--- a/src/components/EmailSubscriber/styles/default_layout/index.js
+++ b/src/components/EmailSubscriber/styles/default_layout/index.js
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('justify-center')};
   position: relative;
diff --git a/src/components/EmailSubscriber/styles/email_hint_icon.js b/src/components/EmailSubscriber/styles/email_hint_icon.js
index 83675eb3b..4650fb5a7 100644
--- a/src/components/EmailSubscriber/styles/email_hint_icon.js
+++ b/src/components/EmailSubscriber/styles/email_hint_icon.js
@@ -6,7 +6,7 @@ import { theme, css, animate } from '@/utils'
 import { Wrapper as ParentWrapper } from './index'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-center')};
 `
diff --git a/src/components/EmailSubscriber/styles/index.js b/src/components/EmailSubscriber/styles/index.js
index f20d35873..61419c1d5 100755
--- a/src/components/EmailSubscriber/styles/index.js
+++ b/src/components/EmailSubscriber/styles/index.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))``
 export const holder = 1
diff --git a/src/components/EmailSubscriber/styles/simple_layout.js b/src/components/EmailSubscriber/styles/simple_layout.js
index 16cde96bd..d01c46139 100644
--- a/src/components/EmailSubscriber/styles/simple_layout.js
+++ b/src/components/EmailSubscriber/styles/simple_layout.js
@@ -5,7 +5,7 @@ import Input from '@/components/Input'
 import { css } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   position: relative;
   background: #022a34;
diff --git a/src/components/ErrorPage/CodeSnippets.js b/src/components/ErrorPage/CodeSnippets.js
index 3592081d5..8ed58302e 100644
--- a/src/components/ErrorPage/CodeSnippets.js
+++ b/src/components/ErrorPage/CodeSnippets.js
@@ -15,7 +15,7 @@ const arrow = '->'
 
 const CodeSnippets = ({ path }) => {
   return (
-    <Wrapper testId="code-snippets">
+    <Wrapper testid="code-snippets">
       <div>
         <KeyToken>case</KeyToken> Page.goto(
         <StringToken>&quot;{path}&quot;</StringToken>)
diff --git a/src/components/ErrorPage/NotFoundMessage.js b/src/components/ErrorPage/NotFoundMessage.js
index 8b4b87d5e..7285e4cda 100755
--- a/src/components/ErrorPage/NotFoundMessage.js
+++ b/src/components/ErrorPage/NotFoundMessage.js
@@ -9,18 +9,18 @@ const NotFoundMessage = ({ metric, path }) => {
   switch (metric) {
     case METRIC.USER:
       return (
-        <HintTitle testId="user-error-title">
+        <HintTitle testid="user-error-title">
           未找到该用户
           {!isEmpty(path) && <span>: {path.split(`/${ROUTE.USER}/`)[1]}</span>}
         </HintTitle>
       )
 
     case METRIC.ARTICLE:
-      return <HintTitle testId="article-error-title">未找到该帖子</HintTitle>
+      return <HintTitle testid="article-error-title">未找到该帖子</HintTitle>
 
     case METRIC.COMMUNITY:
       return (
-        <HintTitle testId="community-error-title">
+        <HintTitle testid="community-error-title">
           未找到社区
           {!isEmpty(path) && <span>: {path}</span>}, 欢迎
           <IssueLink
@@ -34,7 +34,7 @@ const NotFoundMessage = ({ metric, path }) => {
       )
 
     default:
-      return <HintTitle testId="not-found-error-title">未找到该页面</HintTitle>
+      return <HintTitle testid="not-found-error-title">未找到该页面</HintTitle>
   }
 }
 
diff --git a/src/components/ErrorPage/SpinPlanet.js b/src/components/ErrorPage/SpinPlanet.js
index 7defd3a55..77b8c43ab 100644
--- a/src/components/ErrorPage/SpinPlanet.js
+++ b/src/components/ErrorPage/SpinPlanet.js
@@ -4,7 +4,7 @@ import { Wrapper, Planet, Hole } from './styles/spin_planet'
 
 const SpinPlanet = () => {
   return (
-    <Wrapper testId="spin-planet">
+    <Wrapper testid="spin-planet">
       <Planet>
         <Hole />
         <Hole />
diff --git a/src/components/ErrorPage/index.js b/src/components/ErrorPage/index.js
index 2b4181097..a735d053e 100755
--- a/src/components/ErrorPage/index.js
+++ b/src/components/ErrorPage/index.js
@@ -35,13 +35,13 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('c:ErrorPage:index')
 
-const ErrorPage = ({ testId, errorCode, metric, target }) => {
+const ErrorPage = ({ testid, errorCode, metric, target }) => {
   const router = useRouter()
 
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       <Link href="/" passHref>
-        <LogoWrapper testId="site-logo">
+        <LogoWrapper testid="site-logo">
           <SiteLogo src={`${ICON_BASE}/site_logo.svg`} />
           <SiteTitle>CoderPlanets</SiteTitle>
         </LogoWrapper>
@@ -69,14 +69,14 @@ const ErrorPage = ({ testId, errorCode, metric, target }) => {
 }
 
 ErrorPage.propTypes = {
-  testId: T.string,
+  testid: T.string,
   errorCode: T.oneOf([404, 500]),
   metric: T.oneOf(values(METRIC)),
   target: T.string,
 }
 
 ErrorPage.defaultProps = {
-  testId: 'error-page',
+  testid: 'error-page',
   errorCode: 404,
   metric: METRIC.COMMUNITY,
   target: '',
diff --git a/src/components/ErrorPage/styles/code_snippets.js b/src/components/ErrorPage/styles/code_snippets.js
index be3323635..32e68f5c9 100644
--- a/src/components/ErrorPage/styles/code_snippets.js
+++ b/src/components/ErrorPage/styles/code_snippets.js
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { theme, css } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-start')};
   color: ${theme('thread.articleTitle')};
diff --git a/src/components/ErrorPage/styles/index.js b/src/components/ErrorPage/styles/index.js
index 5f7cc289c..0a32f1c01 100755
--- a/src/components/ErrorPage/styles/index.js
+++ b/src/components/ErrorPage/styles/index.js
@@ -6,7 +6,7 @@ import Img from '@/Img'
 // import PromptIcon from '@/components/PromptIcon'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-center', 'justify-between')};
   height: 100vh;
@@ -16,7 +16,7 @@ export const Wrapper = styled.div.attrs((props) => ({
   background: rgba(0,59,74, 0.5);
 `
 export const LogoWrapper = styled.a.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-center')};
   margin-top: 20px;
@@ -43,7 +43,7 @@ export const TextWrapper = styled.div`
   margin-left: 115px;
 `
 export const HintTitle = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   color: ${theme('thread.articleTitle')};
   text-align: center;
diff --git a/src/components/ErrorPage/styles/spin_planet.js b/src/components/ErrorPage/styles/spin_planet.js
index 6c3284690..96e40bfbb 100644
--- a/src/components/ErrorPage/styles/spin_planet.js
+++ b/src/components/ErrorPage/styles/spin_planet.js
@@ -7,7 +7,7 @@ import { animate } from '@/utils'
 // see prototype in https://codepen.io/wwwebneko/pen/EyVbNe?__cf_chl_jschl_tk__=ea42fea4f3c12831123e6fa4871dc371d884b80f-1605582431-0-AaCbC_IecQcmQJpGB6rg-2q9uxuSjlmFbcwTbWrygu5jSC4fR6LX5l9MIHgbof5AmzFauO0FLQ-L1S9PZh6cdIEobYpUeQvMiWSXIuSZCAfF6BNN08alDBF-232m6NnwzRfU1nF3s8xRfJa0e5e0X8PKBdyDtttVkr8HC1XwZejcBIGKqT7-RoK_PWgLxNGbwAbIeCrgi3xU72sZ3ArdGEaq55Pgk6IAstRXuqm-4gY8eQNa1VAsH7GPsuWgoP5ooQRAaBPyDMaEPDcoLZMNqe7PePPNx9E-N4F_gTA7ERZFLLZEHk32dH-QCkPO4Dy-ewLmmRz4tGpSZYxYZW9b87JVGRL10Lk3R8H4QOsx3b3UcllTeXWtLX5ojMwWwqtdmRDCN2g6gB5-m5ic445Gkwg
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   position: relative;
   width: 125px;
diff --git a/src/components/ExpandIcon/index.js b/src/components/ExpandIcon/index.js
index f6b2d4c1f..973f08e83 100755
--- a/src/components/ExpandIcon/index.js
+++ b/src/components/ExpandIcon/index.js
@@ -39,7 +39,7 @@ const ExpandIcon = ({
       onShow={() => setActive(true)}
     >
       <Wrapper
-        testId="ExpandIcon"
+        testid="ExpandIcon"
         active={active}
         hideTextOnInit={hideTextOnInit}
       >
diff --git a/src/components/ExpandIcon/styles/index.js b/src/components/ExpandIcon/styles/index.js
index 8856274e0..abf00930c 100755
--- a/src/components/ExpandIcon/styles/index.js
+++ b/src/components/ExpandIcon/styles/index.js
@@ -11,7 +11,7 @@ import {
 } from './metric'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-center')};
   /* margin-left: 12px; */
diff --git a/src/components/FaqPeekList/index.js b/src/components/FaqPeekList/index.js
index defe84454..65d486d4d 100755
--- a/src/components/FaqPeekList/index.js
+++ b/src/components/FaqPeekList/index.js
@@ -45,7 +45,7 @@ const FaqPeekList = ({ active }) => {
   }, [active])
 
   return (
-    <Wrapper testId="faqPeekList" active={active}>
+    <Wrapper testid="faqPeekList" active={active}>
       {active && <ArrowIcon src={`${ICON}/shape/arrow-solid.svg`} />}
       <ContentWrapper active={showContent}>
         <LinksCard
diff --git a/src/components/FaqPeekList/styles/index.js b/src/components/FaqPeekList/styles/index.js
index a9be03187..3ec5770b4 100755
--- a/src/components/FaqPeekList/styles/index.js
+++ b/src/components/FaqPeekList/styles/index.js
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   position: relative;
   max-height: ${({ active }) => (active ? '220px' : '0')};
diff --git a/src/components/FiltersMenu/index.js b/src/components/FiltersMenu/index.js
index cf455f842..aef271f2b 100755
--- a/src/components/FiltersMenu/index.js
+++ b/src/components/FiltersMenu/index.js
@@ -34,7 +34,7 @@ const initActiveMap = (items) => {
 const FiltersMenu = ({
   title,
   items,
-  activeId,
+  activeid,
   noFilter,
   onItemClick,
   itemBgHighlight,
@@ -42,7 +42,7 @@ const FiltersMenu = ({
   withDivider,
 }) => {
   // const [expandMenuId, setExpandMenuId] = useState(null)
-  const [expandMenuId, setExpandMenuId] = useState(activeId)
+  const [expandMenuId, setExpandMenuId] = useState(activeid)
   const [activeMap, setActiveMap] = useState(initActiveMap(items))
 
   const handleReset = useCallback(() => {
@@ -123,7 +123,7 @@ FiltersMenu.propTypes = {
       ),
     }),
   ).isRequired,
-  activeId: T.oneOfType([T.string, T.instanceOf(null)]),
+  activeid: T.oneOfType([T.string, T.instanceOf(null)]),
   noFilter: T.bool,
   onItemClick: T.func,
   itemBgHighlight: T.bool,
@@ -133,7 +133,7 @@ FiltersMenu.propTypes = {
 
 FiltersMenu.defaultProps = {
   title: '',
-  activeId: null,
+  activeid: null,
   noFilter: false,
   onItemClick: log,
   itemBgHighlight: true,
diff --git a/src/components/FiltersMenu/styles/header.js b/src/components/FiltersMenu/styles/header.js
index 2c923e691..6ed73ba63 100644
--- a/src/components/FiltersMenu/styles/header.js
+++ b/src/components/FiltersMenu/styles/header.js
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-center', 'justify-between')}
   width: 100%;
diff --git a/src/components/Folder/index.js b/src/components/Folder/index.js
index 2c30339fc..ec5a7fda1 100755
--- a/src/components/Folder/index.js
+++ b/src/components/Folder/index.js
@@ -34,7 +34,7 @@ const Folder = ({
   onSelect,
 }) => {
   return (
-    <Wrapper testId="folder" size={size}>
+    <Wrapper testid="folder" size={size}>
       {editable && (
         <EditIconWrapper onClick={onEdit}>
           <EditIcon src={`${ICON_CMD}/edit.svg`} />
diff --git a/src/components/Folder/styles/index.js b/src/components/Folder/styles/index.js
index 768555313..0a82c020c 100755
--- a/src/components/Folder/styles/index.js
+++ b/src/components/Folder/styles/index.js
@@ -6,7 +6,7 @@ import { css, theme } from '@/utils'
 import { getWidth, getHeight } from './metric'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   position: relative;
   ${css.flexColumn()};
diff --git a/src/components/GotoTop/index.js b/src/components/GotoTop/index.js
index 77c898bc0..b6e07aa76 100755
--- a/src/components/GotoTop/index.js
+++ b/src/components/GotoTop/index.js
@@ -12,9 +12,9 @@ import { scrollToHeader } from '@/utils'
 
 import { Wrapper, Icon, Hint } from './styles'
 
-const GotoTop = ({ testId }) => {
+const GotoTop = ({ testid }) => {
   return (
-    <Wrapper testId={testId} onClick={scrollToHeader}>
+    <Wrapper testid={testid} onClick={scrollToHeader}>
       <Icon src={`${ICON}/shape/air-balloon.svg`} />
       <Hint>回到顶部</Hint>
     </Wrapper>
@@ -22,11 +22,11 @@ const GotoTop = ({ testId }) => {
 }
 
 GotoTop.propTypes = {
-  testId: T.string,
+  testid: T.string,
 }
 
 GotoTop.defaultProps = {
-  testId: 'goto-top',
+  testid: 'goto-top',
 }
 
 export default React.memo(GotoTop)
diff --git a/src/components/GotoTop/styles/index.js b/src/components/GotoTop/styles/index.js
index f24384a15..9cbe0342d 100755
--- a/src/components/GotoTop/styles/index.js
+++ b/src/components/GotoTop/styles/index.js
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-both')};
   ${css.size(30)};
diff --git a/src/components/IconText/index.js b/src/components/IconText/index.js
index 741136205..dae91707e 100755
--- a/src/components/IconText/index.js
+++ b/src/components/IconText/index.js
@@ -17,7 +17,7 @@ import { Wrapper, Icon, Text } from './styles'
 const log = buildLog('c:IconText:index')
 
 const IconText = ({ iconSrc, round, children, size, margin }) => (
-  <Wrapper testId="iconText">
+  <Wrapper testid="iconText">
     {!nilOrEmpty(iconSrc) && (
       <Icon src={iconSrc} size={size} round={round} margin={margin} />
     )}
diff --git a/src/components/IconText/styles/index.js b/src/components/IconText/styles/index.js
index 5fa42b637..b0210d00c 100755
--- a/src/components/IconText/styles/index.js
+++ b/src/components/IconText/styles/index.js
@@ -6,7 +6,7 @@ import { css, theme } from '@/utils'
 import { getIconSize, getTextSize, getMargin } from './metric'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-center')};
 `
diff --git a/src/components/ImgFallback/Avatar.js b/src/components/ImgFallback/Avatar.js
index 57353d46f..b8fb81299 100644
--- a/src/components/ImgFallback/Avatar.js
+++ b/src/components/ImgFallback/Avatar.js
@@ -15,7 +15,7 @@ import { Wrapper, Name } from './styles/avatar'
 const log = buildLog('c:ImgFallback:Avatar')
 
 const Avatar = ({
-  testId,
+  testid,
   className,
   size,
   user,
@@ -31,7 +31,7 @@ const Avatar = ({
   return (
     <Wrapper
       className={className}
-      testId={testId}
+      testid={testid}
       size={size}
       left={left}
       right={right}
@@ -45,7 +45,7 @@ const Avatar = ({
 }
 
 Avatar.propTypes = {
-  testId: T.string,
+  testid: T.string,
   className: T.string,
   user: T.shape({
     nickname: T.string,
@@ -59,7 +59,7 @@ Avatar.propTypes = {
 }
 
 Avatar.defaultProps = {
-  testId: 'avatar-fallback',
+  testid: 'avatar-fallback',
   className: '',
   size: 15,
   user: {
diff --git a/src/components/ImgFallback/styles/avatar.js b/src/components/ImgFallback/styles/avatar.js
index cc6f82061..ffaa1cc1a 100644
--- a/src/components/ImgFallback/styles/avatar.js
+++ b/src/components/ImgFallback/styles/avatar.js
@@ -5,7 +5,7 @@ import { css, theme } from '@/utils'
 import { getFontSize } from './metric/avatar'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-both')};
   color: ${theme('thread.articleTitle')};
diff --git a/src/components/ImgFallback/styles/index.js b/src/components/ImgFallback/styles/index.js
index a8221d394..6b28e2d43 100755
--- a/src/components/ImgFallback/styles/index.js
+++ b/src/components/ImgFallback/styles/index.js
@@ -4,6 +4,6 @@ import styled from 'styled-components'
 // import { theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))``
 export const Title = styled.div``
diff --git a/src/components/ImgFallback/styles/work.js b/src/components/ImgFallback/styles/work.js
index e4d74f126..0f4a1a096 100644
--- a/src/components/ImgFallback/styles/work.js
+++ b/src/components/ImgFallback/styles/work.js
@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { css } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-center', 'justify-between')};
   width: 70px;
diff --git a/src/components/Input/Textarea.js b/src/components/Input/Textarea.js
index 4221dda96..1ada89659 100644
--- a/src/components/Input/Textarea.js
+++ b/src/components/Input/Textarea.js
@@ -15,13 +15,13 @@ import { Wrapper } from './styles/textarea'
 /* eslint-disable-next-line */
 const log = buildLog('c:Input:index')
 
-const Textarea = ({ onChange, testId, ...restProps }) => {
+const Textarea = ({ onChange, testid, ...restProps }) => {
   const handleOnChange = useCallback((e) => onChange && onChange(e), [onChange])
   const validProps = pickBy((v) => v !== null, restProps)
 
   return (
     <Wrapper
-      testId={testId}
+      testid={testid}
       onChange={handleOnChange}
       minRows={1}
       spellcheck="false"
@@ -36,7 +36,7 @@ Textarea.propTypes = {
   onChange: T.oneOfType([T.func, T.instanceOf(null)]),
   disabled: T.bool,
   autoFocus: T.bool,
-  testId: T.string,
+  testid: T.string,
 }
 
 Textarea.defaultProps = {
@@ -45,7 +45,7 @@ Textarea.defaultProps = {
   onChange: null,
   disabled: false,
   autoFocus: false,
-  testId: 'input',
+  testid: 'input',
 }
 
 export default React.memo(Textarea)
diff --git a/src/components/Input/index.js b/src/components/Input/index.js
index a8f7d323c..44161e2aa 100755
--- a/src/components/Input/index.js
+++ b/src/components/Input/index.js
@@ -29,14 +29,14 @@ const Input = ({
   prefixActive,
   suffixIcon,
   suffixActive,
-  testId,
+  testid,
   ...restProps
 }) => {
   const handleOnChange = useCallback((e) => onChange && onChange(e), [onChange])
   const validProps = pickBy((v) => v !== null, restProps)
 
   return behavior === 'default' ? (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       <PrefixWrapper show={!nilOrEmpty(prefixIcon)}>
         {prefixIcon && <Icon src={prefixIcon} active={prefixActive} />}
       </PrefixWrapper>
@@ -53,7 +53,7 @@ const Input = ({
       </SuffixWrapper>
     </Wrapper>
   ) : (
-    <Textarea testId={testId} onChange={onChange} minRows={1} {...restProps} />
+    <Textarea testid={testid} onChange={onChange} minRows={1} {...restProps} />
   )
 }
 
@@ -68,7 +68,7 @@ Input.propTypes = {
   suffixActive: T.bool,
   disabled: T.bool,
   autoFocus: T.bool,
-  testId: T.string,
+  testid: T.string,
 }
 
 Input.defaultProps = {
@@ -82,7 +82,7 @@ Input.defaultProps = {
   suffixActive: false,
   disabled: false,
   autoFocus: false,
-  testId: 'input',
+  testid: 'input',
 }
 
 export default React.memo(Input)
diff --git a/src/components/Input/styles/index.js b/src/components/Input/styles/index.js
index 9b63410cc..35a44b8cb 100755
--- a/src/components/Input/styles/index.js
+++ b/src/components/Input/styles/index.js
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   position: relative;
   width: 100%;
diff --git a/src/components/Input/styles/textarea.js b/src/components/Input/styles/textarea.js
index 18d8f7755..5c674ed82 100644
--- a/src/components/Input/styles/textarea.js
+++ b/src/components/Input/styles/textarea.js
@@ -6,7 +6,7 @@ import { theme } from '@/utils'
 import { baseInput } from './index'
 
 export const Wrapper = styled(TextareaAutosize).attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${baseInput};
   background-color: #0b2631;
diff --git a/src/components/LinksCard/index.js b/src/components/LinksCard/index.js
index 0dcccd837..cccb2ad3e 100755
--- a/src/components/LinksCard/index.js
+++ b/src/components/LinksCard/index.js
@@ -18,7 +18,7 @@ import { Wrapper, Header, Title, ListWrapper, MoreWrapper } from './styles'
 const log = buildLog('c:LinksCard:index')
 
 const LinksCard = ({
-  testId,
+  testid,
   title,
   items,
   onSelect,
@@ -27,7 +27,7 @@ const LinksCard = ({
   mBottom,
 }) => {
   return (
-    <Wrapper testId={testId} mLeft={mLeft} mRight={mRight} mBottom={mBottom}>
+    <Wrapper testid={testid} mLeft={mLeft} mRight={mRight} mBottom={mBottom}>
       <Header>
         <Title>{title}</Title>
       </Header>
@@ -52,11 +52,11 @@ const LinksCard = ({
 }
 
 LinksCard.propTypes = {
-  testId: T.string,
+  testid: T.string,
   title: T.string,
   items: T.arrayOf(
     T.shape({
-      id: T.number,
+      id: T.string,
       title: T.string,
     }),
   ),
@@ -67,7 +67,7 @@ LinksCard.propTypes = {
 }
 
 LinksCard.defaultProps = {
-  testId: 'links-card',
+  testid: 'links-card',
   title: '',
   items: [],
 
diff --git a/src/components/Modal/styles/belt.js b/src/components/Modal/styles/belt.ts
similarity index 100%
rename from src/components/Modal/styles/belt.js
rename to src/components/Modal/styles/belt.ts
diff --git a/src/components/Modal/styles/index.js b/src/components/Modal/styles/index.ts
similarity index 95%
rename from src/components/Modal/styles/index.js
rename to src/components/Modal/styles/index.ts
index becc2ac72..a9777e446 100755
--- a/src/components/Modal/styles/index.js
+++ b/src/components/Modal/styles/index.ts
@@ -53,7 +53,7 @@ export const CloseBtn = styled(Img)`
   z-index: ${css.zIndex.modalCloseBtn};
 
   &:hover {
-    animation: ${animate.rotate360Close} 2s cubic-bezier(0, 0.56, 0.24, 0.72);
+    animation: ${animate.rotate360} 2s cubic-bezier(0, 0.56, 0.24, 0.72);
     font-weight: bold;
     cursor: pointer;
   }
diff --git a/src/components/NaviCatalog/index.js b/src/components/NaviCatalog/index.js
index ff173651e..595a6def4 100755
--- a/src/components/NaviCatalog/index.js
+++ b/src/components/NaviCatalog/index.js
@@ -39,7 +39,7 @@ const NaviCatalog = ({
   showMoreItem,
   showItemTotal,
   onShowMore,
-  testId,
+  testid,
 }) => {
   const [menuMode, setMenuMode] = useState(ROOT_MENU)
   // 当前选中的目录 id, 不包括在其链路上的 id
@@ -161,7 +161,7 @@ const NaviCatalog = ({
   )
 
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       <Header
         title={title}
         activeCatalogId={activeCatalogId}
@@ -221,7 +221,7 @@ NaviCatalog.propTypes = {
   // 是否显示每个目录项的条目总数
   showItemTotal: T.bool,
   onShowMore: T.oneOfType([T.func, T.instanceOf(null)]),
-  testId: T.string,
+  testid: T.string,
 }
 
 NaviCatalog.defaultProps = {
@@ -232,7 +232,7 @@ NaviCatalog.defaultProps = {
   showMoreItem: false,
   showItemTotal: false,
   onShowMore: null,
-  testId: 'navi-menu',
+  testid: 'navi-menu',
   title: '',
 }
 
diff --git a/src/components/NaviCatalog/styles/dashboard.js b/src/components/NaviCatalog/styles/dashboard.ts
similarity index 100%
rename from src/components/NaviCatalog/styles/dashboard.js
rename to src/components/NaviCatalog/styles/dashboard.ts
diff --git a/src/components/NaviCatalog/styles/header.js b/src/components/NaviCatalog/styles/header.ts
similarity index 97%
rename from src/components/NaviCatalog/styles/header.js
rename to src/components/NaviCatalog/styles/header.ts
index 8de177aea..296b12f9e 100644
--- a/src/components/NaviCatalog/styles/header.js
+++ b/src/components/NaviCatalog/styles/header.ts
@@ -6,7 +6,7 @@ import { css, theme } from '@/utils'
 const activeColor = '#009C9E'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-center', 'justify-between')}
   width: 100%;
diff --git a/src/components/NaviCatalog/styles/index.js b/src/components/NaviCatalog/styles/index.ts
similarity index 97%
rename from src/components/NaviCatalog/styles/index.js
rename to src/components/NaviCatalog/styles/index.ts
index 5118f6c55..f0df3416a 100755
--- a/src/components/NaviCatalog/styles/index.js
+++ b/src/components/NaviCatalog/styles/index.ts
@@ -8,7 +8,7 @@ import { WIDTH } from './metric'
 const activeColor = '#009C9E'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   width: ${WIDTH};
 `
diff --git a/src/components/NaviCatalog/styles/list/index.js b/src/components/NaviCatalog/styles/list/index.js
index b603c48aa..c0a92e8f9 100644
--- a/src/components/NaviCatalog/styles/list/index.js
+++ b/src/components/NaviCatalog/styles/list/index.js
@@ -6,7 +6,7 @@ import { css, theme } from '@/utils'
 const activeColor = '#009C9E'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   padding-bottom: 10px;
 
diff --git a/src/components/NaviCatalog/styles/pin_number.js b/src/components/NaviCatalog/styles/pin_number.ts
similarity index 100%
rename from src/components/NaviCatalog/styles/pin_number.js
rename to src/components/NaviCatalog/styles/pin_number.ts
diff --git a/src/components/NaviIntro/index.js b/src/components/NaviIntro/index.js
index 055df9d8c..fa5620604 100755
--- a/src/components/NaviIntro/index.js
+++ b/src/components/NaviIntro/index.js
@@ -14,9 +14,9 @@ import { Wrapper, Logo, Digest, Title, Desc } from './styles'
 /* eslint-disable-next-line */
 const log = buildLog('c:NaviIntro:index')
 
-const NaviIntro = ({ title, desc, iconSrc, testId }) => {
+const NaviIntro = ({ title, desc, iconSrc, testid }) => {
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       <Logo src={iconSrc} />
       <Digest>
         <Title>{title}</Title>
@@ -30,11 +30,11 @@ NaviIntro.propTypes = {
   title: T.string.isRequired,
   desc: T.string.isRequired,
   iconSrc: T.string.isRequired,
-  testId: T.string,
+  testid: T.string,
 }
 
 NaviIntro.defaultProps = {
-  testId: 'navi-intro',
+  testid: 'navi-intro',
 }
 
 export default React.memo(NaviIntro)
diff --git a/src/components/NaviIntro/styles/index.js b/src/components/NaviIntro/styles/index.ts
similarity index 95%
rename from src/components/NaviIntro/styles/index.js
rename to src/components/NaviIntro/styles/index.ts
index acb9ffaf9..13ca94a4b 100755
--- a/src/components/NaviIntro/styles/index.js
+++ b/src/components/NaviIntro/styles/index.ts
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-center')};
   margin-bottom: 15px;
diff --git a/src/components/Navigator/MainEntries/DesktopView.js b/src/components/Navigator/MainEntries/DesktopView.js
index e41c4dd9d..f375da1ee 100644
--- a/src/components/Navigator/MainEntries/DesktopView.js
+++ b/src/components/Navigator/MainEntries/DesktopView.js
@@ -22,7 +22,7 @@ const DesktopView = ({ type }) => {
       <Link href={`/${ROUTE.DISCOVERY}`} passHref>
         <SiteLink
           active={mainPath === ROUTE.DISCOVERY}
-          testId="header-discovery-link"
+          testid="header-discovery-link"
         >
           发现
         </SiteLink>
@@ -44,7 +44,7 @@ const DesktopView = ({ type }) => {
       <Link href={`/${ROUTE.COOL_GUIDE}`} passHref>
         <SiteLink
           active={mainPath === ROUTE.COOL_GUIDE}
-          testId={`header-${ROUTE.COOL_GUIDE}`}
+          testid={`header-${ROUTE.COOL_GUIDE}`}
         >
           酷导游
         </SiteLink>
@@ -61,7 +61,7 @@ const DesktopView = ({ type }) => {
       <Link href={`/${ROUTE.HAVE_A_DRINK}`} passHref>
         <SiteLink
           active={mainPath === ROUTE.HAVE_A_DRINK}
-          testId={`header-${ROUTE.HAVE_A_DRINK}`}
+          testid={`header-${ROUTE.HAVE_A_DRINK}`}
         >
           来一杯
         </SiteLink>
diff --git a/src/components/Navigator/styles/brief_view.js b/src/components/Navigator/styles/brief_view.ts
similarity index 100%
rename from src/components/Navigator/styles/brief_view.js
rename to src/components/Navigator/styles/brief_view.ts
diff --git a/src/components/Navigator/styles/card_popover.js b/src/components/Navigator/styles/card_popover.ts
similarity index 100%
rename from src/components/Navigator/styles/card_popover.js
rename to src/components/Navigator/styles/card_popover.ts
diff --git a/src/components/Navigator/styles/index.js b/src/components/Navigator/styles/index.ts
similarity index 100%
rename from src/components/Navigator/styles/index.js
rename to src/components/Navigator/styles/index.ts
diff --git a/src/components/Navigator/styles/main_entries.js b/src/components/Navigator/styles/main_entries.ts
similarity index 97%
rename from src/components/Navigator/styles/main_entries.js
rename to src/components/Navigator/styles/main_entries.ts
index 2bf0cda88..bfc2b00a9 100755
--- a/src/components/Navigator/styles/main_entries.js
+++ b/src/components/Navigator/styles/main_entries.ts
@@ -20,7 +20,7 @@ export const DotDivider = styled(DotDividerBase)`
   height: 4px;
 `
 export const SiteLink = styled.a.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-center')};
   color: ${({ active }) =>
diff --git a/src/components/Navigator/styles/more_panel/footer.js b/src/components/Navigator/styles/more_panel/footer.ts
similarity index 100%
rename from src/components/Navigator/styles/more_panel/footer.js
rename to src/components/Navigator/styles/more_panel/footer.ts
diff --git a/src/components/Navigator/styles/more_panel/index.js b/src/components/Navigator/styles/more_panel/index.ts
similarity index 100%
rename from src/components/Navigator/styles/more_panel/index.js
rename to src/components/Navigator/styles/more_panel/index.ts
diff --git a/src/components/Navigator/styles/more_panel/mobile_view.js b/src/components/Navigator/styles/more_panel/mobile_view.ts
similarity index 100%
rename from src/components/Navigator/styles/more_panel/mobile_view.js
rename to src/components/Navigator/styles/more_panel/mobile_view.ts
diff --git a/src/components/PagedContents/styles/community_recommends.js b/src/components/PagedContents/styles/community_recommends.ts
similarity index 100%
rename from src/components/PagedContents/styles/community_recommends.js
rename to src/components/PagedContents/styles/community_recommends.ts
diff --git a/src/components/Pagi/styles/index.js b/src/components/Pagi/styles/index.ts
similarity index 100%
rename from src/components/Pagi/styles/index.js
rename to src/components/Pagi/styles/index.ts
diff --git a/src/components/Pagi/styles/next/bottom.js b/src/components/Pagi/styles/next/bottom.ts
similarity index 100%
rename from src/components/Pagi/styles/next/bottom.js
rename to src/components/Pagi/styles/next/bottom.ts
diff --git a/src/components/Pagi/styles/next/center.js b/src/components/Pagi/styles/next/center.ts
similarity index 100%
rename from src/components/Pagi/styles/next/center.js
rename to src/components/Pagi/styles/next/center.ts
diff --git a/src/components/Pagi/styles/perv/bottom.js b/src/components/Pagi/styles/perv/bottom.ts
similarity index 100%
rename from src/components/Pagi/styles/perv/bottom.js
rename to src/components/Pagi/styles/perv/bottom.ts
diff --git a/src/components/Pagi/styles/perv/center.js b/src/components/Pagi/styles/perv/center.ts
similarity index 100%
rename from src/components/Pagi/styles/perv/center.js
rename to src/components/Pagi/styles/perv/center.ts
diff --git a/src/components/PostItem/styles/digest_view/body.js b/src/components/PostItem/styles/digest_view/body.ts
similarity index 100%
rename from src/components/PostItem/styles/digest_view/body.js
rename to src/components/PostItem/styles/digest_view/body.ts
diff --git a/src/components/PostItem/styles/digest_view/header.js b/src/components/PostItem/styles/digest_view/header.ts
similarity index 100%
rename from src/components/PostItem/styles/digest_view/header.js
rename to src/components/PostItem/styles/digest_view/header.ts
diff --git a/src/components/PostItem/styles/digest_view/index.js b/src/components/PostItem/styles/digest_view/index.ts
similarity index 100%
rename from src/components/PostItem/styles/digest_view/index.js
rename to src/components/PostItem/styles/digest_view/index.ts
diff --git a/src/components/PostItem/styles/index.js b/src/components/PostItem/styles/index.ts
similarity index 100%
rename from src/components/PostItem/styles/index.js
rename to src/components/PostItem/styles/index.ts
diff --git a/src/components/PostItem/styles/list_view.js b/src/components/PostItem/styles/list_view.ts
similarity index 100%
rename from src/components/PostItem/styles/list_view.js
rename to src/components/PostItem/styles/list_view.ts
diff --git a/src/components/PostItem/styles/metrics.js b/src/components/PostItem/styles/metrics.ts
similarity index 80%
rename from src/components/PostItem/styles/metrics.js
rename to src/components/PostItem/styles/metrics.ts
index 373d6f781..a48cdd26a 100644
--- a/src/components/PostItem/styles/metrics.js
+++ b/src/components/PostItem/styles/metrics.ts
@@ -1,4 +1,4 @@
-export const getOpacity = (entry, active, accountInfo) => {
+export const getOpacity = (entry, active, accountInfo): number => {
   const {
     isLogin,
     customization: { markViewed },
diff --git a/src/components/PostItem/styles/mobile_view/body.js b/src/components/PostItem/styles/mobile_view/body.ts
similarity index 100%
rename from src/components/PostItem/styles/mobile_view/body.js
rename to src/components/PostItem/styles/mobile_view/body.ts
diff --git a/src/components/PostItem/styles/mobile_view/footer.js b/src/components/PostItem/styles/mobile_view/footer.ts
similarity index 100%
rename from src/components/PostItem/styles/mobile_view/footer.js
rename to src/components/PostItem/styles/mobile_view/footer.ts
diff --git a/src/components/PostItem/styles/mobile_view/header.js b/src/components/PostItem/styles/mobile_view/header.ts
similarity index 100%
rename from src/components/PostItem/styles/mobile_view/header.js
rename to src/components/PostItem/styles/mobile_view/header.ts
diff --git a/src/components/PostItem/styles/mobile_view/index.js b/src/components/PostItem/styles/mobile_view/index.ts
similarity index 100%
rename from src/components/PostItem/styles/mobile_view/index.js
rename to src/components/PostItem/styles/mobile_view/index.ts
diff --git a/src/components/PromotionList/styles/holder.js b/src/components/PromotionList/styles/holder.ts
similarity index 100%
rename from src/components/PromotionList/styles/holder.js
rename to src/components/PromotionList/styles/holder.ts
diff --git a/src/components/PromotionList/styles/index.js b/src/components/PromotionList/styles/index.ts
similarity index 100%
rename from src/components/PromotionList/styles/index.js
rename to src/components/PromotionList/styles/index.ts
diff --git a/src/components/PromotionList/styles/partner_banner.js b/src/components/PromotionList/styles/partner_banner.ts
similarity index 100%
rename from src/components/PromotionList/styles/partner_banner.js
rename to src/components/PromotionList/styles/partner_banner.ts
diff --git a/src/components/PromptIcon/styles/index.js b/src/components/PromptIcon/styles/index.ts
similarity index 100%
rename from src/components/PromptIcon/styles/index.js
rename to src/components/PromptIcon/styles/index.ts
diff --git a/src/components/RepoItem/styles/footer.js b/src/components/RepoItem/styles/footer.ts
similarity index 100%
rename from src/components/RepoItem/styles/footer.js
rename to src/components/RepoItem/styles/footer.ts
diff --git a/src/components/RepoItem/styles/header.js b/src/components/RepoItem/styles/header.ts
similarity index 100%
rename from src/components/RepoItem/styles/header.js
rename to src/components/RepoItem/styles/header.ts
diff --git a/src/components/RepoItem/styles/index.js b/src/components/RepoItem/styles/index.ts
similarity index 100%
rename from src/components/RepoItem/styles/index.js
rename to src/components/RepoItem/styles/index.ts
diff --git a/src/components/SearchingLabel/styles/index.js b/src/components/SearchingLabel/styles/index.ts
similarity index 100%
rename from src/components/SearchingLabel/styles/index.js
rename to src/components/SearchingLabel/styles/index.ts
diff --git a/src/components/SectionLabel/styles/index.js b/src/components/SectionLabel/styles/index.ts
similarity index 98%
rename from src/components/SectionLabel/styles/index.js
rename to src/components/SectionLabel/styles/index.ts
index 0867a6cbc..78eb4800f 100755
--- a/src/components/SectionLabel/styles/index.js
+++ b/src/components/SectionLabel/styles/index.ts
@@ -33,7 +33,7 @@ export const Divider = styled.div`
 export const LabelIcon = styled(Img)`
   fill: ${theme('thread.articleDigest')};
   /* fill: ${theme('tabs.headerActive')}; */
-  ${css.size(18)};
+  ${css.size(18)}
   margin-right: 5px;
   margin-left: 5px;
   margin-top: 2px;
diff --git a/src/components/Select/index.js b/src/components/Select/index.js
index 858b80b73..bbaf2b80a 100755
--- a/src/components/Select/index.js
+++ b/src/components/Select/index.js
@@ -20,7 +20,7 @@ import { Wrapper, getSelectStyles } from './styles'
 const log = buildLog('c:Select:index')
 
 const Select = ({
-  testId,
+  testid,
   placeholder,
   options,
   isMulti,
@@ -32,7 +32,7 @@ const Select = ({
   const styles = getSelectStyles(theme)
 
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       <ReactSelect
         options={options}
         placeholder={placeholder}
@@ -48,7 +48,7 @@ const Select = ({
 }
 
 Select.propTypes = {
-  testId: T.string,
+  testid: T.string,
   placeholder: T.string,
   options: T.arrayOf(
     T.shape({
@@ -64,7 +64,7 @@ Select.propTypes = {
 }
 
 Select.defaultProps = {
-  testId: 'select',
+  testid: 'select',
   placeholder: '请选择运行平台',
   onChange: log,
   isMulti: false,
diff --git a/src/components/Select/styles/index.js b/src/components/Select/styles/index.ts
similarity index 96%
rename from src/components/Select/styles/index.js
rename to src/components/Select/styles/index.ts
index 29b26bc04..c460a4745 100755
--- a/src/components/Select/styles/index.js
+++ b/src/components/Select/styles/index.ts
@@ -6,7 +6,7 @@ import { animate, css, theme } from '@/utils'
 export { getSelectStyles } from './metric'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))``
 
 export const BlinkCursor = styled.div`
diff --git a/src/components/Sticky/styles/index.js b/src/components/Sticky/styles/index.ts
similarity index 86%
rename from src/components/Sticky/styles/index.js
rename to src/components/Sticky/styles/index.ts
index a8221d394..6b28e2d43 100755
--- a/src/components/Sticky/styles/index.js
+++ b/src/components/Sticky/styles/index.ts
@@ -4,6 +4,6 @@ import styled from 'styled-components'
 // import { theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))``
 export const Title = styled.div``
diff --git a/src/components/SubTitle/index.js b/src/components/SubTitle/index.js
index 53d137238..083d60af0 100755
--- a/src/components/SubTitle/index.js
+++ b/src/components/SubTitle/index.js
@@ -16,9 +16,9 @@ import { Wrapper, Title, OptionWrapper } from './styles'
 /* eslint-disable-next-line */
 const log = buildLog('c:SubTitle:index')
 
-const SubTitle = ({ testId, children, withMore, moreLink }) => {
+const SubTitle = ({ testid, children, withMore, moreLink }) => {
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       <Title>{children}</Title>
       <OptionWrapper>
         {withMore && (
@@ -38,7 +38,7 @@ const SubTitle = ({ testId, children, withMore, moreLink }) => {
 }
 
 SubTitle.propTypes = {
-  testId: T.string,
+  testid: T.string,
   children: T.oneOfType([T.string, T.node]).isRequired,
   withMore: T.bool,
   moreLink: T.string,
@@ -46,7 +46,7 @@ SubTitle.propTypes = {
 }
 
 SubTitle.defaultProps = {
-  testId: 'subTitle',
+  testid: 'subTitle',
   withMore: false,
   moreLink: '/',
   // className: '',
diff --git a/src/components/SubTitle/styles/index.js b/src/components/SubTitle/styles/index.ts
similarity index 93%
rename from src/components/SubTitle/styles/index.js
rename to src/components/SubTitle/styles/index.ts
index 7ca941772..9e2d45ca2 100755
--- a/src/components/SubTitle/styles/index.js
+++ b/src/components/SubTitle/styles/index.ts
@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-center')};
 `
diff --git a/src/components/Switcher/IconSwitcher.js b/src/components/Switcher/IconSwitcher.js
index 5292d4b95..b3ca131e8 100644
--- a/src/components/Switcher/IconSwitcher.js
+++ b/src/components/Switcher/IconSwitcher.js
@@ -41,7 +41,7 @@ const IconSwitcher = ({ items, activeKey, onChange }) => {
   const slideIndex = findIndex(propEq('key', activeKey), items)
 
   return (
-    <Wrapper testId="selectors">
+    <Wrapper testid="selectors">
       <AccessZone />
       <Tabs>
         {items.map((item) => (
diff --git a/src/components/Switcher/PagiOptionSwitcher/index.js b/src/components/Switcher/PagiOptionSwitcher/index.js
index b193713b3..fd8aab302 100644
--- a/src/components/Switcher/PagiOptionSwitcher/index.js
+++ b/src/components/Switcher/PagiOptionSwitcher/index.js
@@ -53,7 +53,7 @@ const PagiOptionSwitcher = ({ title, items, activeKey, onChange }) => {
   )
 
   return (
-    <Wrapper testId="PagiOptionSwitcher">
+    <Wrapper testid="PagiOptionSwitcher">
       <Title>{title}</Title>
       <IconSwitcher
         items={mappedItems}
diff --git a/src/components/Switcher/Radio.js b/src/components/Switcher/Radio.js
index f79df33a8..39ba122d8 100644
--- a/src/components/Switcher/Radio.js
+++ b/src/components/Switcher/Radio.js
@@ -17,7 +17,7 @@ const log = buildLog('c:Radio:index')
 
 const Radio = ({ items, activeKey, size, onChange }) => {
   return (
-    <Wrapper testId="radio">
+    <Wrapper testid="radio">
       {items.map((item) => (
         <Label
           key={item.key}
diff --git a/src/components/Switcher/Tabs/CardView.js b/src/components/Switcher/Tabs/CardView.js
index 99a19e6b1..817221e3e 100644
--- a/src/components/Switcher/Tabs/CardView.js
+++ b/src/components/Switcher/Tabs/CardView.js
@@ -50,7 +50,7 @@ const Tabs = ({ size, onChange, items, activeKey }) => {
   )
 
   return (
-    <Wrapper testId="tabs">
+    <Wrapper testid="tabs">
       <Nav ref={navRef}>
         {items.map((item, index) => (
           <TabItem
diff --git a/src/components/Switcher/Tabs/DesktopView.js b/src/components/Switcher/Tabs/DesktopView.js
index 1d763d9c8..aa592aaa3 100644
--- a/src/components/Switcher/Tabs/DesktopView.js
+++ b/src/components/Switcher/Tabs/DesktopView.js
@@ -97,7 +97,7 @@ const Tabs = ({ size, onChange, items, activeKey, slipHeight }) => {
   }px`
 
   return (
-    <Wrapper testId="tabs">
+    <Wrapper testid="tabs">
       <Nav ref={navRef}>
         {items.map((item, index) => (
           <TabItem
diff --git a/src/components/Switcher/Tabs/DrawerView.js b/src/components/Switcher/Tabs/DrawerView.js
index b3bf95e06..1769a677a 100644
--- a/src/components/Switcher/Tabs/DrawerView.js
+++ b/src/components/Switcher/Tabs/DrawerView.js
@@ -32,7 +32,7 @@ const Tabs = ({ size, onChange, items, activeKey }) => {
   )
 
   return (
-    <Wrapper testId="tabs">
+    <Wrapper testid="tabs">
       {items.map((item) => (
         <TabItem
           key={isString(item) ? item : item.raw || item.title}
diff --git a/src/components/Switcher/Tabs/MobileView/ExpandView.js b/src/components/Switcher/Tabs/MobileView/ExpandView.js
index 797197347..49a56ee64 100644
--- a/src/components/Switcher/Tabs/MobileView/ExpandView.js
+++ b/src/components/Switcher/Tabs/MobileView/ExpandView.js
@@ -60,7 +60,7 @@ const MobileView = ({ size, onChange, items, activeKey, toggleExpand }) => {
   )
 
   return (
-    <Wrapper testId="tabs">
+    <Wrapper testid="tabs">
       {showMore && (
         <MoreWrapper onClick={toggleExpand}>
           <ArrowIcon src={`${ICON}/shape/arrow-simple.svg`} />
diff --git a/src/components/Switcher/Tabs/MobileView/NormalView.js b/src/components/Switcher/Tabs/MobileView/NormalView.js
index 3172abed3..1a56e0ba6 100644
--- a/src/components/Switcher/Tabs/MobileView/NormalView.js
+++ b/src/components/Switcher/Tabs/MobileView/NormalView.js
@@ -114,7 +114,7 @@ const MobileView = ({
   }px`
 
   return (
-    <Wrapper testId="tabs">
+    <Wrapper testid="tabs">
       {showMore && (
         <MoreWrapper onClick={toggleExpand}>
           <ArrowIcon src={`${ICON}/shape/arrow-simple.svg`} />
diff --git a/src/components/Switcher/Tabs/ModelineView.js b/src/components/Switcher/Tabs/ModelineView.js
index ebd8569d7..dfad199dc 100644
--- a/src/components/Switcher/Tabs/ModelineView.js
+++ b/src/components/Switcher/Tabs/ModelineView.js
@@ -93,7 +93,7 @@ const ModelineView = ({ size, onChange, items, activeKey, slipHeight }) => {
   }px`
 
   return (
-    <Wrapper testId="tabs">
+    <Wrapper testid="tabs">
       <Nav ref={navRef}>
         {items.map((item, index) => (
           <TabItem
diff --git a/src/components/Switcher/styles/icon_selector.js b/src/components/Switcher/styles/icon_selector.ts
similarity index 98%
rename from src/components/Switcher/styles/icon_selector.js
rename to src/components/Switcher/styles/icon_selector.ts
index 7dbe41257..ea18151e8 100644
--- a/src/components/Switcher/styles/icon_selector.js
+++ b/src/components/Switcher/styles/icon_selector.ts
@@ -7,7 +7,7 @@ const width = '28px'
 const height = '25px'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-center')};
   position: relative;
diff --git a/src/components/Switcher/styles/metric/radio.js b/src/components/Switcher/styles/metric/radio.ts
similarity index 62%
rename from src/components/Switcher/styles/metric/radio.js
rename to src/components/Switcher/styles/metric/radio.ts
index 30beb72af..43b62c2a4 100644
--- a/src/components/Switcher/styles/metric/radio.js
+++ b/src/components/Switcher/styles/metric/radio.ts
@@ -1,17 +1,22 @@
 import { theme } from '@/utils'
 import { SIZE } from '@/constant'
 
-export const getActiveBackground = (dimOnActive) => {
+import { TTheme } from '@/types'
+
+export const getActiveBackground = (dimOnActive: boolean): TTheme => {
   return dimOnActive ? '#00414F' : theme('button.primary')
 }
 
-export const getLabelColor = (checked, dimOnActive) => {
+export const getLabelColor = (
+  checked: boolean,
+  dimOnActive: boolean,
+): TTheme => {
   if (dimOnActive) return theme('thread.articleTitle')
 
   return checked ? theme('button.fg') : theme('thread.articleTitle')
 }
 
-export const getLabelFontsize = (size) => {
+export const getLabelFontsize = (size: string): string => {
   switch (size) {
     case SIZE.SMALL: {
       return '12px'
@@ -23,7 +28,7 @@ export const getLabelFontsize = (size) => {
   }
 }
 
-export const getRadioBoxSize = (size) => {
+export const getRadioBoxSize = (size: string): string => {
   switch (size) {
     case SIZE.SMALL: {
       return '12px'
@@ -35,7 +40,7 @@ export const getRadioBoxSize = (size) => {
   }
 }
 
-export const getRadioBoxTop = (size) => {
+export const getRadioBoxTop = (size: string): string => {
   switch (size) {
     case SIZE.SMALL: {
       return '4px'
@@ -47,7 +52,7 @@ export const getRadioBoxTop = (size) => {
   }
 }
 
-export const getRadioBoxLeft = (size) => {
+export const getRadioBoxLeft = (size: string): string => {
   switch (size) {
     case SIZE.SMALL: {
       return '5px'
diff --git a/src/components/Switcher/styles/metric/tabs.js b/src/components/Switcher/styles/metric/tabs.ts
similarity index 63%
rename from src/components/Switcher/styles/metric/tabs.js
rename to src/components/Switcher/styles/metric/tabs.ts
index 810c189b5..ad4b5803e 100644
--- a/src/components/Switcher/styles/metric/tabs.js
+++ b/src/components/Switcher/styles/metric/tabs.ts
@@ -1,6 +1,6 @@
 import { SIZE } from '@/constant'
 
-export const getSlipMargin = (size, mobileView) => {
+export const getSlipMargin = (size: string, mobileView: boolean): number => {
   if (mobileView) return 5
 
   switch (size) {
@@ -13,7 +13,11 @@ export const getSlipMargin = (size, mobileView) => {
   }
 }
 
-export const getMarginRight = (size, mobileView, cardView) => {
+export const getMarginRight = (
+  size: string,
+  mobileView: boolean,
+  cardView: boolean,
+): string => {
   if (mobileView) return '5px'
   if (cardView) return '0'
 
@@ -28,12 +32,12 @@ export const getMarginRight = (size, mobileView, cardView) => {
 }
 
 export const getPadding = (
-  size,
-  cardView,
-  mobileView,
-  wrapMode,
-  modelineView,
-) => {
+  size: string,
+  cardView: boolean,
+  mobileView: boolean,
+  wrapMode: boolean,
+  modelineView: boolean,
+): string => {
   if (cardView) return '2px'
 
   if (modelineView) {
@@ -57,9 +61,12 @@ export const getPadding = (
   }
 }
 
-export const getMarginBottom = (cardView, wrapMode) => {
+export const getMarginBottom = (
+  cardView: boolean,
+  wrapMode: boolean,
+): string => {
   if (cardView) return '8px'
   if (wrapMode) return '4px'
 
-  return 0
+  return '0'
 }
diff --git a/src/components/Switcher/styles/pagi_option_selector/gallery_base.js b/src/components/Switcher/styles/pagi_option_selector/gallery_base.ts
similarity index 100%
rename from src/components/Switcher/styles/pagi_option_selector/gallery_base.js
rename to src/components/Switcher/styles/pagi_option_selector/gallery_base.ts
diff --git a/src/components/Switcher/styles/pagi_option_selector/index.js b/src/components/Switcher/styles/pagi_option_selector/index.ts
similarity index 100%
rename from src/components/Switcher/styles/pagi_option_selector/index.js
rename to src/components/Switcher/styles/pagi_option_selector/index.ts
diff --git a/src/components/Switcher/styles/pagi_option_selector/main_column.js b/src/components/Switcher/styles/pagi_option_selector/main_column.ts
similarity index 100%
rename from src/components/Switcher/styles/pagi_option_selector/main_column.js
rename to src/components/Switcher/styles/pagi_option_selector/main_column.ts
diff --git a/src/components/Switcher/styles/pagi_option_selector/masonry_column.js b/src/components/Switcher/styles/pagi_option_selector/masonry_column.ts
similarity index 100%
rename from src/components/Switcher/styles/pagi_option_selector/masonry_column.js
rename to src/components/Switcher/styles/pagi_option_selector/masonry_column.ts
diff --git a/src/components/Switcher/styles/pagi_option_selector/three_column.js b/src/components/Switcher/styles/pagi_option_selector/three_column.ts
similarity index 100%
rename from src/components/Switcher/styles/pagi_option_selector/three_column.js
rename to src/components/Switcher/styles/pagi_option_selector/three_column.ts
diff --git a/src/components/Switcher/styles/pagi_option_selector/two_column.js b/src/components/Switcher/styles/pagi_option_selector/two_column.ts
similarity index 100%
rename from src/components/Switcher/styles/pagi_option_selector/two_column.js
rename to src/components/Switcher/styles/pagi_option_selector/two_column.ts
diff --git a/src/components/Switcher/styles/radio.js b/src/components/Switcher/styles/radio.ts
similarity index 95%
rename from src/components/Switcher/styles/radio.js
rename to src/components/Switcher/styles/radio.ts
index cbf643e5f..8c5198826 100644
--- a/src/components/Switcher/styles/radio.js
+++ b/src/components/Switcher/styles/radio.ts
@@ -12,10 +12,10 @@ import {
 } from './metric/radio'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   /* position: relative; */
-  ${css.flex('align-center')};
+  ${css.flex('align-center')}
 `
 export const Label = styled.label`
   position: relative;
diff --git a/src/components/Switcher/styles/tabs/drawer_view.js b/src/components/Switcher/styles/tabs/drawer_view.ts
similarity index 96%
rename from src/components/Switcher/styles/tabs/drawer_view.js
rename to src/components/Switcher/styles/tabs/drawer_view.ts
index fe435e144..c668821a7 100644
--- a/src/components/Switcher/styles/tabs/drawer_view.js
+++ b/src/components/Switcher/styles/tabs/drawer_view.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.nav.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-center')};
   position: relative;
diff --git a/src/components/Switcher/styles/tabs/index.js b/src/components/Switcher/styles/tabs/index.ts
similarity index 96%
rename from src/components/Switcher/styles/tabs/index.js
rename to src/components/Switcher/styles/tabs/index.ts
index 9fa551879..4b6540b15 100755
--- a/src/components/Switcher/styles/tabs/index.js
+++ b/src/components/Switcher/styles/tabs/index.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css } from '@/utils'
 
 export const Wrapper = styled.nav.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   position: relative;
   overflow: hidden;
diff --git a/src/components/Switcher/styles/tabs/local_icon.js b/src/components/Switcher/styles/tabs/local_icon.ts
similarity index 100%
rename from src/components/Switcher/styles/tabs/local_icon.js
rename to src/components/Switcher/styles/tabs/local_icon.ts
diff --git a/src/components/Switcher/styles/tabs/mobile_view/expand_view.js b/src/components/Switcher/styles/tabs/mobile_view/expand_view.ts
similarity index 95%
rename from src/components/Switcher/styles/tabs/mobile_view/expand_view.js
rename to src/components/Switcher/styles/tabs/mobile_view/expand_view.ts
index 0497e6869..0e73e220f 100644
--- a/src/components/Switcher/styles/tabs/mobile_view/expand_view.js
+++ b/src/components/Switcher/styles/tabs/mobile_view/expand_view.ts
@@ -6,7 +6,7 @@ import { css, theme } from '@/utils'
 import { Nav as NavBase } from '../index'
 
 export const Wrapper = styled.nav.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   position: relative;
   width: 100%;
diff --git a/src/components/Switcher/styles/tabs/mobile_view/normal_view.js b/src/components/Switcher/styles/tabs/mobile_view/normal_view.ts
similarity index 97%
rename from src/components/Switcher/styles/tabs/mobile_view/normal_view.js
rename to src/components/Switcher/styles/tabs/mobile_view/normal_view.ts
index 6c4f073f5..180d58d17 100644
--- a/src/components/Switcher/styles/tabs/mobile_view/normal_view.js
+++ b/src/components/Switcher/styles/tabs/mobile_view/normal_view.ts
@@ -10,7 +10,7 @@ import {
 } from '../index'
 
 export const Wrapper = styled.nav.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   position: relative;
   width: 100%;
diff --git a/src/components/Switcher/styles/tabs/tab_icon.js b/src/components/Switcher/styles/tabs/tab_icon.ts
similarity index 100%
rename from src/components/Switcher/styles/tabs/tab_icon.js
rename to src/components/Switcher/styles/tabs/tab_icon.ts
diff --git a/src/components/Switcher/styles/tabs/tab_item.js b/src/components/Switcher/styles/tabs/tab_item.ts
similarity index 97%
rename from src/components/Switcher/styles/tabs/tab_item.js
rename to src/components/Switcher/styles/tabs/tab_item.ts
index 7e7ab6faa..91b8a46a3 100644
--- a/src/components/Switcher/styles/tabs/tab_item.js
+++ b/src/components/Switcher/styles/tabs/tab_item.ts
@@ -34,7 +34,7 @@ export const Wrapper = styled.div`
     cardView && active ? '8px' : ''};
 
   ${css.media.mobile`
-    margin-right: ${() => getMarginRight('', true)};
+    margin-right: ${() => getMarginRight('', true, false)};
   `};
 
   transition: all 0.25s;
diff --git a/src/components/TabBar/styles/desktop_view/brief_view.js b/src/components/TabBar/styles/desktop_view/brief_view.ts
similarity index 100%
rename from src/components/TabBar/styles/desktop_view/brief_view.js
rename to src/components/TabBar/styles/desktop_view/brief_view.ts
diff --git a/src/components/TabSelector/styles/index.js b/src/components/TabSelector/styles/index.ts
similarity index 100%
rename from src/components/TabSelector/styles/index.js
rename to src/components/TabSelector/styles/index.ts
diff --git a/src/components/Tag/index.js b/src/components/Tag/index.js
index 345065b2e..29c21d33b 100755
--- a/src/components/Tag/index.js
+++ b/src/components/Tag/index.js
@@ -19,7 +19,7 @@ const Tag = ({ children, onClose }) => {
   const closeable = onClose !== null
 
   return (
-    <Wrapper testId="tag" closeable={closeable}>
+    <Wrapper testid="tag" closeable={closeable}>
       {children}
       {closeable && (
         <div onClick={onClose}>
diff --git a/src/components/Tag/styles/index.js b/src/components/Tag/styles/index.ts
similarity index 96%
rename from src/components/Tag/styles/index.js
rename to src/components/Tag/styles/index.ts
index fe90ae6ac..4c55ca1fe 100755
--- a/src/components/Tag/styles/index.js
+++ b/src/components/Tag/styles/index.ts
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-both')};
   font-size: 14px;
diff --git a/src/components/TheAvatar/index.js b/src/components/TheAvatar/index.js
index eb9ac9e20..35d43fd12 100755
--- a/src/components/TheAvatar/index.js
+++ b/src/components/TheAvatar/index.js
@@ -19,7 +19,7 @@ import { Wrapper } from './styles'
 /* eslint-disable-next-line */
 const log = buildLog('c:TheAvatar:index')
 
-const TheAvatar = ({ testId, user, metric, onSelect }) => {
+const TheAvatar = ({ testid, user, metric, onSelect }) => {
   switch (metric) {
     case TYPE.POST_ITEM: {
       return <PostItemAvatar user={user} onSelect={onSelect} />
@@ -29,7 +29,7 @@ const TheAvatar = ({ testId, user, metric, onSelect }) => {
     }
     default: {
       return (
-        <Wrapper testId={testId}>
+        <Wrapper testid={testid}>
           <div>?</div>
         </Wrapper>
       )
@@ -38,7 +38,7 @@ const TheAvatar = ({ testId, user, metric, onSelect }) => {
 }
 
 TheAvatar.propTypes = {
-  testId: T.string,
+  testid: T.string,
   metric: T.oneOf(values(TYPE)),
   user: T.shape({
     avatar: T.string,
@@ -49,7 +49,7 @@ TheAvatar.propTypes = {
 }
 
 TheAvatar.defaultProps = {
-  testId: 'the-avatar',
+  testid: 'the-avatar',
   metric: TYPE.POST_ITEM,
   onSelect: log,
 }
diff --git a/src/components/TheAvatar/styles/article_author_avatar.js b/src/components/TheAvatar/styles/article_author_avatar.ts
similarity index 94%
rename from src/components/TheAvatar/styles/article_author_avatar.js
rename to src/components/TheAvatar/styles/article_author_avatar.ts
index 376a50f62..5bbe5a00e 100644
--- a/src/components/TheAvatar/styles/article_author_avatar.js
+++ b/src/components/TheAvatar/styles/article_author_avatar.ts
@@ -6,7 +6,7 @@ import { css, theme } from '@/utils'
 import { Tail as TailBase } from './index'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   cursor: pointer;
   ${css.size(36)};
diff --git a/src/components/TheAvatar/styles/index.js b/src/components/TheAvatar/styles/index.ts
similarity index 92%
rename from src/components/TheAvatar/styles/index.js
rename to src/components/TheAvatar/styles/index.ts
index f61b15e14..a776e9510 100755
--- a/src/components/TheAvatar/styles/index.js
+++ b/src/components/TheAvatar/styles/index.ts
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))``
 
 export const Tail = styled(Img)`
diff --git a/src/components/TheAvatar/styles/post_item_avatar.js b/src/components/TheAvatar/styles/post_item_avatar.ts
similarity index 96%
rename from src/components/TheAvatar/styles/post_item_avatar.js
rename to src/components/TheAvatar/styles/post_item_avatar.ts
index 1dd57d534..ba357de8a 100644
--- a/src/components/TheAvatar/styles/post_item_avatar.js
+++ b/src/components/TheAvatar/styles/post_item_avatar.ts
@@ -6,7 +6,7 @@ import { css, theme } from '@/utils'
 import { Tail as TailBase } from './index'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   cursor: pointer;
   ${css.circle(38)};
diff --git a/src/components/ThemeSelector/CardSelector.js b/src/components/ThemeSelector/CardSelector.js
index 3ae7e71db..501599cdb 100755
--- a/src/components/ThemeSelector/CardSelector.js
+++ b/src/components/ThemeSelector/CardSelector.js
@@ -14,7 +14,7 @@ import {
   AuthorInfo,
   AuthorIcon,
   AuthorName,
-} from './style/card_selector'
+} from './styles/card_selector'
 
 const CardSelector = ({ curTheme, changeTheme }) => (
   <Wrapper>
diff --git a/src/components/ThemeSelector/DotSelector.js b/src/components/ThemeSelector/DotSelector.js
index f2e12a3e8..008dd2ad2 100755
--- a/src/components/ThemeSelector/DotSelector.js
+++ b/src/components/ThemeSelector/DotSelector.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { keys } from 'ramda'
 
 import { themeMeta } from '@/utils'
-import { Wrapper, ThemeDot } from './style/dot_selector'
+import { Wrapper, ThemeDot } from './styles/dot_selector'
 
 const DotSelector = ({ curTheme, changeTheme }) => (
   <Wrapper>
diff --git a/src/components/ThemeSelector/GallerySelector.js b/src/components/ThemeSelector/GallerySelector.js
index a43137684..fa3601f4b 100644
--- a/src/components/ThemeSelector/GallerySelector.js
+++ b/src/components/ThemeSelector/GallerySelector.js
@@ -10,7 +10,7 @@ import {
   IntroDesc,
   ThemeTitle,
   ThemeDesc,
-} from './style/gallery_selector'
+} from './styles/gallery_selector'
 
 const GallerySelector = ({ curTheme, changeTheme }) => {
   return (
diff --git a/src/components/ThemeSelector/style/card_selector.js b/src/components/ThemeSelector/styles/card_selector.ts
similarity index 100%
rename from src/components/ThemeSelector/style/card_selector.js
rename to src/components/ThemeSelector/styles/card_selector.ts
diff --git a/src/components/ThemeSelector/style/dot_selector.js b/src/components/ThemeSelector/styles/dot_selector.ts
similarity index 100%
rename from src/components/ThemeSelector/style/dot_selector.js
rename to src/components/ThemeSelector/styles/dot_selector.ts
diff --git a/src/components/ThemeSelector/style/gallery_selector.js b/src/components/ThemeSelector/styles/gallery_selector.ts
similarity index 100%
rename from src/components/ThemeSelector/style/gallery_selector.js
rename to src/components/ThemeSelector/styles/gallery_selector.ts
diff --git a/src/components/ThemeSelector/style/index.js b/src/components/ThemeSelector/styles/index.ts
similarity index 100%
rename from src/components/ThemeSelector/style/index.js
rename to src/components/ThemeSelector/styles/index.ts
diff --git a/src/components/ThreadSelector/styles/index.js b/src/components/ThreadSelector/styles/index.ts
similarity index 100%
rename from src/components/ThreadSelector/styles/index.js
rename to src/components/ThreadSelector/styles/index.ts
diff --git a/src/components/ThreadSelector/styles/panel.js b/src/components/ThreadSelector/styles/panel.ts
similarity index 100%
rename from src/components/ThreadSelector/styles/panel.js
rename to src/components/ThreadSelector/styles/panel.ts
diff --git a/src/components/Tooltip/styles/confirm_footer.js b/src/components/Tooltip/styles/confirm_footer.ts
similarity index 100%
rename from src/components/Tooltip/styles/confirm_footer.js
rename to src/components/Tooltip/styles/confirm_footer.ts
diff --git a/src/components/Tooltip/styles/index.js b/src/components/Tooltip/styles/index.ts
similarity index 100%
rename from src/components/Tooltip/styles/index.js
rename to src/components/Tooltip/styles/index.ts
diff --git a/src/components/UserBrief/styles/avatar.js b/src/components/UserBrief/styles/avatar.ts
similarity index 100%
rename from src/components/UserBrief/styles/avatar.js
rename to src/components/UserBrief/styles/avatar.ts
diff --git a/src/components/UserBrief/styles/badge_info.js b/src/components/UserBrief/styles/badge_info.ts
similarity index 100%
rename from src/components/UserBrief/styles/badge_info.js
rename to src/components/UserBrief/styles/badge_info.ts
diff --git a/src/components/UserBrief/styles/community_editor_info.js b/src/components/UserBrief/styles/community_editor_info.ts
similarity index 100%
rename from src/components/UserBrief/styles/community_editor_info.js
rename to src/components/UserBrief/styles/community_editor_info.ts
diff --git a/src/components/UserBrief/styles/extra_info.js b/src/components/UserBrief/styles/extra_info.ts
similarity index 100%
rename from src/components/UserBrief/styles/extra_info.js
rename to src/components/UserBrief/styles/extra_info.ts
diff --git a/src/components/UserBrief/styles/index.js b/src/components/UserBrief/styles/index.ts
similarity index 100%
rename from src/components/UserBrief/styles/index.js
rename to src/components/UserBrief/styles/index.ts
diff --git a/src/components/UserBrief/styles/numbers_pad.js b/src/components/UserBrief/styles/numbers_pad.ts
similarity index 100%
rename from src/components/UserBrief/styles/numbers_pad.js
rename to src/components/UserBrief/styles/numbers_pad.ts
diff --git a/src/components/UserBrief/styles/operators.js b/src/components/UserBrief/styles/operators.ts
similarity index 100%
rename from src/components/UserBrief/styles/operators.js
rename to src/components/UserBrief/styles/operators.ts
diff --git a/src/components/UserBrief/styles/social_icons.js b/src/components/UserBrief/styles/social_icons.ts
similarity index 100%
rename from src/components/UserBrief/styles/social_icons.js
rename to src/components/UserBrief/styles/social_icons.ts
diff --git a/src/components/UserCell/styles/index.js b/src/components/UserCell/styles/index.ts
similarity index 100%
rename from src/components/UserCell/styles/index.js
rename to src/components/UserCell/styles/index.ts
diff --git a/src/components/VerifiedSign/styles/index.js b/src/components/VerifiedSign/styles/index.ts
similarity index 100%
rename from src/components/VerifiedSign/styles/index.js
rename to src/components/VerifiedSign/styles/index.ts
diff --git a/src/components/VideoInfoCard/styles/index.js b/src/components/VideoInfoCard/styles/index.ts
similarity index 100%
rename from src/components/VideoInfoCard/styles/index.js
rename to src/components/VideoInfoCard/styles/index.ts
diff --git a/src/components/VideoItem/styles/index.js b/src/components/VideoItem/styles/index.ts
similarity index 100%
rename from src/components/VideoItem/styles/index.js
rename to src/components/VideoItem/styles/index.ts
diff --git a/src/components/VideoSourceInfo/styles/index.js b/src/components/VideoSourceInfo/styles/index.ts
similarity index 100%
rename from src/components/VideoSourceInfo/styles/index.js
rename to src/components/VideoSourceInfo/styles/index.ts
diff --git a/src/components/WorksCard/index.js b/src/components/WorksCard/index.js
index 097099bc2..fbff584f4 100755
--- a/src/components/WorksCard/index.js
+++ b/src/components/WorksCard/index.js
@@ -39,7 +39,7 @@ const getSafeValue = (mode, value, defaultValue) => {
 
 const WorksCard = ({
   withBg,
-  testId,
+  testid,
   mode,
   item,
   defaultTitle,
@@ -60,7 +60,7 @@ const WorksCard = ({
   )
 
   return (
-    <Wrapper testId={testId} withBg={withBg}>
+    <Wrapper testid={testid} withBg={withBg}>
       {item.cover ? (
         <IntroImg src={item.cover} fallback={<ImgFallback type="work" />} />
       ) : (
@@ -128,7 +128,7 @@ const WorksCard = ({
 }
 
 WorksCard.propTypes = {
-  testId: T.string,
+  testid: T.string,
   withBg: T.bool,
   mode: T.oneOf(['default', 'preview']),
   item: T.shape({
@@ -160,7 +160,7 @@ WorksCard.propTypes = {
 }
 
 WorksCard.defaultProps = {
-  testId: 'works-card',
+  testid: 'works-card',
   withBg: false,
   mode: 'default',
   defaultTitle: '作品名称',
diff --git a/src/components/WorksCard/styles/index.js b/src/components/WorksCard/styles/index.ts
similarity index 98%
rename from src/components/WorksCard/styles/index.js
rename to src/components/WorksCard/styles/index.ts
index 6ed074828..d524cfd4d 100755
--- a/src/components/WorksCard/styles/index.js
+++ b/src/components/WorksCard/styles/index.ts
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   background: ${({ withBg }) => (withBg ? '#0d3440' : 'transparent')};
 
diff --git a/src/containers/content/CommunityContent/index.js b/src/containers/content/CommunityContent/index.js
index b8fb56e97..ddf9481c6 100755
--- a/src/containers/content/CommunityContent/index.js
+++ b/src/containers/content/CommunityContent/index.js
@@ -64,7 +64,7 @@ const CommunityContentContainer = ({ communityContent: store }) => {
   const isCardView = !isMobile && bannerLayout === C11N.DIGEST_ROW
 
   return (
-    <Wrapper testId="community-content">
+    <Wrapper testid="community-content">
       <InnerWrapper cardView={isCardView}>
         <ComunityContent curRoute={curRoute} />
       </InnerWrapper>
diff --git a/src/containers/content/CommunityContent/styles/index.js b/src/containers/content/CommunityContent/styles/index.ts
similarity index 92%
rename from src/containers/content/CommunityContent/styles/index.js
rename to src/containers/content/CommunityContent/styles/index.ts
index cc6a7a547..072cbcf14 100755
--- a/src/containers/content/CommunityContent/styles/index.js
+++ b/src/containers/content/CommunityContent/styles/index.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { theme, css, WIDTH, pixelAdd } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('justify-center')};
   min-height: 70vh;
@@ -37,8 +37,6 @@ export const InnerWrapper = styled.div`
 
   ${css.media.mobile`
     margin: 0 3%;
-    margin-left: 2%;
-    margin-top: 0px;
     padding-top: 0;
   `};
 `
diff --git a/src/containers/content/CoolGuideContent/FilterBar.js b/src/containers/content/CoolGuideContent/FilterBar.js
index 38887710b..e4ac161d3 100644
--- a/src/containers/content/CoolGuideContent/FilterBar.js
+++ b/src/containers/content/CoolGuideContent/FilterBar.js
@@ -19,7 +19,7 @@ import { topFilterOnChange } from './logic'
 
 const FilterBar = ({ topFilter, menuOnSelect, initActiveMenuId }) => {
   return (
-    <Wrapper testId="filter-bar">
+    <Wrapper testid="filter-bar">
       <TopFilter>
         <NaviIntro
           title="酷导游"
diff --git a/src/containers/content/CoolGuideContent/index.js b/src/containers/content/CoolGuideContent/index.js
index 51fb2dc4b..aacffe3c3 100755
--- a/src/containers/content/CoolGuideContent/index.js
+++ b/src/containers/content/CoolGuideContent/index.js
@@ -23,7 +23,7 @@ const CoolGuideContentContainer = ({ coolGuideContent: store, metric }) => {
   const { initActiveMenuId, topFilter, displayType } = store
 
   return (
-    <Wrapper testId="cool-guide-content">
+    <Wrapper testid="cool-guide-content">
       <InnerWrapper metric={metric}>
         <FilterBar
           topFilter={topFilter}
diff --git a/src/containers/content/CoolGuideContent/styles/content.js b/src/containers/content/CoolGuideContent/styles/content.ts
similarity index 100%
rename from src/containers/content/CoolGuideContent/styles/content.js
rename to src/containers/content/CoolGuideContent/styles/content.ts
diff --git a/src/containers/content/CoolGuideContent/styles/filter_bar.js b/src/containers/content/CoolGuideContent/styles/filter_bar.ts
similarity index 97%
rename from src/containers/content/CoolGuideContent/styles/filter_bar.js
rename to src/containers/content/CoolGuideContent/styles/filter_bar.ts
index b99dfaca9..a4cb9930b 100644
--- a/src/containers/content/CoolGuideContent/styles/filter_bar.js
+++ b/src/containers/content/CoolGuideContent/styles/filter_bar.ts
@@ -7,7 +7,7 @@ import { WIDTH as NAVI_CATALOG_WIDTH } from '@/components/NaviCatalog/styles/met
 import { SIDEBAR_WIDTH } from './metric'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   width: ${SIDEBAR_WIDTH};
 `
diff --git a/src/containers/content/CoolGuideContent/styles/footer/index.js b/src/containers/content/CoolGuideContent/styles/footer/index.ts
similarity index 100%
rename from src/containers/content/CoolGuideContent/styles/footer/index.js
rename to src/containers/content/CoolGuideContent/styles/footer/index.ts
diff --git a/src/containers/content/CoolGuideContent/styles/index.js b/src/containers/content/CoolGuideContent/styles/index.ts
similarity index 94%
rename from src/containers/content/CoolGuideContent/styles/index.js
rename to src/containers/content/CoolGuideContent/styles/index.ts
index 16c63ddf2..0de20dbbd 100755
--- a/src/containers/content/CoolGuideContent/styles/index.js
+++ b/src/containers/content/CoolGuideContent/styles/index.ts
@@ -4,7 +4,7 @@ import { css } from '@/utils'
 import { SIDEBAR_WIDTH } from './metric'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-both')}
   width: 100%;
diff --git a/src/containers/content/CoolGuideContent/styles/metric.js b/src/containers/content/CoolGuideContent/styles/metric.ts
similarity index 100%
rename from src/containers/content/CoolGuideContent/styles/metric.js
rename to src/containers/content/CoolGuideContent/styles/metric.ts
diff --git a/src/containers/content/DiscoveryContent/Banner.js b/src/containers/content/DiscoveryContent/Banner.js
index 9428f40da..a67639445 100755
--- a/src/containers/content/DiscoveryContent/Banner.js
+++ b/src/containers/content/DiscoveryContent/Banner.js
@@ -45,7 +45,7 @@ const Banner = ({
   },
 }) => {
   return (
-    <BannerContainer testId="discovery-banner">
+    <BannerContainer testid="discovery-banner">
       <IntroWrapper>
         <IntroTitle>
           <SearchIcon src={`${ICON_CMD}/search.svg`} />
diff --git a/src/containers/content/DiscoveryContent/Sidebar.js b/src/containers/content/DiscoveryContent/Sidebar.js
index 1f6a22638..de944e48c 100644
--- a/src/containers/content/DiscoveryContent/Sidebar.js
+++ b/src/containers/content/DiscoveryContent/Sidebar.js
@@ -6,14 +6,14 @@ import FiltersMenu from '@/components/FiltersMenu'
 
 import { Wrapper, Holder } from './styles/sidebar'
 
-const Sidebar = ({ show, onItemClick, activeId, items }) => {
+const Sidebar = ({ show, onItemClick, activeid, items }) => {
   return (
     <Wrapper show={show}>
       <Sticky offsetTop={60}>
         <FiltersMenu
           items={items}
           onItemClick={onItemClick}
-          activeId={activeId}
+          activeid={activeid}
           itemBgHighlight={false}
           noFilter
         />
diff --git a/src/containers/content/DiscoveryContent/index.js b/src/containers/content/DiscoveryContent/index.js
index f53a8a54b..07b7ae1ec 100755
--- a/src/containers/content/DiscoveryContent/index.js
+++ b/src/containers/content/DiscoveryContent/index.js
@@ -50,7 +50,7 @@ const DiscoveryContentContainer = ({ discoveryContent: store, metric }) => {
             show={showFilterSidebar}
             items={pagedCategoriesData}
             onItemClick={menuOnChange}
-            activeId={activeMenuId}
+            activeid={activeMenuId}
           />
           <ContentsWrapper center={isSearchMode}>
             {!isEmpty(pagedCommunitiesData.entries) ? (
diff --git a/src/containers/content/DiscoveryContent/styles/banner.js b/src/containers/content/DiscoveryContent/styles/banner.ts
similarity index 98%
rename from src/containers/content/DiscoveryContent/styles/banner.js
rename to src/containers/content/DiscoveryContent/styles/banner.ts
index ad8d2a3c2..4eb15b287 100755
--- a/src/containers/content/DiscoveryContent/styles/banner.js
+++ b/src/containers/content/DiscoveryContent/styles/banner.ts
@@ -5,7 +5,7 @@ import { theme, css } from '@/utils'
 import Img from '@/Img'
 
 export const BannerContainer = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('justify-center')};
 
diff --git a/src/containers/content/DiscoveryContent/styles/community_card.js b/src/containers/content/DiscoveryContent/styles/community_card.ts
similarity index 100%
rename from src/containers/content/DiscoveryContent/styles/community_card.js
rename to src/containers/content/DiscoveryContent/styles/community_card.ts
diff --git a/src/containers/content/DiscoveryContent/styles/community_list.js b/src/containers/content/DiscoveryContent/styles/community_list.ts
similarity index 100%
rename from src/containers/content/DiscoveryContent/styles/community_list.js
rename to src/containers/content/DiscoveryContent/styles/community_list.ts
diff --git a/src/containers/content/DiscoveryContent/styles/hinter.js b/src/containers/content/DiscoveryContent/styles/hinter.ts
similarity index 100%
rename from src/containers/content/DiscoveryContent/styles/hinter.js
rename to src/containers/content/DiscoveryContent/styles/hinter.ts
diff --git a/src/containers/content/DiscoveryContent/styles/index.js b/src/containers/content/DiscoveryContent/styles/index.ts
similarity index 100%
rename from src/containers/content/DiscoveryContent/styles/index.js
rename to src/containers/content/DiscoveryContent/styles/index.ts
diff --git a/src/containers/content/DiscoveryContent/styles/not_found.js b/src/containers/content/DiscoveryContent/styles/not_found.ts
similarity index 100%
rename from src/containers/content/DiscoveryContent/styles/not_found.js
rename to src/containers/content/DiscoveryContent/styles/not_found.ts
diff --git a/src/containers/content/DiscoveryContent/styles/search_box.js b/src/containers/content/DiscoveryContent/styles/search_box.ts
similarity index 100%
rename from src/containers/content/DiscoveryContent/styles/search_box.js
rename to src/containers/content/DiscoveryContent/styles/search_box.ts
diff --git a/src/containers/content/DiscoveryContent/styles/sidebar.js b/src/containers/content/DiscoveryContent/styles/sidebar.ts
similarity index 100%
rename from src/containers/content/DiscoveryContent/styles/sidebar.js
rename to src/containers/content/DiscoveryContent/styles/sidebar.ts
diff --git a/src/containers/content/FriendsContent/index.js b/src/containers/content/FriendsContent/index.js
index 05acb2533..d8e8d5e46 100755
--- a/src/containers/content/FriendsContent/index.js
+++ b/src/containers/content/FriendsContent/index.js
@@ -99,7 +99,7 @@ const FriendsContentContainer = ({ friendsContent: store, metric }) => {
   }
 
   return (
-    <Wrapper testId="friends-content">
+    <Wrapper testid="friends-content">
       <InnerWrapper metric={metric}>
         <Br top={40} />
         <Title>友情链接</Title>
diff --git a/src/containers/content/FriendsContent/styles/index.js b/src/containers/content/FriendsContent/styles/index.ts
similarity index 96%
rename from src/containers/content/FriendsContent/styles/index.js
rename to src/containers/content/FriendsContent/styles/index.ts
index 720a2d8f8..80db8f4c4 100755
--- a/src/containers/content/FriendsContent/styles/index.js
+++ b/src/containers/content/FriendsContent/styles/index.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-both')}
   width: 100%;
diff --git a/src/containers/content/HaveADrinkContent/styles/body/about.js b/src/containers/content/HaveADrinkContent/styles/body/about.ts
similarity index 100%
rename from src/containers/content/HaveADrinkContent/styles/body/about.js
rename to src/containers/content/HaveADrinkContent/styles/body/about.ts
diff --git a/src/containers/content/HaveADrinkContent/styles/body/catalog.js b/src/containers/content/HaveADrinkContent/styles/body/catalog.ts
similarity index 100%
rename from src/containers/content/HaveADrinkContent/styles/body/catalog.js
rename to src/containers/content/HaveADrinkContent/styles/body/catalog.ts
diff --git a/src/containers/content/HaveADrinkContent/styles/body/index.js b/src/containers/content/HaveADrinkContent/styles/body/index.ts
similarity index 100%
rename from src/containers/content/HaveADrinkContent/styles/body/index.js
rename to src/containers/content/HaveADrinkContent/styles/body/index.ts
diff --git a/src/containers/content/HaveADrinkContent/styles/body/setting.js b/src/containers/content/HaveADrinkContent/styles/body/setting.ts
similarity index 100%
rename from src/containers/content/HaveADrinkContent/styles/body/setting.js
rename to src/containers/content/HaveADrinkContent/styles/body/setting.ts
diff --git a/src/containers/content/HaveADrinkContent/styles/footer/contributor.js b/src/containers/content/HaveADrinkContent/styles/footer/contributor.ts
similarity index 100%
rename from src/containers/content/HaveADrinkContent/styles/footer/contributor.js
rename to src/containers/content/HaveADrinkContent/styles/footer/contributor.ts
diff --git a/src/containers/content/HaveADrinkContent/styles/footer/feature.js b/src/containers/content/HaveADrinkContent/styles/footer/feature.ts
similarity index 100%
rename from src/containers/content/HaveADrinkContent/styles/footer/feature.js
rename to src/containers/content/HaveADrinkContent/styles/footer/feature.ts
diff --git a/src/containers/content/HaveADrinkContent/styles/footer/index.js b/src/containers/content/HaveADrinkContent/styles/footer/index.ts
similarity index 100%
rename from src/containers/content/HaveADrinkContent/styles/footer/index.js
rename to src/containers/content/HaveADrinkContent/styles/footer/index.ts
diff --git a/src/containers/content/HaveADrinkContent/styles/footer/share.js b/src/containers/content/HaveADrinkContent/styles/footer/share.ts
similarity index 100%
rename from src/containers/content/HaveADrinkContent/styles/footer/share.js
rename to src/containers/content/HaveADrinkContent/styles/footer/share.ts
diff --git a/src/containers/content/HaveADrinkContent/styles/header/index.js b/src/containers/content/HaveADrinkContent/styles/header/index.ts
similarity index 100%
rename from src/containers/content/HaveADrinkContent/styles/header/index.js
rename to src/containers/content/HaveADrinkContent/styles/header/index.ts
diff --git a/src/containers/content/HaveADrinkContent/styles/header/index_status.js b/src/containers/content/HaveADrinkContent/styles/header/index_status.ts
similarity index 100%
rename from src/containers/content/HaveADrinkContent/styles/header/index_status.js
rename to src/containers/content/HaveADrinkContent/styles/header/index_status.ts
diff --git a/src/containers/content/HaveADrinkContent/styles/header/reaction.js b/src/containers/content/HaveADrinkContent/styles/header/reaction.ts
similarity index 100%
rename from src/containers/content/HaveADrinkContent/styles/header/reaction.js
rename to src/containers/content/HaveADrinkContent/styles/header/reaction.ts
diff --git a/src/containers/content/HaveADrinkContent/styles/header/running_timer.js b/src/containers/content/HaveADrinkContent/styles/header/running_timer.ts
similarity index 97%
rename from src/containers/content/HaveADrinkContent/styles/header/running_timer.js
rename to src/containers/content/HaveADrinkContent/styles/header/running_timer.ts
index 09b615da9..e564afc86 100755
--- a/src/containers/content/HaveADrinkContent/styles/header/running_timer.js
+++ b/src/containers/content/HaveADrinkContent/styles/header/running_timer.ts
@@ -23,7 +23,7 @@ const opa = keyframes`
 const getRotaAnimation = (interval) => css`
   ${rota} ${interval} linear infinite;
 `
-const getOpaAnimation = (interval, reverse = false) => {
+const getOpaAnimation = (interval, reverse = false): string => {
   return reverse
     ? css`
         ${opa} ${interval} steps(1, end) infinite reverse;
diff --git a/src/containers/content/HaveADrinkContent/styles/header/timer.js b/src/containers/content/HaveADrinkContent/styles/header/timer.ts
similarity index 100%
rename from src/containers/content/HaveADrinkContent/styles/header/timer.js
rename to src/containers/content/HaveADrinkContent/styles/header/timer.ts
diff --git a/src/containers/content/HaveADrinkContent/styles/index.js b/src/containers/content/HaveADrinkContent/styles/index.ts
similarity index 100%
rename from src/containers/content/HaveADrinkContent/styles/index.js
rename to src/containers/content/HaveADrinkContent/styles/index.ts
diff --git a/src/containers/content/HelpCenterContent/Digest.js b/src/containers/content/HelpCenterContent/Digest.tsx
similarity index 74%
rename from src/containers/content/HelpCenterContent/Digest.js
rename to src/containers/content/HelpCenterContent/Digest.tsx
index fc62af47e..d6bb1e6d3 100644
--- a/src/containers/content/HelpCenterContent/Digest.js
+++ b/src/containers/content/HelpCenterContent/Digest.tsx
@@ -1,5 +1,9 @@
 import React from 'react'
 
+// import { METRIC } from '@/constant'
+
+import { TCommunity } from '@/types'
+
 import {
   Wrapper,
   InnerWrapper,
@@ -11,7 +15,12 @@ import {
   HelpTitle,
 } from './styles/digest'
 
-const Digest = ({ metric, community }) => {
+interface IProps {
+  community: TCommunity
+  metric?: string // METRIC.HELP_CENTER
+}
+
+const Digest: React.FC<IProps> = ({ metric, community }) => {
   return (
     <Wrapper metric={metric}>
       <InnerWrapper metric={metric}>
diff --git a/src/containers/content/HelpCenterContent/index.js b/src/containers/content/HelpCenterContent/index.tsx
similarity index 57%
rename from src/containers/content/HelpCenterContent/index.js
rename to src/containers/content/HelpCenterContent/index.tsx
index 425e5c5ec..6646513ca 100755
--- a/src/containers/content/HelpCenterContent/index.js
+++ b/src/containers/content/HelpCenterContent/index.tsx
@@ -7,12 +7,12 @@
  */
 
 import React from 'react'
-import T from 'prop-types'
-import { values } from 'ramda'
 
 import { METRIC } from '@/constant'
 import { pluggedIn, buildLog } from '@/utils'
 
+import { IStore } from './store'
+
 import Cover from './Cover'
 import Detail from './Detail'
 import Digest from './Digest'
@@ -25,16 +25,27 @@ import { useInit } from './logic'
 /* eslint-disable-next-line */
 const log = buildLog('C:HelpCenterContent')
 
-const HelpCenterContentContainer = ({
+interface IProps {
+  helpCenterContent?: IStore
+  testid: string
+  metric: string // METRIC.HELP_CENTER
+}
+
+const defaultProps: IProps = {
+  metric: METRIC.HELP_CENTER,
+  testid: 'help-center-content',
+}
+
+const HelpCenterContentContainer: React.FC<IProps> = ({
   helpCenterContent: store,
-  testId,
+  testid,
   metric,
 }) => {
   useInit(store)
   const { view, curCommunity } = store
 
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       <Digest metric={metric} community={curCommunity} />
       <ContentWrapper metric={metric}>
         {view === VIEW.COVER ? <Cover /> : <Detail />}
@@ -43,15 +54,16 @@ const HelpCenterContentContainer = ({
   )
 }
 
-HelpCenterContentContainer.propTypes = {
-  helpCenterContent: T.any.isRequired,
-  testId: T.string,
-  metric: T.oneOf(values(METRIC)),
-}
+HelpCenterContentContainer.defaultProps = defaultProps
+// HelpCenterContentContainer.propTypes = {
+//   helpCenterContent: T.any.isRequired,
+//   testid: T.string,
+//   metric: T.oneOf(values(METRIC)),
+// }
 
-HelpCenterContentContainer.defaultProps = {
-  testId: 'help-center-content',
-  metric: METRIC.HELP_CENTER,
-}
+// HelpCenterContentContainer.defaultProps = {
+//   testid: 'help-center-content',
+//   metric: METRIC.HELP_CENTER,
+// }
 
 export default pluggedIn(HelpCenterContentContainer)
diff --git a/src/containers/content/HelpCenterContent/logic.js b/src/containers/content/HelpCenterContent/logic.ts
similarity index 72%
rename from src/containers/content/HelpCenterContent/logic.js
rename to src/containers/content/HelpCenterContent/logic.ts
index 5c757c496..87ce5623e 100755
--- a/src/containers/content/HelpCenterContent/logic.js
+++ b/src/containers/content/HelpCenterContent/logic.ts
@@ -4,8 +4,9 @@ import { useEffect } from 'react'
 import { buildLog } from '@/utils'
 // import S from './service'
 import { VIEW } from './constant'
+import { IStore } from './store'
 
-let store = null
+let store: IStore | undefined
 
 /* eslint-disable-next-line */
 const log = buildLog('L:HelpCenterContent')
@@ -13,15 +14,15 @@ const log = buildLog('L:HelpCenterContent')
 /**
  * goto detail help-center article
  */
-export const gotoDetail = () => {
-  store.mark({ view: VIEW.DETAIL })
+export const gotoDetail = (): void => {
+  store?.mark({ view: VIEW.DETAIL })
 }
 
 // ###############################
 // init & uninit handlers
 // ###############################
 
-export const useInit = (_store) => {
+export const useInit = (_store: IStore): void => {
   useEffect(() => {
     store = _store
     log('useInit: ', store)
diff --git a/src/containers/content/HelpCenterContent/store.js b/src/containers/content/HelpCenterContent/store.js
deleted file mode 100755
index cb8b1a10b..000000000
--- a/src/containers/content/HelpCenterContent/store.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * HelpCenterContent store
- *
- */
-
-import { types as T, getParent } from 'mobx-state-tree'
-import { values } from 'ramda'
-
-import { markStates, buildLog, stripMobx } from '@/utils'
-
-import { VIEW } from './constant'
-
-/* eslint-disable-next-line */
-const log = buildLog('S:HelpCenterContent')
-
-const HelpCenterContent = T.model('HelpCenterContent', {
-  view: T.optional(T.enumeration(values(VIEW)), VIEW.COVER),
-})
-  .views((self) => ({
-    get root() {
-      return getParent(self)
-    },
-    get curCommunity() {
-      return stripMobx(self.root.viewing.community)
-    },
-  }))
-  .actions((self) => ({
-    mark(sobj) {
-      markStates(sobj, self)
-    },
-  }))
-
-export default HelpCenterContent
diff --git a/src/containers/content/HelpCenterContent/store.ts b/src/containers/content/HelpCenterContent/store.ts
new file mode 100755
index 000000000..d2053e11b
--- /dev/null
+++ b/src/containers/content/HelpCenterContent/store.ts
@@ -0,0 +1,35 @@
+/*
+ * HelpCenterContent store
+ *
+ */
+
+import { types as T, getParent, Instance } from 'mobx-state-tree'
+import { values } from 'ramda'
+
+import { TCommunity, IRootStore } from '@/types'
+import { markStates, buildLog, stripMobx } from '@/utils'
+
+import { VIEW } from './constant'
+
+/* eslint-disable-next-line */
+const log = buildLog('S:HelpCenterContent')
+
+export const HelpCenterContent = T.model('HelpCenterContent', {
+  view: T.optional(T.enumeration(values(VIEW)), VIEW.COVER),
+})
+  .views((self) => ({
+    get curCommunity(): TCommunity {
+      // see https://github.com/mobxjs/mobx-state-tree/issues/371#issuecomment-479369372
+      const root = getParent(self) as IRootStore
+
+      return stripMobx(root.viewing.community)
+    },
+  }))
+  .actions((self) => ({
+    mark(sobj: Record<string, unknown>): void {
+      markStates(sobj, self)
+    },
+  }))
+
+export type IStore = Instance<typeof HelpCenterContent>
+export default HelpCenterContent
diff --git a/src/containers/content/HelpCenterContent/styles/cover.js b/src/containers/content/HelpCenterContent/styles/cover.ts
similarity index 100%
rename from src/containers/content/HelpCenterContent/styles/cover.js
rename to src/containers/content/HelpCenterContent/styles/cover.ts
diff --git a/src/containers/content/HelpCenterContent/styles/detail.js b/src/containers/content/HelpCenterContent/styles/detail.ts
similarity index 100%
rename from src/containers/content/HelpCenterContent/styles/detail.js
rename to src/containers/content/HelpCenterContent/styles/detail.ts
diff --git a/src/containers/content/HelpCenterContent/styles/digest.js b/src/containers/content/HelpCenterContent/styles/digest.ts
similarity index 100%
rename from src/containers/content/HelpCenterContent/styles/digest.js
rename to src/containers/content/HelpCenterContent/styles/digest.ts
diff --git a/src/containers/content/HelpCenterContent/styles/index.js b/src/containers/content/HelpCenterContent/styles/index.ts
similarity index 93%
rename from src/containers/content/HelpCenterContent/styles/index.js
rename to src/containers/content/HelpCenterContent/styles/index.ts
index c8c066a32..600416d36 100755
--- a/src/containers/content/HelpCenterContent/styles/index.js
+++ b/src/containers/content/HelpCenterContent/styles/index.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-center')};
   width: 100%;
diff --git a/src/containers/content/MeetupsContent/styles/activity_card.js b/src/containers/content/MeetupsContent/styles/activity_card.ts
similarity index 100%
rename from src/containers/content/MeetupsContent/styles/activity_card.js
rename to src/containers/content/MeetupsContent/styles/activity_card.ts
diff --git a/src/containers/content/MeetupsContent/styles/card/date.js b/src/containers/content/MeetupsContent/styles/card/date.ts
similarity index 100%
rename from src/containers/content/MeetupsContent/styles/card/date.js
rename to src/containers/content/MeetupsContent/styles/card/date.ts
diff --git a/src/containers/content/MeetupsContent/styles/card/index.js b/src/containers/content/MeetupsContent/styles/card/index.ts
similarity index 100%
rename from src/containers/content/MeetupsContent/styles/card/index.js
rename to src/containers/content/MeetupsContent/styles/card/index.ts
diff --git a/src/containers/content/MeetupsContent/styles/card/text_card.js b/src/containers/content/MeetupsContent/styles/card/text_card.ts
similarity index 100%
rename from src/containers/content/MeetupsContent/styles/card/text_card.js
rename to src/containers/content/MeetupsContent/styles/card/text_card.ts
diff --git a/src/containers/content/MeetupsContent/styles/card/text_with_img_card.js b/src/containers/content/MeetupsContent/styles/card/text_with_img_card.ts
similarity index 100%
rename from src/containers/content/MeetupsContent/styles/card/text_with_img_card.js
rename to src/containers/content/MeetupsContent/styles/card/text_with_img_card.ts
diff --git a/src/containers/content/MeetupsContent/styles/date_selector/calendar_card.js b/src/containers/content/MeetupsContent/styles/date_selector/calendar_card.ts
similarity index 100%
rename from src/containers/content/MeetupsContent/styles/date_selector/calendar_card.js
rename to src/containers/content/MeetupsContent/styles/date_selector/calendar_card.ts
diff --git a/src/containers/content/MeetupsContent/styles/date_selector/cell.js b/src/containers/content/MeetupsContent/styles/date_selector/cell.ts
similarity index 100%
rename from src/containers/content/MeetupsContent/styles/date_selector/cell.js
rename to src/containers/content/MeetupsContent/styles/date_selector/cell.ts
diff --git a/src/containers/content/MeetupsContent/styles/date_selector/index.js b/src/containers/content/MeetupsContent/styles/date_selector/index.ts
similarity index 100%
rename from src/containers/content/MeetupsContent/styles/date_selector/index.js
rename to src/containers/content/MeetupsContent/styles/date_selector/index.ts
diff --git a/src/containers/content/MeetupsContent/styles/filter_bar/index.js b/src/containers/content/MeetupsContent/styles/filter_bar/index.ts
similarity index 100%
rename from src/containers/content/MeetupsContent/styles/filter_bar/index.js
rename to src/containers/content/MeetupsContent/styles/filter_bar/index.ts
diff --git a/src/containers/content/MeetupsContent/styles/index.js b/src/containers/content/MeetupsContent/styles/index.ts
similarity index 100%
rename from src/containers/content/MeetupsContent/styles/index.js
rename to src/containers/content/MeetupsContent/styles/index.ts
diff --git a/src/containers/content/MembershipContent/constant.js b/src/containers/content/MembershipContent/constant.ts
similarity index 100%
rename from src/containers/content/MembershipContent/constant.js
rename to src/containers/content/MembershipContent/constant.ts
diff --git a/src/containers/content/MembershipContent/index.js b/src/containers/content/MembershipContent/index.js
index 15216d9cd..74bbbd29b 100755
--- a/src/containers/content/MembershipContent/index.js
+++ b/src/containers/content/MembershipContent/index.js
@@ -62,7 +62,7 @@ const PayButton = ({ pkgType, payType }) => {
 
 const MembershipContentContainer = ({
   membershipContent: store,
-  testId,
+  testid,
   metric,
 }) => {
   useInit(store)
@@ -70,7 +70,7 @@ const MembershipContentContainer = ({
   const { payType, pkgType, dashboardItems } = store
 
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       <InnerWrapper metric={metric}>
         <BannerWrapper>
           <Title>Hi, mydearxym</Title>
@@ -147,11 +147,11 @@ const MembershipContentContainer = ({
 MembershipContentContainer.propTypes = {
   membershipContent: T.any.isRequired,
   metric: T.string.isRequired,
-  testId: T.string,
+  testid: T.string,
 }
 
 MembershipContentContainer.defaultProps = {
-  testId: 'membership-content',
+  testid: 'membership-content',
 }
 
 export default pluggedIn(MembershipContentContainer)
diff --git a/src/containers/content/MembershipContent/styles/illustrations/air_balloon.js b/src/containers/content/MembershipContent/styles/illustrations/air_balloon.ts
similarity index 97%
rename from src/containers/content/MembershipContent/styles/illustrations/air_balloon.js
rename to src/containers/content/MembershipContent/styles/illustrations/air_balloon.ts
index b014882f3..2d86183ef 100644
--- a/src/containers/content/MembershipContent/styles/illustrations/air_balloon.js
+++ b/src/containers/content/MembershipContent/styles/illustrations/air_balloon.ts
@@ -7,7 +7,7 @@ const color = {
 }
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   position: absolute;
   left: -30px;
diff --git a/src/containers/content/MembershipContent/styles/illustrations/index.js b/src/containers/content/MembershipContent/styles/illustrations/index.ts
similarity index 100%
rename from src/containers/content/MembershipContent/styles/illustrations/index.js
rename to src/containers/content/MembershipContent/styles/illustrations/index.ts
diff --git a/src/containers/content/MembershipContent/styles/illustrations/rocket.js b/src/containers/content/MembershipContent/styles/illustrations/rocket.ts
similarity index 98%
rename from src/containers/content/MembershipContent/styles/illustrations/rocket.js
rename to src/containers/content/MembershipContent/styles/illustrations/rocket.ts
index 4f233716d..5a8c145f7 100644
--- a/src/containers/content/MembershipContent/styles/illustrations/rocket.js
+++ b/src/containers/content/MembershipContent/styles/illustrations/rocket.ts
@@ -21,7 +21,7 @@ const color = {
 const height = '140px'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   position: relative;
   margin-bottom: 15px;
diff --git a/src/containers/content/MembershipContent/styles/illustrations/ufo.js b/src/containers/content/MembershipContent/styles/illustrations/ufo.ts
similarity index 98%
rename from src/containers/content/MembershipContent/styles/illustrations/ufo.js
rename to src/containers/content/MembershipContent/styles/illustrations/ufo.ts
index 404935f1a..1dd81728f 100644
--- a/src/containers/content/MembershipContent/styles/illustrations/ufo.js
+++ b/src/containers/content/MembershipContent/styles/illustrations/ufo.ts
@@ -19,7 +19,7 @@ const color = {
 const height = '140px'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   width: 200px;
   height: ${height};
diff --git a/src/containers/content/MembershipContent/styles/index.js b/src/containers/content/MembershipContent/styles/index.ts
similarity index 98%
rename from src/containers/content/MembershipContent/styles/index.js
rename to src/containers/content/MembershipContent/styles/index.ts
index e9bfb8f7b..0cd83be1c 100755
--- a/src/containers/content/MembershipContent/styles/index.js
+++ b/src/containers/content/MembershipContent/styles/index.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components'
 import { theme, css } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('justify-center')};
   background-image: ${theme('banner.linearGradient')};
diff --git a/src/containers/content/MembershipContent/styles/monthly_warning.js b/src/containers/content/MembershipContent/styles/monthly_warning.ts
similarity index 94%
rename from src/containers/content/MembershipContent/styles/monthly_warning.js
rename to src/containers/content/MembershipContent/styles/monthly_warning.ts
index 46a0c81db..1b8457916 100644
--- a/src/containers/content/MembershipContent/styles/monthly_warning.js
+++ b/src/containers/content/MembershipContent/styles/monthly_warning.ts
@@ -4,7 +4,7 @@ import { theme, css } from '@/utils'
 import Img from '@/Img'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   position: absolute;
   ${css.flex('align-center')};
diff --git a/src/containers/content/MembershipContent/styles/price_tag.js b/src/containers/content/MembershipContent/styles/price_tag.ts
similarity index 96%
rename from src/containers/content/MembershipContent/styles/price_tag.js
rename to src/containers/content/MembershipContent/styles/price_tag.ts
index 752fea930..c5064aa2f 100644
--- a/src/containers/content/MembershipContent/styles/price_tag.js
+++ b/src/containers/content/MembershipContent/styles/price_tag.ts
@@ -4,7 +4,7 @@ import { theme, css } from '@/utils'
 import { Dashboard } from './index'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-center')};
   color: ${theme('thread.articleDigest')};
diff --git a/src/containers/content/MembershipContent/styles/qa.js b/src/containers/content/MembershipContent/styles/qa.ts
similarity index 96%
rename from src/containers/content/MembershipContent/styles/qa.js
rename to src/containers/content/MembershipContent/styles/qa.ts
index 5436d9287..8ca2bc2f9 100644
--- a/src/containers/content/MembershipContent/styles/qa.js
+++ b/src/containers/content/MembershipContent/styles/qa.ts
@@ -4,7 +4,7 @@ import { theme, css } from '@/utils'
 import Img from '@/Img'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-start')};
   margin-top: 80px;
diff --git a/src/containers/content/MembershipContent/styles/support.js b/src/containers/content/MembershipContent/styles/support.ts
similarity index 100%
rename from src/containers/content/MembershipContent/styles/support.js
rename to src/containers/content/MembershipContent/styles/support.ts
diff --git a/src/containers/content/PostContent/styles/desktop_view.js b/src/containers/content/PostContent/styles/desktop_view.ts
similarity index 100%
rename from src/containers/content/PostContent/styles/desktop_view.js
rename to src/containers/content/PostContent/styles/desktop_view.ts
diff --git a/src/containers/content/PostContent/styles/mobile_view.js b/src/containers/content/PostContent/styles/mobile_view.ts
similarity index 100%
rename from src/containers/content/PostContent/styles/mobile_view.js
rename to src/containers/content/PostContent/styles/mobile_view.ts
diff --git a/src/containers/content/RecipesContent/FilterBar.js b/src/containers/content/RecipesContent/FilterBar.js
index bccdca8ad..89b12d12a 100644
--- a/src/containers/content/RecipesContent/FilterBar.js
+++ b/src/containers/content/RecipesContent/FilterBar.js
@@ -29,13 +29,13 @@ const FilterBar = ({ mainView, topFilter, initActiveMenuId }) => {
   const { t } = useTrans()
 
   return (
-    <Wrapper testId="filter-bar">
+    <Wrapper testid="filter-bar">
       <TopFilter>
         <NaviIntro
           title="代码片段"
           desc="useful recipes"
           iconSrc={`${ICON_CMD}/header/more_snippets.svg`}
-          testId="filter-navi-intro"
+          testid="filter-navi-intro"
         />
         {topFilter !== 'all' && (
           <Option onClick={() => topFilterOnChange('all')}>{t('all')}</Option>
@@ -84,7 +84,7 @@ const FilterBar = ({ mainView, topFilter, initActiveMenuId }) => {
       <SearchBox />
       <Sticky offsetTop={20}>
         <NaviCatalog
-          testId="filter-navi-menu"
+          testid="filter-navi-menu"
           items={tmpMenu}
           onSelect={(id, type) => console.log(id, type)}
           initActiveMenuId={initActiveMenuId}
diff --git a/src/containers/content/RecipesContent/SearchBox.js b/src/containers/content/RecipesContent/SearchBox.js
index 0b3500526..095e2e94c 100644
--- a/src/containers/content/RecipesContent/SearchBox.js
+++ b/src/containers/content/RecipesContent/SearchBox.js
@@ -10,7 +10,7 @@ const SearchBox = () => {
       <SearchInput
         placeholder="语言或框架名称"
         suffixIcon={`${ICON_CMD}/search.svg`}
-        testId="filter-searchbox"
+        testid="filter-searchbox"
       />
     </Wrapper>
   )
diff --git a/src/containers/content/RecipesContent/index.js b/src/containers/content/RecipesContent/index.js
index 8ba57e3b8..addcd337f 100755
--- a/src/containers/content/RecipesContent/index.js
+++ b/src/containers/content/RecipesContent/index.js
@@ -27,7 +27,7 @@ const RecipesContentContainer = ({ recipesContent: store, metric }) => {
   const { galleryType, mainView } = store
 
   return (
-    <Wrapper testId="recipes-content">
+    <Wrapper testid="recipes-content">
       <InnerWrapper metric={metric}>
         <FilterBar
           mainView={mainView}
diff --git a/src/containers/content/RecipesContent/styles/cheatsheets/index.js b/src/containers/content/RecipesContent/styles/cheatsheets/index.ts
similarity index 100%
rename from src/containers/content/RecipesContent/styles/cheatsheets/index.js
rename to src/containers/content/RecipesContent/styles/cheatsheets/index.ts
diff --git a/src/containers/content/RecipesContent/styles/filter_bar.js b/src/containers/content/RecipesContent/styles/filter_bar.ts
similarity index 97%
rename from src/containers/content/RecipesContent/styles/filter_bar.js
rename to src/containers/content/RecipesContent/styles/filter_bar.ts
index e0cd67379..1ce5af3ce 100644
--- a/src/containers/content/RecipesContent/styles/filter_bar.js
+++ b/src/containers/content/RecipesContent/styles/filter_bar.ts
@@ -7,7 +7,7 @@ import { WIDTH as NAVI_CATALOG_WIDTH } from '@/components/NaviCatalog/styles/met
 import { SIDEBAR_WIDTH, SIDEBAR_MARGIN } from './metric'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn()};
   width: ${SIDEBAR_WIDTH};
diff --git a/src/containers/content/RecipesContent/styles/footer/index.js b/src/containers/content/RecipesContent/styles/footer/index.ts
similarity index 100%
rename from src/containers/content/RecipesContent/styles/footer/index.js
rename to src/containers/content/RecipesContent/styles/footer/index.ts
diff --git a/src/containers/content/RecipesContent/styles/index.js b/src/containers/content/RecipesContent/styles/index.ts
similarity index 93%
rename from src/containers/content/RecipesContent/styles/index.js
rename to src/containers/content/RecipesContent/styles/index.ts
index a6e3e5b1b..8aa1b89d8 100755
--- a/src/containers/content/RecipesContent/styles/index.js
+++ b/src/containers/content/RecipesContent/styles/index.ts
@@ -5,7 +5,7 @@ import { css } from '@/utils'
 import { SIDEBAR_WIDTH } from './metric'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-both')}
   width: 100%;
diff --git a/src/containers/content/RecipesContent/styles/search_box.js b/src/containers/content/RecipesContent/styles/search_box.ts
similarity index 100%
rename from src/containers/content/RecipesContent/styles/search_box.js
rename to src/containers/content/RecipesContent/styles/search_box.ts
diff --git a/src/containers/content/RecipesContent/styles/snippets/index.js b/src/containers/content/RecipesContent/styles/snippets/index.ts
similarity index 100%
rename from src/containers/content/RecipesContent/styles/snippets/index.js
rename to src/containers/content/RecipesContent/styles/snippets/index.ts
diff --git a/src/containers/content/RepoContent/styles/contributor_list.js b/src/containers/content/RepoContent/styles/contributor_list.ts
similarity index 100%
rename from src/containers/content/RepoContent/styles/contributor_list.js
rename to src/containers/content/RepoContent/styles/contributor_list.ts
diff --git a/src/containers/content/RepoContent/styles/index.js b/src/containers/content/RepoContent/styles/index.ts
similarity index 100%
rename from src/containers/content/RepoContent/styles/index.js
rename to src/containers/content/RepoContent/styles/index.ts
diff --git a/src/containers/content/RepoContent/styles/repo_counters.js b/src/containers/content/RepoContent/styles/repo_counters.ts
similarity index 100%
rename from src/containers/content/RepoContent/styles/repo_counters.js
rename to src/containers/content/RepoContent/styles/repo_counters.ts
diff --git a/src/containers/content/RepoContent/styles/repo_status_card.js b/src/containers/content/RepoContent/styles/repo_status_card.ts
similarity index 100%
rename from src/containers/content/RepoContent/styles/repo_status_card.js
rename to src/containers/content/RepoContent/styles/repo_status_card.ts
diff --git a/src/containers/content/RepoContent/styles/side_cards.js b/src/containers/content/RepoContent/styles/side_cards.ts
similarity index 100%
rename from src/containers/content/RepoContent/styles/side_cards.js
rename to src/containers/content/RepoContent/styles/side_cards.ts
diff --git a/src/containers/content/SponsorContent/index.js b/src/containers/content/SponsorContent/index.js
index 3d33f46e1..73e161fe8 100755
--- a/src/containers/content/SponsorContent/index.js
+++ b/src/containers/content/SponsorContent/index.js
@@ -120,7 +120,7 @@ const SponsorContentContainer = ({ sponsorContent: store, metric }) => {
   const { bannerVisiable } = store
 
   return (
-    <Wrapper testId="sponsor-content">
+    <Wrapper testid="sponsor-content">
       <Banner />
       <InnerWrapper bannerVisiable={bannerVisiable}>
         <Br top={50} />
diff --git a/src/containers/content/SponsorContent/styles/banner.js b/src/containers/content/SponsorContent/styles/banner.ts
similarity index 100%
rename from src/containers/content/SponsorContent/styles/banner.js
rename to src/containers/content/SponsorContent/styles/banner.ts
diff --git a/src/containers/content/SponsorContent/styles/index.js b/src/containers/content/SponsorContent/styles/index.ts
similarity index 96%
rename from src/containers/content/SponsorContent/styles/index.js
rename to src/containers/content/SponsorContent/styles/index.ts
index 59824c7f5..8decbd8d0 100755
--- a/src/containers/content/SponsorContent/styles/index.js
+++ b/src/containers/content/SponsorContent/styles/index.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-both')}
   width: 100%;
diff --git a/src/containers/content/SponsorContent/styles/sponsor_type_title.js b/src/containers/content/SponsorContent/styles/sponsor_type_title.ts
similarity index 94%
rename from src/containers/content/SponsorContent/styles/sponsor_type_title.js
rename to src/containers/content/SponsorContent/styles/sponsor_type_title.ts
index 6e69def25..5cebcf864 100644
--- a/src/containers/content/SponsorContent/styles/sponsor_type_title.js
+++ b/src/containers/content/SponsorContent/styles/sponsor_type_title.ts
@@ -4,7 +4,7 @@ import { css, theme } from '@/utils'
 import Img from '@/Img'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-both')}
 `
diff --git a/src/containers/content/SubscribeContent/Actions/index.js b/src/containers/content/SubscribeContent/Actions/index.js
index 74255f4fa..954a125dc 100644
--- a/src/containers/content/SubscribeContent/Actions/index.js
+++ b/src/containers/content/SubscribeContent/Actions/index.js
@@ -15,9 +15,9 @@ import {
 
 import { changeView } from '../logic'
 
-const Actions = ({ view, testId }) => {
+const Actions = ({ view, testid }) => {
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       <InnerWrapper>
         {view === 'default' ? (
           <>
@@ -37,11 +37,11 @@ const Actions = ({ view, testId }) => {
 
 Actions.propTypes = {
   view: T.oneOf(['default', 'detail']).isRequired,
-  testId: T.string,
+  testid: T.string,
 }
 
 Actions.defaultProps = {
-  testId: 'subscribe-actions',
+  testid: 'subscribe-actions',
 }
 
 export default React.memo(Actions)
diff --git a/src/containers/content/SubscribeContent/index.js b/src/containers/content/SubscribeContent/index.js
index ceab41e9f..4c628ae38 100755
--- a/src/containers/content/SubscribeContent/index.js
+++ b/src/containers/content/SubscribeContent/index.js
@@ -20,13 +20,13 @@ import { useInit } from './logic'
 /* eslint-disable-next-line */
 const log = buildLog('C:SubscribeContent')
 
-const SubscribeContentContainer = ({ subscribeContent: store, testId }) => {
+const SubscribeContentContainer = ({ subscribeContent: store, testid }) => {
   useInit(store)
 
   const { subscribeView } = store
 
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       <InnerWrapper>
         <Content />
         <StickyWrapper offsetTop={200}>
@@ -39,11 +39,11 @@ const SubscribeContentContainer = ({ subscribeContent: store, testId }) => {
 
 SubscribeContentContainer.propTypes = {
   subscribeContent: T.any.isRequired,
-  testId: T.string,
+  testid: T.string,
 }
 
 SubscribeContentContainer.defaultProps = {
-  testId: 'subscribe-content',
+  testid: 'subscribe-content',
 }
 
 export default pluggedIn(SubscribeContentContainer)
diff --git a/src/containers/content/SubscribeContent/styles/actions/detail.js b/src/containers/content/SubscribeContent/styles/actions/detail.ts
similarity index 100%
rename from src/containers/content/SubscribeContent/styles/actions/detail.js
rename to src/containers/content/SubscribeContent/styles/actions/detail.ts
diff --git a/src/containers/content/SubscribeContent/styles/actions/index.js b/src/containers/content/SubscribeContent/styles/actions/index.ts
similarity index 95%
rename from src/containers/content/SubscribeContent/styles/actions/index.js
rename to src/containers/content/SubscribeContent/styles/actions/index.ts
index 8ba4bab30..9ae6b33bf 100644
--- a/src/containers/content/SubscribeContent/styles/actions/index.js
+++ b/src/containers/content/SubscribeContent/styles/actions/index.ts
@@ -5,7 +5,7 @@ import { Button } from '@/components/Buttons'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-both')};
   padding-left: 5%;
diff --git a/src/containers/content/SubscribeContent/styles/content/index.js b/src/containers/content/SubscribeContent/styles/content/index.ts
similarity index 100%
rename from src/containers/content/SubscribeContent/styles/content/index.js
rename to src/containers/content/SubscribeContent/styles/content/index.ts
diff --git a/src/containers/content/SubscribeContent/styles/index.js b/src/containers/content/SubscribeContent/styles/index.ts
similarity index 95%
rename from src/containers/content/SubscribeContent/styles/index.js
rename to src/containers/content/SubscribeContent/styles/index.ts
index b3007c3a4..dba88ed77 100755
--- a/src/containers/content/SubscribeContent/styles/index.js
+++ b/src/containers/content/SubscribeContent/styles/index.ts
@@ -4,7 +4,7 @@ import { css, theme, WIDTH } from '@/utils'
 import Sticky from '@/components/Sticky'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-start')};
   width: 100%;
diff --git a/src/containers/content/TrendingContent/index.js b/src/containers/content/TrendingContent/index.js
index bb97bc10f..602bcbc06 100755
--- a/src/containers/content/TrendingContent/index.js
+++ b/src/containers/content/TrendingContent/index.js
@@ -21,7 +21,7 @@ const TrendingContentContainer = ({ trendingContent: store, metric }) => {
   useInit(store)
 
   return (
-    <Wrapper testId="trendingContent">
+    <Wrapper testid="trendingContent">
       <InnerWrapper metric={metric}>
         <SwitchBtn>
           <OrButton
diff --git a/src/containers/content/TrendingContent/styles/footer/index.js b/src/containers/content/TrendingContent/styles/footer/index.ts
similarity index 100%
rename from src/containers/content/TrendingContent/styles/footer/index.js
rename to src/containers/content/TrendingContent/styles/footer/index.ts
diff --git a/src/containers/content/TrendingContent/styles/index.js b/src/containers/content/TrendingContent/styles/index.ts
similarity index 100%
rename from src/containers/content/TrendingContent/styles/index.js
rename to src/containers/content/TrendingContent/styles/index.ts
diff --git a/src/containers/content/TrendingContent/styles/news_board.js b/src/containers/content/TrendingContent/styles/news_board.ts
similarity index 100%
rename from src/containers/content/TrendingContent/styles/news_board.js
rename to src/containers/content/TrendingContent/styles/news_board.ts
diff --git a/src/containers/content/UserContent/styles/achieve_card.js b/src/containers/content/UserContent/styles/achieve_card.ts
similarity index 100%
rename from src/containers/content/UserContent/styles/achieve_card.js
rename to src/containers/content/UserContent/styles/achieve_card.ts
diff --git a/src/containers/content/UserContent/styles/digest_board.js b/src/containers/content/UserContent/styles/digest_board.ts
similarity index 100%
rename from src/containers/content/UserContent/styles/digest_board.js
rename to src/containers/content/UserContent/styles/digest_board.ts
diff --git a/src/containers/content/UserContent/styles/index.js b/src/containers/content/UserContent/styles/index.ts
similarity index 100%
rename from src/containers/content/UserContent/styles/index.js
rename to src/containers/content/UserContent/styles/index.ts
diff --git a/src/containers/content/UserContent/styles/sidebar/community_editor_info.js b/src/containers/content/UserContent/styles/sidebar/community_editor_info.ts
similarity index 100%
rename from src/containers/content/UserContent/styles/sidebar/community_editor_info.js
rename to src/containers/content/UserContent/styles/sidebar/community_editor_info.ts
diff --git a/src/containers/content/UserContent/styles/sidebar/index.js b/src/containers/content/UserContent/styles/sidebar/index.ts
similarity index 100%
rename from src/containers/content/UserContent/styles/sidebar/index.js
rename to src/containers/content/UserContent/styles/sidebar/index.ts
diff --git a/src/containers/content/UserContent/styles/source_contribute_info.js b/src/containers/content/UserContent/styles/source_contribute_info.ts
similarity index 100%
rename from src/containers/content/UserContent/styles/source_contribute_info.js
rename to src/containers/content/UserContent/styles/source_contribute_info.ts
diff --git a/src/containers/content/VideoContent/styles/index.js b/src/containers/content/VideoContent/styles/index.ts
similarity index 100%
rename from src/containers/content/VideoContent/styles/index.js
rename to src/containers/content/VideoContent/styles/index.ts
diff --git a/src/containers/content/VideoContent/styles/side_cards.js b/src/containers/content/VideoContent/styles/side_cards.ts
similarity index 100%
rename from src/containers/content/VideoContent/styles/side_cards.js
rename to src/containers/content/VideoContent/styles/side_cards.ts
diff --git a/src/containers/content/WorksContent/Banner/Recommendation.js b/src/containers/content/WorksContent/Banner/Recommendation.js
index ded0ae6cf..9d8a5ed33 100644
--- a/src/containers/content/WorksContent/Banner/Recommendation.js
+++ b/src/containers/content/WorksContent/Banner/Recommendation.js
@@ -35,7 +35,7 @@ const log = buildLog('C:WorksContent')
 
 const Banner = () => {
   return (
-    <Wrapper testId="worksContent">
+    <Wrapper testid="worksContent">
       <Card>
         <IntroWrapper>
           <IntroImg src={`${ASSETS_ENDPOINT}/works/market1.jpeg`} />
diff --git a/src/containers/content/WorksContent/Banner/index.js b/src/containers/content/WorksContent/Banner/index.js
index de59973d2..4b978561c 100644
--- a/src/containers/content/WorksContent/Banner/index.js
+++ b/src/containers/content/WorksContent/Banner/index.js
@@ -43,7 +43,7 @@ const options = [
 
 const Banner = () => {
   return (
-    <Wrapper testId="worksContent">
+    <Wrapper testid="worksContent">
       <IntroWrapper>
         <BrandWrapper>
           <Title>作品集市</Title>
diff --git a/src/containers/content/WorksContent/index.js b/src/containers/content/WorksContent/index.js
index a3c869996..5365b0870 100755
--- a/src/containers/content/WorksContent/index.js
+++ b/src/containers/content/WorksContent/index.js
@@ -72,7 +72,7 @@ const WorksContentContainer = ({ worksContent: store, metric }) => {
   const { activeView } = store
 
   return (
-    <Wrapper testId="worksContent" metric={metric}>
+    <Wrapper testid="worksContent" metric={metric}>
       <ContentWrapper>
         <LeftSidebarWrapper>
           <Brand />
diff --git a/src/containers/content/WorksContent/styles/banner/backgrounds.js b/src/containers/content/WorksContent/styles/banner/backgrounds.ts
similarity index 100%
rename from src/containers/content/WorksContent/styles/banner/backgrounds.js
rename to src/containers/content/WorksContent/styles/banner/backgrounds.ts
diff --git a/src/containers/content/WorksContent/styles/banner/index.js b/src/containers/content/WorksContent/styles/banner/index.ts
similarity index 100%
rename from src/containers/content/WorksContent/styles/banner/index.js
rename to src/containers/content/WorksContent/styles/banner/index.ts
diff --git a/src/containers/content/WorksContent/styles/banner/recommendation.js b/src/containers/content/WorksContent/styles/banner/recommendation.ts
similarity index 100%
rename from src/containers/content/WorksContent/styles/banner/recommendation.js
rename to src/containers/content/WorksContent/styles/banner/recommendation.ts
diff --git a/src/containers/content/WorksContent/styles/brand.js b/src/containers/content/WorksContent/styles/brand.ts
similarity index 83%
rename from src/containers/content/WorksContent/styles/brand.js
rename to src/containers/content/WorksContent/styles/brand.ts
index 3f5eab42c..9dc65cf2f 100644
--- a/src/containers/content/WorksContent/styles/brand.js
+++ b/src/containers/content/WorksContent/styles/brand.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn()};
   width: 100%;
@@ -11,14 +11,14 @@ export const Wrapper = styled.div.attrs((props) => ({
   margin-top: 8px;
 `
 export const Title = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   color: ${theme('thread.articleTitle')};
   font-size: 18px;
   font-weight: bold;
 `
 export const Desc = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   color: ${theme('thread.articleDigest')};
   font-size: 14px;
diff --git a/src/containers/content/WorksContent/styles/filter_bar.js b/src/containers/content/WorksContent/styles/filter_bar.ts
similarity index 100%
rename from src/containers/content/WorksContent/styles/filter_bar.js
rename to src/containers/content/WorksContent/styles/filter_bar.ts
diff --git a/src/containers/content/WorksContent/styles/index.js b/src/containers/content/WorksContent/styles/index.ts
similarity index 92%
rename from src/containers/content/WorksContent/styles/index.js
rename to src/containers/content/WorksContent/styles/index.ts
index 61fcdf463..75061e548 100755
--- a/src/containers/content/WorksContent/styles/index.js
+++ b/src/containers/content/WorksContent/styles/index.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-center')};
   width: 100%;
@@ -12,7 +12,7 @@ export const Wrapper = styled.div.attrs((props) => ({
   ${({ metric }) => css.fitContentWidth(metric)};
 `
 export const LeftSidebarWrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   width: 182px;
 `
diff --git a/src/containers/content/WorksContent/styles/list/index.js b/src/containers/content/WorksContent/styles/list/index.ts
similarity index 100%
rename from src/containers/content/WorksContent/styles/list/index.js
rename to src/containers/content/WorksContent/styles/list/index.ts
diff --git a/src/containers/content/WorksContent/styles/list/option_tab.js b/src/containers/content/WorksContent/styles/list/option_tab.ts
similarity index 100%
rename from src/containers/content/WorksContent/styles/list/option_tab.js
rename to src/containers/content/WorksContent/styles/list/option_tab.ts
diff --git a/src/containers/content/WorksContent/styles/list/trending.js b/src/containers/content/WorksContent/styles/list/trending.ts
similarity index 100%
rename from src/containers/content/WorksContent/styles/list/trending.js
rename to src/containers/content/WorksContent/styles/list/trending.ts
diff --git a/src/containers/content/WorksContent/styles/mile_stone/detail.js b/src/containers/content/WorksContent/styles/mile_stone/detail.ts
similarity index 100%
rename from src/containers/content/WorksContent/styles/mile_stone/detail.js
rename to src/containers/content/WorksContent/styles/mile_stone/detail.ts
diff --git a/src/containers/content/WorksContent/styles/mile_stone/index.js b/src/containers/content/WorksContent/styles/mile_stone/index.ts
similarity index 100%
rename from src/containers/content/WorksContent/styles/mile_stone/index.js
rename to src/containers/content/WorksContent/styles/mile_stone/index.ts
diff --git a/src/containers/content/WorksContent/styles/mile_stone/intro.js b/src/containers/content/WorksContent/styles/mile_stone/intro.ts
similarity index 100%
rename from src/containers/content/WorksContent/styles/mile_stone/intro.js
rename to src/containers/content/WorksContent/styles/mile_stone/intro.ts
diff --git a/src/containers/content/WorksContent/styles/right_sidebar/index.js b/src/containers/content/WorksContent/styles/right_sidebar/index.ts
similarity index 96%
rename from src/containers/content/WorksContent/styles/right_sidebar/index.js
rename to src/containers/content/WorksContent/styles/right_sidebar/index.ts
index 70ca4b8ce..b74af9e35 100644
--- a/src/containers/content/WorksContent/styles/right_sidebar/index.js
+++ b/src/containers/content/WorksContent/styles/right_sidebar/index.ts
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn()};
   width: 200px;
diff --git a/src/containers/content/WorksContent/styles/right_sidebar/interviews_list.js b/src/containers/content/WorksContent/styles/right_sidebar/interviews_list.ts
similarity index 96%
rename from src/containers/content/WorksContent/styles/right_sidebar/interviews_list.js
rename to src/containers/content/WorksContent/styles/right_sidebar/interviews_list.ts
index 2a251c6d0..d2a5d64a4 100644
--- a/src/containers/content/WorksContent/styles/right_sidebar/interviews_list.js
+++ b/src/containers/content/WorksContent/styles/right_sidebar/interviews_list.ts
@@ -4,7 +4,7 @@ import { css, theme } from '@/utils'
 import Img from '@/Img'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   width: 100%;
   min-height: 200px;
diff --git a/src/containers/content/WorksContent/styles/right_sidebar/linkers.js b/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts
similarity index 98%
rename from src/containers/content/WorksContent/styles/right_sidebar/linkers.js
rename to src/containers/content/WorksContent/styles/right_sidebar/linkers.ts
index 36dd8a7cb..aae2115ca 100644
--- a/src/containers/content/WorksContent/styles/right_sidebar/linkers.js
+++ b/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts
@@ -4,7 +4,7 @@ import { css, theme } from '@/utils'
 import Img from '@/Img'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-end', 'justify-between')};
   width: 100%;
diff --git a/src/containers/digest/ArticleDigest/styles/city_list.js b/src/containers/digest/ArticleDigest/styles/city_list.ts
similarity index 100%
rename from src/containers/digest/ArticleDigest/styles/city_list.js
rename to src/containers/digest/ArticleDigest/styles/city_list.ts
diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/author.js b/src/containers/digest/ArticleDigest/styles/desktop_view/author.ts
similarity index 100%
rename from src/containers/digest/ArticleDigest/styles/desktop_view/author.js
rename to src/containers/digest/ArticleDigest/styles/desktop_view/author.ts
diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/index.js b/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts
similarity index 100%
rename from src/containers/digest/ArticleDigest/styles/desktop_view/index.js
rename to src/containers/digest/ArticleDigest/styles/desktop_view/index.ts
diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/publish_date.js b/src/containers/digest/ArticleDigest/styles/desktop_view/publish_date.ts
similarity index 100%
rename from src/containers/digest/ArticleDigest/styles/desktop_view/publish_date.js
rename to src/containers/digest/ArticleDigest/styles/desktop_view/publish_date.ts
diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/repo_title.js b/src/containers/digest/ArticleDigest/styles/desktop_view/repo_title.ts
similarity index 100%
rename from src/containers/digest/ArticleDigest/styles/desktop_view/repo_title.js
rename to src/containers/digest/ArticleDigest/styles/desktop_view/repo_title.ts
diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/state_info.js b/src/containers/digest/ArticleDigest/styles/desktop_view/state_info.ts
similarity index 100%
rename from src/containers/digest/ArticleDigest/styles/desktop_view/state_info.js
rename to src/containers/digest/ArticleDigest/styles/desktop_view/state_info.ts
diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/title.js b/src/containers/digest/ArticleDigest/styles/desktop_view/title.ts
similarity index 100%
rename from src/containers/digest/ArticleDigest/styles/desktop_view/title.js
rename to src/containers/digest/ArticleDigest/styles/desktop_view/title.ts
diff --git a/src/containers/digest/ArticleDigest/styles/job_middle_info.js b/src/containers/digest/ArticleDigest/styles/job_middle_info.ts
similarity index 100%
rename from src/containers/digest/ArticleDigest/styles/job_middle_info.js
rename to src/containers/digest/ArticleDigest/styles/job_middle_info.ts
diff --git a/src/containers/digest/ArticleDigest/styles/mobile_view/index.js b/src/containers/digest/ArticleDigest/styles/mobile_view/index.ts
similarity index 100%
rename from src/containers/digest/ArticleDigest/styles/mobile_view/index.js
rename to src/containers/digest/ArticleDigest/styles/mobile_view/index.ts
diff --git a/src/containers/digest/ArticleDigest/styles/mobile_view/state_info.js b/src/containers/digest/ArticleDigest/styles/mobile_view/state_info.ts
similarity index 100%
rename from src/containers/digest/ArticleDigest/styles/mobile_view/state_info.js
rename to src/containers/digest/ArticleDigest/styles/mobile_view/state_info.ts
diff --git a/src/containers/digest/ArticleDigest/styles/reaction_numbers.js b/src/containers/digest/ArticleDigest/styles/reaction_numbers.ts
similarity index 100%
rename from src/containers/digest/ArticleDigest/styles/reaction_numbers.js
rename to src/containers/digest/ArticleDigest/styles/reaction_numbers.ts
diff --git a/src/containers/digest/ArticleDigest/styles/repo_middle_info.js b/src/containers/digest/ArticleDigest/styles/repo_middle_info.ts
similarity index 100%
rename from src/containers/digest/ArticleDigest/styles/repo_middle_info.js
rename to src/containers/digest/ArticleDigest/styles/repo_middle_info.ts
diff --git a/src/containers/digest/CommunityDigest/index.js b/src/containers/digest/CommunityDigest/index.js
index 71dd0dd38..1d3b498cd 100755
--- a/src/containers/digest/CommunityDigest/index.js
+++ b/src/containers/digest/CommunityDigest/index.js
@@ -30,7 +30,7 @@ const CommunityDigestContainer = ({ communityDigest: store, metric }) => {
   } = store
 
   return (
-    <Wrapper testId="community-digest">
+    <Wrapper testid="community-digest">
       {bannerLayout === C11N.BRIEF ? (
         <BriefView
           metric={metric}
diff --git a/src/containers/digest/CommunityDigest/styles/brief_view.js b/src/containers/digest/CommunityDigest/styles/brief_view.ts
similarity index 100%
rename from src/containers/digest/CommunityDigest/styles/brief_view.js
rename to src/containers/digest/CommunityDigest/styles/brief_view.ts
diff --git a/src/containers/digest/CommunityDigest/styles/digest_view/column_view/index.js b/src/containers/digest/CommunityDigest/styles/digest_view/column_view/index.ts
similarity index 100%
rename from src/containers/digest/CommunityDigest/styles/digest_view/column_view/index.js
rename to src/containers/digest/CommunityDigest/styles/digest_view/column_view/index.ts
diff --git a/src/containers/digest/CommunityDigest/styles/digest_view/row_view/index.js b/src/containers/digest/CommunityDigest/styles/digest_view/row_view/index.ts
similarity index 100%
rename from src/containers/digest/CommunityDigest/styles/digest_view/row_view/index.js
rename to src/containers/digest/CommunityDigest/styles/digest_view/row_view/index.ts
diff --git a/src/containers/digest/CommunityDigest/styles/digest_view/row_view/sub_title.js b/src/containers/digest/CommunityDigest/styles/digest_view/row_view/sub_title.ts
similarity index 100%
rename from src/containers/digest/CommunityDigest/styles/digest_view/row_view/sub_title.js
rename to src/containers/digest/CommunityDigest/styles/digest_view/row_view/sub_title.ts
diff --git a/src/containers/digest/CommunityDigest/styles/digest_view/row_view/subscribe_info.js b/src/containers/digest/CommunityDigest/styles/digest_view/row_view/subscribe_info.ts
similarity index 100%
rename from src/containers/digest/CommunityDigest/styles/digest_view/row_view/subscribe_info.js
rename to src/containers/digest/CommunityDigest/styles/digest_view/row_view/subscribe_info.ts
diff --git a/src/containers/digest/CommunityDigest/styles/digest_view/row_view/team_list.js b/src/containers/digest/CommunityDigest/styles/digest_view/row_view/team_list.ts
similarity index 100%
rename from src/containers/digest/CommunityDigest/styles/digest_view/row_view/team_list.js
rename to src/containers/digest/CommunityDigest/styles/digest_view/row_view/team_list.ts
diff --git a/src/containers/digest/CommunityDigest/styles/expand_texts.js b/src/containers/digest/CommunityDigest/styles/expand_texts.ts
similarity index 100%
rename from src/containers/digest/CommunityDigest/styles/expand_texts.js
rename to src/containers/digest/CommunityDigest/styles/expand_texts.ts
diff --git a/src/containers/digest/CommunityDigest/styles/index.js b/src/containers/digest/CommunityDigest/styles/index.ts
similarity index 95%
rename from src/containers/digest/CommunityDigest/styles/index.js
rename to src/containers/digest/CommunityDigest/styles/index.ts
index 81d19844d..f3887e9f4 100755
--- a/src/containers/digest/CommunityDigest/styles/index.js
+++ b/src/containers/digest/CommunityDigest/styles/index.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { theme, css } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   width: 100%;
 `
diff --git a/src/containers/digest/CommunityDigest/styles/social_list.js b/src/containers/digest/CommunityDigest/styles/social_list.ts
similarity index 100%
rename from src/containers/digest/CommunityDigest/styles/social_list.js
rename to src/containers/digest/CommunityDigest/styles/social_list.ts
diff --git a/src/containers/editor/AccountEditor/styles/background_inputer.js b/src/containers/editor/AccountEditor/styles/background_inputer.ts
similarity index 100%
rename from src/containers/editor/AccountEditor/styles/background_inputer.js
rename to src/containers/editor/AccountEditor/styles/background_inputer.ts
diff --git a/src/containers/editor/AccountEditor/styles/index.js b/src/containers/editor/AccountEditor/styles/index.ts
similarity index 100%
rename from src/containers/editor/AccountEditor/styles/index.js
rename to src/containers/editor/AccountEditor/styles/index.ts
diff --git a/src/containers/editor/AccountEditor/styles/sex_inputer.js b/src/containers/editor/AccountEditor/styles/sex_inputer.ts
similarity index 100%
rename from src/containers/editor/AccountEditor/styles/sex_inputer.js
rename to src/containers/editor/AccountEditor/styles/sex_inputer.ts
diff --git a/src/containers/editor/AccountEditor/styles/social_inputer.js b/src/containers/editor/AccountEditor/styles/social_inputer.ts
similarity index 100%
rename from src/containers/editor/AccountEditor/styles/social_inputer.js
rename to src/containers/editor/AccountEditor/styles/social_inputer.ts
diff --git a/src/containers/editor/ArticleEditor/index.js b/src/containers/editor/ArticleEditor/index.js
index ea83cbfb9..3043f5d08 100755
--- a/src/containers/editor/ArticleEditor/index.js
+++ b/src/containers/editor/ArticleEditor/index.js
@@ -23,13 +23,13 @@ import { useInit } from './logic'
 /* eslint-disable-next-line */
 const log = buildLog('C:ArticleEditor')
 
-const ArticleEditorContainer = ({ articleEditor: store, testId, metric }) => {
+const ArticleEditorContainer = ({ articleEditor: store, testid, metric }) => {
   useInit(store)
 
   const { showSubTitle, step } = store
 
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       <InnerWrapper metric={metric}>
         {step === STEP.EDIT ? (
           <Editor showSubTitle={showSubTitle} />
@@ -43,12 +43,12 @@ const ArticleEditorContainer = ({ articleEditor: store, testId, metric }) => {
 
 ArticleEditorContainer.propTypes = {
   articleEditor: T.any.isRequired,
-  testId: T.string,
+  testid: T.string,
   metric: T.oneOf(values(METRIC)),
 }
 
 ArticleEditorContainer.defaultProps = {
-  testId: 'article-editor',
+  testid: 'article-editor',
   metric: METRIC.ARTICLE_EDITOR,
 }
 
diff --git a/src/containers/editor/ArticleEditor/styles/editor/header/adder.js b/src/containers/editor/ArticleEditor/styles/editor/header/adder.ts
similarity index 96%
rename from src/containers/editor/ArticleEditor/styles/editor/header/adder.js
rename to src/containers/editor/ArticleEditor/styles/editor/header/adder.ts
index 5b4e8aeed..6a5cf0c84 100644
--- a/src/containers/editor/ArticleEditor/styles/editor/header/adder.js
+++ b/src/containers/editor/ArticleEditor/styles/editor/header/adder.ts
@@ -6,7 +6,7 @@ import Img from '@/Img'
 import { Wrapper as HeaderWrapper } from './index'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   position: absolute;
   top: -8px;
diff --git a/src/containers/editor/ArticleEditor/styles/editor/header/deleter.js b/src/containers/editor/ArticleEditor/styles/editor/header/deleter.ts
similarity index 96%
rename from src/containers/editor/ArticleEditor/styles/editor/header/deleter.js
rename to src/containers/editor/ArticleEditor/styles/editor/header/deleter.ts
index bdb4b187e..233cdf583 100644
--- a/src/containers/editor/ArticleEditor/styles/editor/header/deleter.js
+++ b/src/containers/editor/ArticleEditor/styles/editor/header/deleter.ts
@@ -6,7 +6,7 @@ import Img from '@/Img'
 import { SubTitleWrapper } from './index'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   position: absolute;
   top: 21px;
diff --git a/src/containers/editor/ArticleEditor/styles/editor/header/index.js b/src/containers/editor/ArticleEditor/styles/editor/header/index.ts
similarity index 97%
rename from src/containers/editor/ArticleEditor/styles/editor/header/index.js
rename to src/containers/editor/ArticleEditor/styles/editor/header/index.ts
index ce2963685..12884e20c 100644
--- a/src/containers/editor/ArticleEditor/styles/editor/header/index.js
+++ b/src/containers/editor/ArticleEditor/styles/editor/header/index.ts
@@ -4,7 +4,7 @@ import Input from '@/components/Input'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn()};
   width: 100%;
diff --git a/src/containers/editor/ArticleEditor/styles/editor/index.js b/src/containers/editor/ArticleEditor/styles/editor/index.ts
similarity index 100%
rename from src/containers/editor/ArticleEditor/styles/editor/index.js
rename to src/containers/editor/ArticleEditor/styles/editor/index.ts
diff --git a/src/containers/editor/ArticleEditor/styles/index.js b/src/containers/editor/ArticleEditor/styles/index.ts
similarity index 95%
rename from src/containers/editor/ArticleEditor/styles/index.js
rename to src/containers/editor/ArticleEditor/styles/index.ts
index d54a62033..019b762a4 100755
--- a/src/containers/editor/ArticleEditor/styles/index.js
+++ b/src/containers/editor/ArticleEditor/styles/index.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('justify-center')};
   width: 100%;
diff --git a/src/containers/editor/ArticleEditor/styles/settings/index.js b/src/containers/editor/ArticleEditor/styles/settings/index.ts
similarity index 100%
rename from src/containers/editor/ArticleEditor/styles/settings/index.js
rename to src/containers/editor/ArticleEditor/styles/settings/index.ts
diff --git a/src/containers/editor/CommunityEditor/Banner/index.js b/src/containers/editor/CommunityEditor/Banner/index.js
index 01be807ff..fed312238 100755
--- a/src/containers/editor/CommunityEditor/Banner/index.js
+++ b/src/containers/editor/CommunityEditor/Banner/index.js
@@ -42,7 +42,7 @@ const Banner = ({
     }
   }
 
-  return <Wrapper testId="create-community-digest">{stepComp}</Wrapper>
+  return <Wrapper testid="create-community-digest">{stepComp}</Wrapper>
 }
 
 export default React.memo(Banner)
diff --git a/src/containers/editor/CommunityEditor/styles/banner/index.js b/src/containers/editor/CommunityEditor/styles/banner/index.ts
similarity index 94%
rename from src/containers/editor/CommunityEditor/styles/banner/index.js
rename to src/containers/editor/CommunityEditor/styles/banner/index.ts
index f7796cf25..02185374e 100755
--- a/src/containers/editor/CommunityEditor/styles/banner/index.js
+++ b/src/containers/editor/CommunityEditor/styles/banner/index.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { theme, css } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('justify-center')};
 
diff --git a/src/containers/editor/CommunityEditor/styles/banner/input_box.js b/src/containers/editor/CommunityEditor/styles/banner/input_box.ts
similarity index 100%
rename from src/containers/editor/CommunityEditor/styles/banner/input_box.js
rename to src/containers/editor/CommunityEditor/styles/banner/input_box.ts
diff --git a/src/containers/editor/CommunityEditor/styles/banner/select_type/index.js b/src/containers/editor/CommunityEditor/styles/banner/select_type/index.ts
similarity index 100%
rename from src/containers/editor/CommunityEditor/styles/banner/select_type/index.js
rename to src/containers/editor/CommunityEditor/styles/banner/select_type/index.ts
diff --git a/src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.js b/src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.ts
similarity index 100%
rename from src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.js
rename to src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.ts
diff --git a/src/containers/editor/CommunityEditor/styles/banner/setup_domain/index.js b/src/containers/editor/CommunityEditor/styles/banner/setup_domain/index.ts
similarity index 100%
rename from src/containers/editor/CommunityEditor/styles/banner/setup_domain/index.js
rename to src/containers/editor/CommunityEditor/styles/banner/setup_domain/index.ts
diff --git a/src/containers/editor/CommunityEditor/styles/content/demo_community.js b/src/containers/editor/CommunityEditor/styles/content/demo_community.ts
similarity index 100%
rename from src/containers/editor/CommunityEditor/styles/content/demo_community.js
rename to src/containers/editor/CommunityEditor/styles/content/demo_community.ts
diff --git a/src/containers/editor/CommunityEditor/styles/content/fake_browser/content.js b/src/containers/editor/CommunityEditor/styles/content/fake_browser/content.ts
similarity index 100%
rename from src/containers/editor/CommunityEditor/styles/content/fake_browser/content.js
rename to src/containers/editor/CommunityEditor/styles/content/fake_browser/content.ts
diff --git a/src/containers/editor/CommunityEditor/styles/content/fake_browser/index.js b/src/containers/editor/CommunityEditor/styles/content/fake_browser/index.ts
similarity index 100%
rename from src/containers/editor/CommunityEditor/styles/content/fake_browser/index.js
rename to src/containers/editor/CommunityEditor/styles/content/fake_browser/index.ts
diff --git a/src/containers/editor/CommunityEditor/styles/content/index.js b/src/containers/editor/CommunityEditor/styles/content/index.ts
similarity index 100%
rename from src/containers/editor/CommunityEditor/styles/content/index.js
rename to src/containers/editor/CommunityEditor/styles/content/index.ts
diff --git a/src/containers/editor/CommunityEditor/styles/content/select_type.js b/src/containers/editor/CommunityEditor/styles/content/select_type.ts
similarity index 100%
rename from src/containers/editor/CommunityEditor/styles/content/select_type.js
rename to src/containers/editor/CommunityEditor/styles/content/select_type.ts
diff --git a/src/containers/editor/CommunityEditor/styles/content/setup_domain.js b/src/containers/editor/CommunityEditor/styles/content/setup_domain.ts
similarity index 100%
rename from src/containers/editor/CommunityEditor/styles/content/setup_domain.js
rename to src/containers/editor/CommunityEditor/styles/content/setup_domain.ts
diff --git a/src/containers/editor/CommunityEditor/styles/hinter.js b/src/containers/editor/CommunityEditor/styles/hinter.ts
similarity index 100%
rename from src/containers/editor/CommunityEditor/styles/hinter.js
rename to src/containers/editor/CommunityEditor/styles/hinter.ts
diff --git a/src/containers/editor/CommunityEditor/styles/index.js b/src/containers/editor/CommunityEditor/styles/index.ts
similarity index 100%
rename from src/containers/editor/CommunityEditor/styles/index.js
rename to src/containers/editor/CommunityEditor/styles/index.ts
diff --git a/src/containers/editor/JobEditor/styles/company_info_editor.js b/src/containers/editor/JobEditor/styles/company_info_editor.ts
similarity index 100%
rename from src/containers/editor/JobEditor/styles/company_info_editor.js
rename to src/containers/editor/JobEditor/styles/company_info_editor.ts
diff --git a/src/containers/editor/JobEditor/styles/editor.js b/src/containers/editor/JobEditor/styles/editor.ts
similarity index 100%
rename from src/containers/editor/JobEditor/styles/editor.js
rename to src/containers/editor/JobEditor/styles/editor.ts
diff --git a/src/containers/editor/JobEditor/styles/editor_footer.js b/src/containers/editor/JobEditor/styles/editor_footer.ts
similarity index 100%
rename from src/containers/editor/JobEditor/styles/editor_footer.js
rename to src/containers/editor/JobEditor/styles/editor_footer.ts
diff --git a/src/containers/editor/JobEditor/styles/header.js b/src/containers/editor/JobEditor/styles/header.ts
similarity index 100%
rename from src/containers/editor/JobEditor/styles/header.js
rename to src/containers/editor/JobEditor/styles/header.ts
index c20ed875b..c1b9d72b7 100755
--- a/src/containers/editor/JobEditor/styles/header.js
+++ b/src/containers/editor/JobEditor/styles/header.ts
@@ -29,6 +29,15 @@ export const RefUsersWrapper = styled.div`
 export const RefUserList = styled.div`
   margin-top: -10px;
 `
+export const MarkDownHint = styled.div`
+  ${css.flex()};
+  color: ${theme('editor.placeholder')};
+  &:hover {
+    color: ${theme('editor.content')};
+    cursor: pointer;
+  }
+  transition: color 0.3s;
+`
 export const MarkdownIcon = styled(Img)`
   fill: #51abb2;
   width: 20px;
@@ -39,15 +48,6 @@ export const MarkdownIcon = styled(Img)`
     fill: #618c92;
   }
 `
-export const MarkDownHint = styled.div`
-  ${css.flex()};
-  color: ${theme('editor.placeholder')};
-  &:hover {
-    color: ${theme('editor.content')};
-    cursor: pointer;
-  }
-  transition: color 0.3s;
-`
 export const BackToEditHint = styled.div`
   ${css.flex()};
   color: ${theme('editor.title')};
diff --git a/src/containers/editor/JobEditor/styles/index.js b/src/containers/editor/JobEditor/styles/index.ts
similarity index 100%
rename from src/containers/editor/JobEditor/styles/index.js
rename to src/containers/editor/JobEditor/styles/index.ts
diff --git a/src/containers/editor/JobEditor/styles/markdown_helper.js b/src/containers/editor/JobEditor/styles/markdown_helper.ts
similarity index 100%
rename from src/containers/editor/JobEditor/styles/markdown_helper.js
rename to src/containers/editor/JobEditor/styles/markdown_helper.ts
diff --git a/src/containers/editor/JobEditor/styles/preview.js b/src/containers/editor/JobEditor/styles/preview.ts
similarity index 100%
rename from src/containers/editor/JobEditor/styles/preview.js
rename to src/containers/editor/JobEditor/styles/preview.ts
diff --git a/src/containers/editor/PostEditor/styles/editor.js b/src/containers/editor/PostEditor/styles/editor.ts
similarity index 100%
rename from src/containers/editor/PostEditor/styles/editor.js
rename to src/containers/editor/PostEditor/styles/editor.ts
diff --git a/src/containers/editor/PostEditor/styles/editor_footer.js b/src/containers/editor/PostEditor/styles/editor_footer.ts
similarity index 100%
rename from src/containers/editor/PostEditor/styles/editor_footer.js
rename to src/containers/editor/PostEditor/styles/editor_footer.ts
diff --git a/src/containers/editor/PostEditor/styles/header.js b/src/containers/editor/PostEditor/styles/header.ts
similarity index 99%
rename from src/containers/editor/PostEditor/styles/header.js
rename to src/containers/editor/PostEditor/styles/header.ts
index 74fecd5cc..a2686ef54 100755
--- a/src/containers/editor/PostEditor/styles/header.js
+++ b/src/containers/editor/PostEditor/styles/header.ts
@@ -30,7 +30,15 @@ export const RefUsersWrapper = styled.div`
 export const RefUserList = styled.div`
   margin-top: -10px;
 `
-
+export const MarkDownHint = styled.div`
+  ${css.flex()};
+  color: ${theme('editor.placeholder')};
+  &:hover {
+    color: ${theme('editor.content')};
+    cursor: pointer;
+  }
+  transition: color 0.3s;
+`
 export const MarkdownIcon = styled(Img)`
   fill: #51abb2;
   width: 20px;
@@ -41,15 +49,6 @@ export const MarkdownIcon = styled(Img)`
     fill: #618c92;
   }
 `
-export const MarkDownHint = styled.div`
-  ${css.flex()};
-  color: ${theme('editor.placeholder')};
-  &:hover {
-    color: ${theme('editor.content')};
-    cursor: pointer;
-  }
-  transition: color 0.3s;
-`
 export const BackToEditHint = styled.div`
   ${css.flex()};
   color: ${theme('editor.title')};
diff --git a/src/containers/editor/PostEditor/styles/index.js b/src/containers/editor/PostEditor/styles/index.ts
similarity index 100%
rename from src/containers/editor/PostEditor/styles/index.js
rename to src/containers/editor/PostEditor/styles/index.ts
diff --git a/src/containers/editor/PostEditor/styles/markdown_helper.js b/src/containers/editor/PostEditor/styles/markdown_helper.ts
similarity index 100%
rename from src/containers/editor/PostEditor/styles/markdown_helper.js
rename to src/containers/editor/PostEditor/styles/markdown_helper.ts
diff --git a/src/containers/editor/PostEditor/styles/preview.js b/src/containers/editor/PostEditor/styles/preview.ts
similarity index 100%
rename from src/containers/editor/PostEditor/styles/preview.js
rename to src/containers/editor/PostEditor/styles/preview.ts
diff --git a/src/containers/editor/PostEditor/styles/radar_note.js b/src/containers/editor/PostEditor/styles/radar_note.ts
similarity index 100%
rename from src/containers/editor/PostEditor/styles/radar_note.js
rename to src/containers/editor/PostEditor/styles/radar_note.ts
diff --git a/src/containers/editor/RichEditor/styles/index.js b/src/containers/editor/RichEditor/styles/index.ts
similarity index 100%
rename from src/containers/editor/RichEditor/styles/index.js
rename to src/containers/editor/RichEditor/styles/index.ts
diff --git a/src/containers/editor/VideoEditor/styles/alert_message.js b/src/containers/editor/VideoEditor/styles/alert_message.ts
similarity index 100%
rename from src/containers/editor/VideoEditor/styles/alert_message.js
rename to src/containers/editor/VideoEditor/styles/alert_message.ts
diff --git a/src/containers/editor/VideoEditor/styles/cover_uploader.js b/src/containers/editor/VideoEditor/styles/cover_uploader.ts
similarity index 100%
rename from src/containers/editor/VideoEditor/styles/cover_uploader.js
rename to src/containers/editor/VideoEditor/styles/cover_uploader.ts
diff --git a/src/containers/editor/VideoEditor/styles/index.js b/src/containers/editor/VideoEditor/styles/index.ts
similarity index 100%
rename from src/containers/editor/VideoEditor/styles/index.js
rename to src/containers/editor/VideoEditor/styles/index.ts
diff --git a/src/containers/editor/VideoEditor/styles/source_options.js b/src/containers/editor/VideoEditor/styles/source_options.ts
similarity index 100%
rename from src/containers/editor/VideoEditor/styles/source_options.js
rename to src/containers/editor/VideoEditor/styles/source_options.ts
diff --git a/src/containers/editor/WorksEditor/index.js b/src/containers/editor/WorksEditor/index.js
index f0aab0a8c..4ece5ef79 100755
--- a/src/containers/editor/WorksEditor/index.js
+++ b/src/containers/editor/WorksEditor/index.js
@@ -23,13 +23,13 @@ import { useInit } from './logic'
 /* eslint-disable-next-line */
 const log = buildLog('C:WorksEditor')
 
-const WorksEditorContainer = ({ worksEditor: store, testId, metric }) => {
+const WorksEditorContainer = ({ worksEditor: store, testid, metric }) => {
   useInit(store)
 
   const { step, worksData, useTemplate } = store
 
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       <InnerWrapper metric={metric}>
         <Preview step={step} works={worksData} />
         <Steps step={step} />
@@ -41,12 +41,12 @@ const WorksEditorContainer = ({ worksEditor: store, testId, metric }) => {
 
 WorksEditorContainer.propTypes = {
   worksEditor: T.any.isRequired,
-  testId: T.string,
+  testid: T.string,
   metric: T.oneOf(values(METRIC)),
 }
 
 WorksEditorContainer.defaultProps = {
-  testId: 'works-editor',
+  testid: 'works-editor',
   metric: METRIC.COMMUNITY,
 }
 
diff --git a/src/containers/editor/WorksEditor/styles/content/article_part/index.js b/src/containers/editor/WorksEditor/styles/content/article_part/index.ts
similarity index 96%
rename from src/containers/editor/WorksEditor/styles/content/article_part/index.js
rename to src/containers/editor/WorksEditor/styles/content/article_part/index.ts
index 1ce12e4a7..3e1469e60 100644
--- a/src/containers/editor/WorksEditor/styles/content/article_part/index.js
+++ b/src/containers/editor/WorksEditor/styles/content/article_part/index.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-start', 'justify-start')};
   width: 100%;
diff --git a/src/containers/editor/WorksEditor/styles/content/basic_info_part/cover_uploader.js b/src/containers/editor/WorksEditor/styles/content/basic_info_part/cover_uploader.ts
similarity index 96%
rename from src/containers/editor/WorksEditor/styles/content/basic_info_part/cover_uploader.js
rename to src/containers/editor/WorksEditor/styles/content/basic_info_part/cover_uploader.ts
index b53b56921..481147b9e 100644
--- a/src/containers/editor/WorksEditor/styles/content/basic_info_part/cover_uploader.js
+++ b/src/containers/editor/WorksEditor/styles/content/basic_info_part/cover_uploader.ts
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-start')};
   width: 100%;
diff --git a/src/containers/editor/WorksEditor/styles/content/basic_info_part/index.js b/src/containers/editor/WorksEditor/styles/content/basic_info_part/index.ts
similarity index 97%
rename from src/containers/editor/WorksEditor/styles/content/basic_info_part/index.js
rename to src/containers/editor/WorksEditor/styles/content/basic_info_part/index.ts
index f22ba95b6..951b21784 100644
--- a/src/containers/editor/WorksEditor/styles/content/basic_info_part/index.js
+++ b/src/containers/editor/WorksEditor/styles/content/basic_info_part/index.ts
@@ -4,7 +4,7 @@ import { css, theme } from '@/utils'
 import FormItem from '@/components/FormItem'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-start', 'justify-start')};
   width: 100%;
diff --git a/src/containers/editor/WorksEditor/styles/content/common_questions.js b/src/containers/editor/WorksEditor/styles/content/common_questions.ts
similarity index 95%
rename from src/containers/editor/WorksEditor/styles/content/common_questions.js
rename to src/containers/editor/WorksEditor/styles/content/common_questions.ts
index be903fc38..7d34c4f5f 100644
--- a/src/containers/editor/WorksEditor/styles/content/common_questions.js
+++ b/src/containers/editor/WorksEditor/styles/content/common_questions.ts
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-center')};
   width: auto;
diff --git a/src/containers/editor/WorksEditor/styles/content/index.js b/src/containers/editor/WorksEditor/styles/content/index.ts
similarity index 96%
rename from src/containers/editor/WorksEditor/styles/content/index.js
rename to src/containers/editor/WorksEditor/styles/content/index.ts
index ecf682f70..9110b4933 100644
--- a/src/containers/editor/WorksEditor/styles/content/index.js
+++ b/src/containers/editor/WorksEditor/styles/content/index.ts
@@ -4,7 +4,7 @@ import { css, theme } from '@/utils'
 import { CONTENT_WIDTH } from '../metric'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-both')};
   height: 100%;
diff --git a/src/containers/editor/WorksEditor/styles/content/launch_part.js b/src/containers/editor/WorksEditor/styles/content/launch_part.ts
similarity index 94%
rename from src/containers/editor/WorksEditor/styles/content/launch_part.js
rename to src/containers/editor/WorksEditor/styles/content/launch_part.ts
index 0ddc1f258..b939be4b3 100644
--- a/src/containers/editor/WorksEditor/styles/content/launch_part.js
+++ b/src/containers/editor/WorksEditor/styles/content/launch_part.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-start', 'justify-start')};
   width: 100%;
diff --git a/src/containers/editor/WorksEditor/styles/content/name_part.js b/src/containers/editor/WorksEditor/styles/content/name_part.ts
similarity index 94%
rename from src/containers/editor/WorksEditor/styles/content/name_part.js
rename to src/containers/editor/WorksEditor/styles/content/name_part.ts
index ca6ab42b0..6b66749f0 100644
--- a/src/containers/editor/WorksEditor/styles/content/name_part.js
+++ b/src/containers/editor/WorksEditor/styles/content/name_part.ts
@@ -4,7 +4,7 @@ import { css, theme } from '@/utils'
 import { BaseInput } from './index'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-center', 'justify-start')};
   width: 100%;
diff --git a/src/containers/editor/WorksEditor/styles/content/tech_stack_part/index.js b/src/containers/editor/WorksEditor/styles/content/tech_stack_part/index.ts
similarity index 94%
rename from src/containers/editor/WorksEditor/styles/content/tech_stack_part/index.js
rename to src/containers/editor/WorksEditor/styles/content/tech_stack_part/index.ts
index 0ddc1f258..b939be4b3 100644
--- a/src/containers/editor/WorksEditor/styles/content/tech_stack_part/index.js
+++ b/src/containers/editor/WorksEditor/styles/content/tech_stack_part/index.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-start', 'justify-start')};
   width: 100%;
diff --git a/src/containers/editor/WorksEditor/styles/index.js b/src/containers/editor/WorksEditor/styles/index.ts
similarity index 92%
rename from src/containers/editor/WorksEditor/styles/index.js
rename to src/containers/editor/WorksEditor/styles/index.ts
index 8e23c53da..e8ab576da 100755
--- a/src/containers/editor/WorksEditor/styles/index.js
+++ b/src/containers/editor/WorksEditor/styles/index.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('justify-center')};
   width: 100%;
diff --git a/src/containers/editor/WorksEditor/styles/metric.js b/src/containers/editor/WorksEditor/styles/metric.ts
similarity index 100%
rename from src/containers/editor/WorksEditor/styles/metric.js
rename to src/containers/editor/WorksEditor/styles/metric.ts
diff --git a/src/containers/editor/WorksEditor/styles/preview.js b/src/containers/editor/WorksEditor/styles/preview.ts
similarity index 93%
rename from src/containers/editor/WorksEditor/styles/preview.js
rename to src/containers/editor/WorksEditor/styles/preview.ts
index 586369f82..0450978f5 100644
--- a/src/containers/editor/WorksEditor/styles/preview.js
+++ b/src/containers/editor/WorksEditor/styles/preview.ts
@@ -4,7 +4,7 @@ import { css } from '@/utils'
 import { CONTENT_WIDTH, CONTENT_NARROW_WIDTH } from './metric'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('justify-center')};
   width: ${({ narrow }) =>
diff --git a/src/containers/editor/WorksEditor/styles/steps.js b/src/containers/editor/WorksEditor/styles/steps.ts
similarity index 98%
rename from src/containers/editor/WorksEditor/styles/steps.js
rename to src/containers/editor/WorksEditor/styles/steps.ts
index 088d2fb97..5ac4124ea 100644
--- a/src/containers/editor/WorksEditor/styles/steps.js
+++ b/src/containers/editor/WorksEditor/styles/steps.ts
@@ -6,7 +6,7 @@ import { css, theme } from '@/utils'
 import { CONTENT_WIDTH } from './metric'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   position: relative;
   ${css.flex('align-center', 'justify-between')};
diff --git a/src/containers/layout/GlobalLayout/styles/index.js b/src/containers/layout/GlobalLayout/styles/index.ts
similarity index 100%
rename from src/containers/layout/GlobalLayout/styles/index.js
rename to src/containers/layout/GlobalLayout/styles/index.ts
diff --git a/src/containers/layout/ThemePalette/CodeSyxHighlight.js b/src/containers/layout/ThemePalette/CodeSyxHighlight.ts
similarity index 100%
rename from src/containers/layout/ThemePalette/CodeSyxHighlight.js
rename to src/containers/layout/ThemePalette/CodeSyxHighlight.ts
diff --git a/src/containers/layout/ThemePalette/GlobalStyle.js b/src/containers/layout/ThemePalette/GlobalStyle.ts
similarity index 100%
rename from src/containers/layout/ThemePalette/GlobalStyle.js
rename to src/containers/layout/ThemePalette/GlobalStyle.ts
diff --git a/src/containers/layout/ThemePalette/MarkDownStyle.js b/src/containers/layout/ThemePalette/MarkDownStyle.ts
similarity index 100%
rename from src/containers/layout/ThemePalette/MarkDownStyle.js
rename to src/containers/layout/ThemePalette/MarkDownStyle.ts
diff --git a/src/containers/layout/ThemePalette/RichEditorStyle.js b/src/containers/layout/ThemePalette/RichEditorStyle.ts
similarity index 100%
rename from src/containers/layout/ThemePalette/RichEditorStyle.js
rename to src/containers/layout/ThemePalette/RichEditorStyle.ts
diff --git a/src/containers/layout/ThemePalette/ThirdPartyOverWrite.js b/src/containers/layout/ThemePalette/ThirdPartyOverWrite.ts
similarity index 100%
rename from src/containers/layout/ThemePalette/ThirdPartyOverWrite.js
rename to src/containers/layout/ThemePalette/ThirdPartyOverWrite.ts
diff --git a/src/containers/layout/ThemePalette/normalize.js b/src/containers/layout/ThemePalette/normalize.ts
similarity index 100%
rename from src/containers/layout/ThemePalette/normalize.js
rename to src/containers/layout/ThemePalette/normalize.ts
diff --git a/src/containers/thread/CheatsheetThread/styles/CheatsheetMarkStyles.js b/src/containers/thread/CheatsheetThread/styles/CheatsheetMarkStyles.ts
similarity index 100%
rename from src/containers/thread/CheatsheetThread/styles/CheatsheetMarkStyles.js
rename to src/containers/thread/CheatsheetThread/styles/CheatsheetMarkStyles.ts
diff --git a/src/containers/thread/CheatsheetThread/styles/cheatsheet.js b/src/containers/thread/CheatsheetThread/styles/cheatsheet.ts
similarity index 100%
rename from src/containers/thread/CheatsheetThread/styles/cheatsheet.js
rename to src/containers/thread/CheatsheetThread/styles/cheatsheet.ts
diff --git a/src/containers/thread/CheatsheetThread/styles/index.js b/src/containers/thread/CheatsheetThread/styles/index.ts
similarity index 100%
rename from src/containers/thread/CheatsheetThread/styles/index.js
rename to src/containers/thread/CheatsheetThread/styles/index.ts
diff --git a/src/containers/thread/CheatsheetThread/styles/note.js b/src/containers/thread/CheatsheetThread/styles/note.ts
similarity index 100%
rename from src/containers/thread/CheatsheetThread/styles/note.js
rename to src/containers/thread/CheatsheetThread/styles/note.ts
diff --git a/src/containers/thread/JobsThread/styles/index.js b/src/containers/thread/JobsThread/styles/index.ts
similarity index 100%
rename from src/containers/thread/JobsThread/styles/index.js
rename to src/containers/thread/JobsThread/styles/index.ts
diff --git a/src/containers/thread/JobsThread/styles/publish_note.js b/src/containers/thread/JobsThread/styles/publish_note.ts
similarity index 100%
rename from src/containers/thread/JobsThread/styles/publish_note.js
rename to src/containers/thread/JobsThread/styles/publish_note.ts
diff --git a/src/containers/thread/PostsThread/styles/city_card.js b/src/containers/thread/PostsThread/styles/city_card.ts
similarity index 100%
rename from src/containers/thread/PostsThread/styles/city_card.js
rename to src/containers/thread/PostsThread/styles/city_card.ts
diff --git a/src/containers/thread/PostsThread/styles/city_list.js b/src/containers/thread/PostsThread/styles/city_list.ts
similarity index 100%
rename from src/containers/thread/PostsThread/styles/city_list.js
rename to src/containers/thread/PostsThread/styles/city_list.ts
diff --git a/src/containers/thread/PostsThread/styles/city_side_note.js b/src/containers/thread/PostsThread/styles/city_side_note.ts
similarity index 100%
rename from src/containers/thread/PostsThread/styles/city_side_note.js
rename to src/containers/thread/PostsThread/styles/city_side_note.ts
diff --git a/src/containers/thread/PostsThread/styles/index.js b/src/containers/thread/PostsThread/styles/index.ts
similarity index 100%
rename from src/containers/thread/PostsThread/styles/index.js
rename to src/containers/thread/PostsThread/styles/index.ts
diff --git a/src/containers/thread/ReposThread/styles/index.js b/src/containers/thread/ReposThread/styles/index.ts
similarity index 100%
rename from src/containers/thread/ReposThread/styles/index.js
rename to src/containers/thread/ReposThread/styles/index.ts
diff --git a/src/containers/thread/RoadmapThread/index.js b/src/containers/thread/RoadmapThread/index.js
index 44cf01a3b..3393be66f 100755
--- a/src/containers/thread/RoadmapThread/index.js
+++ b/src/containers/thread/RoadmapThread/index.js
@@ -22,7 +22,7 @@ const RoadmapThreadContainer = ({ roadmapThread: store }) => {
   useInit(store)
 
   return (
-    <Wrapper testId="roadmapThread">
+    <Wrapper testid="roadmapThread">
       <TodoList label="计划中" />
       <TodoList label="开发中" />
     </Wrapper>
diff --git a/src/containers/thread/RoadmapThread/styles/index.js b/src/containers/thread/RoadmapThread/styles/index.ts
similarity index 89%
rename from src/containers/thread/RoadmapThread/styles/index.js
rename to src/containers/thread/RoadmapThread/styles/index.ts
index 1895fe4d8..37ede45b0 100755
--- a/src/containers/thread/RoadmapThread/styles/index.js
+++ b/src/containers/thread/RoadmapThread/styles/index.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex()};
   background: ${theme('thread.bg')};
diff --git a/src/containers/thread/RoadmapThread/styles/todo_list/index.js b/src/containers/thread/RoadmapThread/styles/todo_list/index.ts
similarity index 100%
rename from src/containers/thread/RoadmapThread/styles/todo_list/index.js
rename to src/containers/thread/RoadmapThread/styles/todo_list/index.ts
diff --git a/src/containers/thread/RoadmapThread/styles/todo_list/post_info.js b/src/containers/thread/RoadmapThread/styles/todo_list/post_info.ts
similarity index 100%
rename from src/containers/thread/RoadmapThread/styles/todo_list/post_info.js
rename to src/containers/thread/RoadmapThread/styles/todo_list/post_info.ts
diff --git a/src/containers/thread/RoadmapThread/styles/todo_list/up_vote.js b/src/containers/thread/RoadmapThread/styles/todo_list/up_vote.ts
similarity index 100%
rename from src/containers/thread/RoadmapThread/styles/todo_list/up_vote.js
rename to src/containers/thread/RoadmapThread/styles/todo_list/up_vote.ts
diff --git a/src/containers/thread/UsersThread/styles/index.js b/src/containers/thread/UsersThread/styles/index.ts
similarity index 100%
rename from src/containers/thread/UsersThread/styles/index.js
rename to src/containers/thread/UsersThread/styles/index.ts
diff --git a/src/containers/thread/UsersThread/styles/map_loading.js b/src/containers/thread/UsersThread/styles/map_loading.ts
similarity index 100%
rename from src/containers/thread/UsersThread/styles/map_loading.js
rename to src/containers/thread/UsersThread/styles/map_loading.ts
diff --git a/src/containers/thread/UsersThread/styles/num_dashboard.js b/src/containers/thread/UsersThread/styles/num_dashboard.ts
similarity index 100%
rename from src/containers/thread/UsersThread/styles/num_dashboard.js
rename to src/containers/thread/UsersThread/styles/num_dashboard.ts
diff --git a/src/containers/tool/ArticleSticker/index.js b/src/containers/tool/ArticleSticker/index.js
index cb49a0eda..5559e0c6a 100755
--- a/src/containers/tool/ArticleSticker/index.js
+++ b/src/containers/tool/ArticleSticker/index.js
@@ -25,7 +25,7 @@ import { useInit } from './logic'
 /* eslint-disable-next-line */
 const log = buildLog('C:ArticleSticker')
 
-const ArticleStickerContainer = ({ articleSticker: store, testId }) => {
+const ArticleStickerContainer = ({ articleSticker: store, testid }) => {
   useInit(store)
 
   const {
@@ -45,7 +45,7 @@ const ArticleStickerContainer = ({ articleSticker: store, testId }) => {
       />
 
       <Sticky offsetTop={80}>
-        <Wrapper testId={testId}>
+        <Wrapper testid={testid}>
           <InnerWrapper>
             <MainWrapper>
               {showCommunity && <CommunitySticker />}
@@ -67,11 +67,11 @@ const ArticleStickerContainer = ({ articleSticker: store, testId }) => {
 
 ArticleStickerContainer.propTypes = {
   articleSticker: T.any.isRequired,
-  testId: T.string,
+  testid: T.string,
 }
 
 ArticleStickerContainer.defaultProps = {
-  testId: 'article-sticker',
+  testid: 'article-sticker',
 }
 
 export default pluggedIn(ArticleStickerContainer)
diff --git a/src/containers/tool/ArticleSticker/styles/article_sticker.js b/src/containers/tool/ArticleSticker/styles/article_sticker.ts
similarity index 100%
rename from src/containers/tool/ArticleSticker/styles/article_sticker.js
rename to src/containers/tool/ArticleSticker/styles/article_sticker.ts
diff --git a/src/containers/tool/ArticleSticker/styles/comment_sticker.js b/src/containers/tool/ArticleSticker/styles/comment_sticker.ts
similarity index 100%
rename from src/containers/tool/ArticleSticker/styles/comment_sticker.js
rename to src/containers/tool/ArticleSticker/styles/comment_sticker.ts
diff --git a/src/containers/tool/ArticleSticker/styles/community_sticker.js b/src/containers/tool/ArticleSticker/styles/community_sticker.ts
similarity index 100%
rename from src/containers/tool/ArticleSticker/styles/community_sticker.js
rename to src/containers/tool/ArticleSticker/styles/community_sticker.ts
diff --git a/src/containers/tool/ArticleSticker/styles/index.js b/src/containers/tool/ArticleSticker/styles/index.ts
similarity index 98%
rename from src/containers/tool/ArticleSticker/styles/index.js
rename to src/containers/tool/ArticleSticker/styles/index.ts
index f67e50a3f..29bb87f1e 100755
--- a/src/containers/tool/ArticleSticker/styles/index.js
+++ b/src/containers/tool/ArticleSticker/styles/index.ts
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { animate, theme, css, WIDTH } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-center', 'justify-start')};
   width: ${WIDTH.ARTICLE.STICKER};
diff --git a/src/containers/tool/ArticleSticker/styles/left_sticker/index.js b/src/containers/tool/ArticleSticker/styles/left_sticker/index.ts
similarity index 97%
rename from src/containers/tool/ArticleSticker/styles/left_sticker/index.js
rename to src/containers/tool/ArticleSticker/styles/left_sticker/index.ts
index e194d970b..5f5a2de66 100644
--- a/src/containers/tool/ArticleSticker/styles/left_sticker/index.js
+++ b/src/containers/tool/ArticleSticker/styles/left_sticker/index.ts
@@ -5,7 +5,7 @@ import { theme, css } from '@/utils'
 
 // see https://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-start', 'justify-start')};
   position: fixed;
diff --git a/src/containers/tool/ArticleSticker/styles/left_sticker/toc.js b/src/containers/tool/ArticleSticker/styles/left_sticker/toc.ts
similarity index 98%
rename from src/containers/tool/ArticleSticker/styles/left_sticker/toc.js
rename to src/containers/tool/ArticleSticker/styles/left_sticker/toc.ts
index caf99a536..835eae8ae 100644
--- a/src/containers/tool/ArticleSticker/styles/left_sticker/toc.js
+++ b/src/containers/tool/ArticleSticker/styles/left_sticker/toc.ts
@@ -5,7 +5,7 @@ import { theme, css } from '@/utils'
 
 // see https://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   width: 100%;
   margin-top: 15px;
diff --git a/src/containers/tool/AvatarAdder/styles/adder_panel.js b/src/containers/tool/AvatarAdder/styles/adder_panel.ts
similarity index 100%
rename from src/containers/tool/AvatarAdder/styles/adder_panel.js
rename to src/containers/tool/AvatarAdder/styles/adder_panel.ts
diff --git a/src/containers/tool/AvatarAdder/styles/index.js b/src/containers/tool/AvatarAdder/styles/index.ts
similarity index 100%
rename from src/containers/tool/AvatarAdder/styles/index.js
rename to src/containers/tool/AvatarAdder/styles/index.ts
diff --git a/src/containers/tool/C11NSettingPanel/index.js b/src/containers/tool/C11NSettingPanel/index.js
index df988b1ff..7a023c8fa 100755
--- a/src/containers/tool/C11NSettingPanel/index.js
+++ b/src/containers/tool/C11NSettingPanel/index.js
@@ -55,7 +55,7 @@ const C11NSettingPanelContainer = ({ c11NSettingPanel: store }) => {
   const { customization } = accountInfo
 
   return (
-    <Wrapper testId="c11NSettingPanel">
+    <Wrapper testid="c11NSettingPanel">
       <br />
       <Title>个性化设置</Title>
       <TabBarWrapper>
diff --git a/src/containers/tool/C11NSettingPanel/styles/gerneral_settings.js b/src/containers/tool/C11NSettingPanel/styles/gerneral_settings.ts
similarity index 95%
rename from src/containers/tool/C11NSettingPanel/styles/gerneral_settings.js
rename to src/containers/tool/C11NSettingPanel/styles/gerneral_settings.ts
index 10e48ee34..dd3d6947b 100644
--- a/src/containers/tool/C11NSettingPanel/styles/gerneral_settings.js
+++ b/src/containers/tool/C11NSettingPanel/styles/gerneral_settings.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-start', 'justify-start')};
   width: auto;
diff --git a/src/containers/tool/C11NSettingPanel/styles/index.js b/src/containers/tool/C11NSettingPanel/styles/index.ts
similarity index 95%
rename from src/containers/tool/C11NSettingPanel/styles/index.js
rename to src/containers/tool/C11NSettingPanel/styles/index.ts
index 2d1b46651..423759341 100755
--- a/src/containers/tool/C11NSettingPanel/styles/index.js
+++ b/src/containers/tool/C11NSettingPanel/styles/index.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-start', 'justify-start')};
   width: auto;
diff --git a/src/containers/tool/C11NSettingPanel/styles/theme_settings.js b/src/containers/tool/C11NSettingPanel/styles/theme_settings.ts
similarity index 87%
rename from src/containers/tool/C11NSettingPanel/styles/theme_settings.js
rename to src/containers/tool/C11NSettingPanel/styles/theme_settings.ts
index 7659ef7df..f7b8b28c1 100644
--- a/src/containers/tool/C11NSettingPanel/styles/theme_settings.js
+++ b/src/containers/tool/C11NSettingPanel/styles/theme_settings.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 // import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   margin-top: 16px;
   /* margin-left: 30px; */
diff --git a/src/containers/tool/Cashier/styles/content.js b/src/containers/tool/Cashier/styles/content.ts
similarity index 100%
rename from src/containers/tool/Cashier/styles/content.js
rename to src/containers/tool/Cashier/styles/content.ts
diff --git a/src/containers/tool/Cashier/styles/index.js b/src/containers/tool/Cashier/styles/index.ts
similarity index 100%
rename from src/containers/tool/Cashier/styles/index.js
rename to src/containers/tool/Cashier/styles/index.ts
diff --git a/src/containers/tool/Cashier/styles/payment_confirm.js b/src/containers/tool/Cashier/styles/payment_confirm.ts
similarity index 100%
rename from src/containers/tool/Cashier/styles/payment_confirm.js
rename to src/containers/tool/Cashier/styles/payment_confirm.ts
diff --git a/src/containers/tool/Cashier/styles/payment_content.js b/src/containers/tool/Cashier/styles/payment_content.ts
similarity index 100%
rename from src/containers/tool/Cashier/styles/payment_content.js
rename to src/containers/tool/Cashier/styles/payment_content.ts
diff --git a/src/containers/tool/Cashier/styles/payment_sidebar.js b/src/containers/tool/Cashier/styles/payment_sidebar.ts
similarity index 100%
rename from src/containers/tool/Cashier/styles/payment_sidebar.js
rename to src/containers/tool/Cashier/styles/payment_sidebar.ts
diff --git a/src/containers/tool/Cashier/styles/question_content.js b/src/containers/tool/Cashier/styles/question_content.ts
similarity index 100%
rename from src/containers/tool/Cashier/styles/question_content.js
rename to src/containers/tool/Cashier/styles/question_content.ts
diff --git a/src/containers/tool/Cashier/styles/question_sidebar.js b/src/containers/tool/Cashier/styles/question_sidebar.ts
similarity index 100%
rename from src/containers/tool/Cashier/styles/question_sidebar.js
rename to src/containers/tool/Cashier/styles/question_sidebar.ts
diff --git a/src/containers/tool/CommunityJoinBadge/index.js b/src/containers/tool/CommunityJoinBadge/index.js
index 3d747fdb5..594bab110 100755
--- a/src/containers/tool/CommunityJoinBadge/index.js
+++ b/src/containers/tool/CommunityJoinBadge/index.js
@@ -19,14 +19,14 @@ import { useInit } from './logic'
 /* eslint-disable-next-line */
 const log = buildLog('C:CommunityJoinBadge')
 
-const CommunityJoinBadgeContainer = ({ communityJoinBadge: store, testId }) => {
+const CommunityJoinBadgeContainer = ({ communityJoinBadge: store, testid }) => {
   useInit(store)
 
   const { curCommunity, subscribeLoading } = store
   const { title, desc } = curCommunity
 
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       <Title>{title}</Title>
       <Desc>{desc}</Desc>
 
@@ -42,11 +42,11 @@ const CommunityJoinBadgeContainer = ({ communityJoinBadge: store, testId }) => {
 
 CommunityJoinBadgeContainer.propTypes = {
   communityJoinBadge: T.any.isRequired,
-  testId: T.string,
+  testid: T.string,
 }
 
 CommunityJoinBadgeContainer.defaultProps = {
-  testId: 'community-join-badge',
+  testid: 'community-join-badge',
 }
 
 export default pluggedIn(CommunityJoinBadgeContainer)
diff --git a/src/containers/tool/CommunityJoinBadge/styles/index.js b/src/containers/tool/CommunityJoinBadge/styles/index.ts
similarity index 95%
rename from src/containers/tool/CommunityJoinBadge/styles/index.js
rename to src/containers/tool/CommunityJoinBadge/styles/index.ts
index ab12e0d24..1da218b38 100755
--- a/src/containers/tool/CommunityJoinBadge/styles/index.js
+++ b/src/containers/tool/CommunityJoinBadge/styles/index.ts
@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   position: relative;
   padding-bottom: 20px;
diff --git a/src/containers/tool/CommunityJoinBadge/styles/subscribe_btn.js b/src/containers/tool/CommunityJoinBadge/styles/subscribe_btn.ts
similarity index 100%
rename from src/containers/tool/CommunityJoinBadge/styles/subscribe_btn.js
rename to src/containers/tool/CommunityJoinBadge/styles/subscribe_btn.ts
diff --git a/src/containers/tool/CommunitySetter/styles/communities_list.js b/src/containers/tool/CommunitySetter/styles/communities_list.ts
similarity index 100%
rename from src/containers/tool/CommunitySetter/styles/communities_list.js
rename to src/containers/tool/CommunitySetter/styles/communities_list.ts
diff --git a/src/containers/tool/CommunitySetter/styles/community.js b/src/containers/tool/CommunitySetter/styles/community.ts
similarity index 100%
rename from src/containers/tool/CommunitySetter/styles/community.js
rename to src/containers/tool/CommunitySetter/styles/community.ts
diff --git a/src/containers/tool/CommunitySetter/styles/index.js b/src/containers/tool/CommunitySetter/styles/index.ts
similarity index 100%
rename from src/containers/tool/CommunitySetter/styles/index.js
rename to src/containers/tool/CommunitySetter/styles/index.ts
diff --git a/src/containers/tool/CommunitySetter/styles/search_bar.js b/src/containers/tool/CommunitySetter/styles/search_bar.ts
similarity index 100%
rename from src/containers/tool/CommunitySetter/styles/search_bar.js
rename to src/containers/tool/CommunitySetter/styles/search_bar.ts
diff --git a/src/containers/tool/Doraemon/InputEditor.js b/src/containers/tool/Doraemon/InputEditor.js
index 786b93f09..856c7894f 100755
--- a/src/containers/tool/Doraemon/InputEditor.js
+++ b/src/containers/tool/Doraemon/InputEditor.js
@@ -31,7 +31,7 @@ const InputEditor = ({ searching, value, prefix }) => {
       </PrefixWrapper>
       <InputBar
         id="doraemonInputbar"
-        testId="doraemon-inputer"
+        testid="doraemon-inputer"
         spellCheck={false}
         autoCapitalize="off"
         autoCorrect="off"
diff --git a/src/containers/tool/Doraemon/index.js b/src/containers/tool/Doraemon/index.js
index 215fbf1ef..c149b8029 100755
--- a/src/containers/tool/Doraemon/index.js
+++ b/src/containers/tool/Doraemon/index.js
@@ -48,11 +48,11 @@ const DoraemonContainer = ({ doraemon: store }) => {
       {visible && (
         <Portal>
           <PageOverlay
-            testId="doraemon-overlay"
+            testid="doraemon-overlay"
             visible={visible}
             onClick={hidePanel}
           />
-          <PanelContainer testId="doraemon-panel" visible={visible}>
+          <PanelContainer testid="doraemon-panel" visible={visible}>
             <InputEditor
               value={inputValue}
               searching={searching}
diff --git a/src/containers/tool/Doraemon/styles/alert_bar.js b/src/containers/tool/Doraemon/styles/alert_bar.ts
similarity index 100%
rename from src/containers/tool/Doraemon/styles/alert_bar.js
rename to src/containers/tool/Doraemon/styles/alert_bar.ts
diff --git a/src/containers/tool/Doraemon/styles/index.js b/src/containers/tool/Doraemon/styles/index.ts
similarity index 94%
rename from src/containers/tool/Doraemon/styles/index.js
rename to src/containers/tool/Doraemon/styles/index.ts
index b842f1745..87ad11f78 100755
--- a/src/containers/tool/Doraemon/styles/index.js
+++ b/src/containers/tool/Doraemon/styles/index.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { theme, css } from '@/utils'
 
 export const PageOverlay = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   bottom: 0;
   left: 0;
@@ -16,7 +16,7 @@ export const PageOverlay = styled.div.attrs((props) => ({
 `
 // flex-grow example: http://zhoon.github.io/css3/2014/08/23/flex.html
 export const PanelContainer = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   display: ${({ visible }) => (visible ? 'block' : 'none')};
   box-shadow: 0px 4px 11px 8px rgba(0, 0, 0, 0.2),
diff --git a/src/containers/tool/Doraemon/styles/input_editor.js b/src/containers/tool/Doraemon/styles/input_editor.ts
similarity index 96%
rename from src/containers/tool/Doraemon/styles/input_editor.js
rename to src/containers/tool/Doraemon/styles/input_editor.ts
index de2121d1a..5eff15ccf 100755
--- a/src/containers/tool/Doraemon/styles/input_editor.js
+++ b/src/containers/tool/Doraemon/styles/input_editor.ts
@@ -14,7 +14,7 @@ export const EditorBar = styled(BaseBar)`
   height: 58px;
 `
 export const InputBar = styled.input.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   caret-color: ${theme('shell.searchInput')};
   flex-grow: 1;
diff --git a/src/containers/tool/Doraemon/styles/input_prefix.js b/src/containers/tool/Doraemon/styles/input_prefix.ts
similarity index 100%
rename from src/containers/tool/Doraemon/styles/input_prefix.js
rename to src/containers/tool/Doraemon/styles/input_prefix.ts
diff --git a/src/containers/tool/Doraemon/styles/results_list.js b/src/containers/tool/Doraemon/styles/results_list.ts
similarity index 100%
rename from src/containers/tool/Doraemon/styles/results_list.js
rename to src/containers/tool/Doraemon/styles/results_list.ts
diff --git a/src/containers/tool/Doraemon/styles/suggest_icon.js b/src/containers/tool/Doraemon/styles/suggest_icon.ts
similarity index 100%
rename from src/containers/tool/Doraemon/styles/suggest_icon.js
rename to src/containers/tool/Doraemon/styles/suggest_icon.ts
diff --git a/src/containers/tool/Doraemon/styles/thread_select_bar.js b/src/containers/tool/Doraemon/styles/thread_select_bar.ts
similarity index 100%
rename from src/containers/tool/Doraemon/styles/thread_select_bar.js
rename to src/containers/tool/Doraemon/styles/thread_select_bar.ts
diff --git a/src/containers/tool/Doraemon/styles/utils_bar.js b/src/containers/tool/Doraemon/styles/utils_bar.ts
similarity index 100%
rename from src/containers/tool/Doraemon/styles/utils_bar.js
rename to src/containers/tool/Doraemon/styles/utils_bar.ts
diff --git a/src/containers/tool/Drawer/Viewer/DesktopView.js b/src/containers/tool/Drawer/Viewer/DesktopView.js
index dbea61d8d..b4e7ed666 100644
--- a/src/containers/tool/Drawer/Viewer/DesktopView.js
+++ b/src/containers/tool/Drawer/Viewer/DesktopView.js
@@ -17,7 +17,7 @@ const DesktopView = ({
     <React.Fragment>
       <DrawerOverlay visible={visible} onClick={closeDrawer} />
       <DrawerWrapper
-        testId="drawer-sidebar-panel"
+        testid="drawer-sidebar-panel"
         visible={visible}
         rightOffset={rightOffset}
         type={type}
diff --git a/src/containers/tool/Drawer/Viewer/MobileView.js b/src/containers/tool/Drawer/Viewer/MobileView.js
index abc8acc03..7fb59f03d 100644
--- a/src/containers/tool/Drawer/Viewer/MobileView.js
+++ b/src/containers/tool/Drawer/Viewer/MobileView.js
@@ -67,7 +67,7 @@ const Viewer = ({
     <div>
       <DrawerOverlay visible={visible} onClick={closeDrawer} />
       <DrawerWrapper
-        testId="drawer-sidebar-panel"
+        testid="drawer-sidebar-panel"
         visible={visible}
         type={type}
         swipeUpY={swipeUpY}
diff --git a/src/containers/tool/Drawer/styles/add_on.js b/src/containers/tool/Drawer/styles/add_on.ts
similarity index 96%
rename from src/containers/tool/Drawer/styles/add_on.js
rename to src/containers/tool/Drawer/styles/add_on.ts
index 08fce1137..109457fec 100755
--- a/src/containers/tool/Drawer/styles/add_on.js
+++ b/src/containers/tool/Drawer/styles/add_on.ts
@@ -25,7 +25,7 @@ export const CloseTab = styled.div`
     type === TYPE.DRAWER.ACCOUNT_EDIT ? 'none' : 'block'};
 
   &:hover:after {
-    animation: ${animate.rotate360Close} 2s cubic-bezier(0, 0.56, 0.24, 0.72);
+    animation: ${animate.rotate360} 2s cubic-bezier(0, 0.56, 0.24, 0.72);
     font-weight: bold;
   }
   &:after {
diff --git a/src/containers/tool/Drawer/styles/content/index.js b/src/containers/tool/Drawer/styles/content/index.ts
similarity index 100%
rename from src/containers/tool/Drawer/styles/content/index.js
rename to src/containers/tool/Drawer/styles/content/index.ts
diff --git a/src/containers/tool/Drawer/styles/content/place_holder.js b/src/containers/tool/Drawer/styles/content/place_holder.ts
similarity index 100%
rename from src/containers/tool/Drawer/styles/content/place_holder.js
rename to src/containers/tool/Drawer/styles/content/place_holder.ts
diff --git a/src/containers/tool/Drawer/styles/header/close_line.js b/src/containers/tool/Drawer/styles/header/close_line.ts
similarity index 100%
rename from src/containers/tool/Drawer/styles/header/close_line.js
rename to src/containers/tool/Drawer/styles/header/close_line.ts
diff --git a/src/containers/tool/Drawer/styles/header/index.js b/src/containers/tool/Drawer/styles/header/index.ts
similarity index 100%
rename from src/containers/tool/Drawer/styles/header/index.js
rename to src/containers/tool/Drawer/styles/header/index.ts
diff --git a/src/containers/tool/Drawer/styles/index.js b/src/containers/tool/Drawer/styles/index.ts
similarity index 97%
rename from src/containers/tool/Drawer/styles/index.js
rename to src/containers/tool/Drawer/styles/index.ts
index 5f97b47b7..4208812ce 100755
--- a/src/containers/tool/Drawer/styles/index.js
+++ b/src/containers/tool/Drawer/styles/index.ts
@@ -31,8 +31,8 @@ export const DrawerOverlay = styled.div`
 // - Use styled components for static styles and dynamic styles that don't change very often;
 // - Use inline styles (through .attrs) for styles that change frequently, like for animations.
 export const DrawerWrapper = styled.div.attrs(
-  ({ testId, visible, mobile, swipeUpY, swipeDownY, options }) => ({
-    'data-test-id': testId,
+  ({ testid, visible, mobile, swipeUpY, swipeDownY, options }) => ({
+    'data-test-id': testid,
     style: {
       transform: getTransform(visible, mobile, swipeUpY, swipeDownY, options),
     },
diff --git a/src/containers/tool/Drawer/styles/metrics.js b/src/containers/tool/Drawer/styles/metrics.ts
similarity index 86%
rename from src/containers/tool/Drawer/styles/metrics.js
rename to src/containers/tool/Drawer/styles/metrics.ts
index 76268b252..586085e2f 100644
--- a/src/containers/tool/Drawer/styles/metrics.js
+++ b/src/containers/tool/Drawer/styles/metrics.ts
@@ -1,5 +1,10 @@
 import { TYPE } from '@/constant'
 
+type Options = {
+  position?: 'H' | 'M' | 'L'
+  direction?: 'bottom' | 'top'
+}
+
 export const WIDE_WIDTH = '70%'
 export const NARROW_WIDTH = '40%'
 
@@ -50,7 +55,11 @@ const M_TRANSLATE = '100%'
  * @param {object} options
  * @returns
  */
-export const getDim = (swipeUpY, swipeDownY, options) => {
+export const getDim = (
+  swipeUpY: number,
+  swipeDownY: number,
+  options: Options,
+): string => {
   const threshold = SWIPE_THRESHOLD[options.direction][options.position]
 
   if (options.direction === 'bottom') {
@@ -68,7 +77,7 @@ export const getDim = (swipeUpY, swipeDownY, options) => {
  * @param {object} options
  * @returns
  */
-export const getMobileContentHeight = (options) => {
+export const getMobileContentHeight = (options: Options): string => {
   /* M -> 50vh, H -> 75vh, L -> 25vh */
   switch (options.position) {
     case 'H': {
@@ -95,12 +104,12 @@ export const getMobileContentHeight = (options) => {
  * @returns
  */
 export const getTransform = (
-  visible,
-  mobile,
-  swipeUpY,
-  swipeDownY,
-  options,
-) => {
+  visible: boolean,
+  mobile: boolean,
+  swipeUpY: number,
+  swipeDownY: number,
+  options: Options,
+): string => {
   if (!mobile) {
     return visible ? 'translate(0px, 0px)' : 'translate(105%, 0px)' // fromRight
   }
@@ -126,7 +135,10 @@ export const getTransform = (
 }
 
 // only for mobile
-export const getContentLinearGradient = (options, bgColor) => {
+export const getContentLinearGradient = (
+  options: Options,
+  bgColor: string,
+): string => {
   if (options.direction === 'bottom') {
     return `linear-gradient(0deg,${bgColor} calc(100% - 30px),transparent 30px)`
   }
@@ -142,7 +154,7 @@ export const getContentLinearGradient = (options, bgColor) => {
  * @returns string
  * @private
  */
-const getTopPosition = (swipeUpY, options) => {
+const getTopPosition = (swipeUpY: number, options: Options): string => {
   switch (options.position) {
     case 'L': {
       if (swipeUpY === null) return '0%'
@@ -171,7 +183,7 @@ const getTopPosition = (swipeUpY, options) => {
  * @returns string
  * @private
  */
-const getBottomPosition = (swipeDownY, options) => {
+const getBottomPosition = (swipeDownY: number, options: Options): string => {
   switch (options.position) {
     case 'L': {
       if (swipeDownY === null) return L_TRANSLATE
diff --git a/src/containers/tool/ErrorBox/styles/details.js b/src/containers/tool/ErrorBox/styles/details.ts
similarity index 100%
rename from src/containers/tool/ErrorBox/styles/details.js
rename to src/containers/tool/ErrorBox/styles/details.ts
diff --git a/src/containers/tool/ErrorBox/styles/footer.js b/src/containers/tool/ErrorBox/styles/footer.ts
similarity index 100%
rename from src/containers/tool/ErrorBox/styles/footer.js
rename to src/containers/tool/ErrorBox/styles/footer.ts
diff --git a/src/containers/tool/ErrorBox/styles/header.js b/src/containers/tool/ErrorBox/styles/header.ts
similarity index 100%
rename from src/containers/tool/ErrorBox/styles/header.js
rename to src/containers/tool/ErrorBox/styles/header.ts
diff --git a/src/containers/tool/ErrorBox/styles/index.js b/src/containers/tool/ErrorBox/styles/index.ts
similarity index 100%
rename from src/containers/tool/ErrorBox/styles/index.js
rename to src/containers/tool/ErrorBox/styles/index.ts
diff --git a/src/containers/tool/FavoritesCats/styles/box_view.js b/src/containers/tool/FavoritesCats/styles/box_view.ts
similarity index 100%
rename from src/containers/tool/FavoritesCats/styles/box_view.js
rename to src/containers/tool/FavoritesCats/styles/box_view.ts
diff --git a/src/containers/tool/FavoritesCats/styles/category_card_list.js b/src/containers/tool/FavoritesCats/styles/category_card_list.ts
similarity index 100%
rename from src/containers/tool/FavoritesCats/styles/category_card_list.js
rename to src/containers/tool/FavoritesCats/styles/category_card_list.ts
diff --git a/src/containers/tool/FavoritesCats/styles/editor.js b/src/containers/tool/FavoritesCats/styles/editor.ts
similarity index 100%
rename from src/containers/tool/FavoritesCats/styles/editor.js
rename to src/containers/tool/FavoritesCats/styles/editor.ts
diff --git a/src/containers/tool/FavoritesCats/styles/index.js b/src/containers/tool/FavoritesCats/styles/index.ts
similarity index 100%
rename from src/containers/tool/FavoritesCats/styles/index.js
rename to src/containers/tool/FavoritesCats/styles/index.ts
diff --git a/src/containers/tool/FavoritesCats/styles/setter.js b/src/containers/tool/FavoritesCats/styles/setter.ts
similarity index 100%
rename from src/containers/tool/FavoritesCats/styles/setter.js
rename to src/containers/tool/FavoritesCats/styles/setter.ts
diff --git a/src/containers/tool/GirlVerifier/styles/index.js b/src/containers/tool/GirlVerifier/styles/index.ts
similarity index 100%
rename from src/containers/tool/GirlVerifier/styles/index.js
rename to src/containers/tool/GirlVerifier/styles/index.ts
diff --git a/src/containers/tool/Informer/styles/form.js b/src/containers/tool/Informer/styles/form.ts
similarity index 89%
rename from src/containers/tool/Informer/styles/form.js
rename to src/containers/tool/Informer/styles/form.ts
index f72dba346..cf1a27d87 100755
--- a/src/containers/tool/Informer/styles/form.js
+++ b/src/containers/tool/Informer/styles/form.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css } from '@/utils'
 
 export const Wrapper = styled.div`
-  ${css.flexColumn('justify.center')};
+  ${css.flexColumn('justify-center')};
 
   width: 100%;
   padding: 20px;
diff --git a/src/containers/tool/Informer/styles/header.js b/src/containers/tool/Informer/styles/header.ts
similarity index 100%
rename from src/containers/tool/Informer/styles/header.js
rename to src/containers/tool/Informer/styles/header.ts
diff --git a/src/containers/tool/Informer/styles/index.js b/src/containers/tool/Informer/styles/index.ts
similarity index 100%
rename from src/containers/tool/Informer/styles/index.js
rename to src/containers/tool/Informer/styles/index.ts
diff --git a/src/containers/tool/Informer/styles/overview.js b/src/containers/tool/Informer/styles/overview.ts
similarity index 100%
rename from src/containers/tool/Informer/styles/overview.js
rename to src/containers/tool/Informer/styles/overview.ts
diff --git a/src/containers/tool/JoinModal/index.js b/src/containers/tool/JoinModal/index.js
index 86b2f6750..5585ac1b3 100755
--- a/src/containers/tool/JoinModal/index.js
+++ b/src/containers/tool/JoinModal/index.js
@@ -28,7 +28,7 @@ const JoinModalContainer = ({ joinModal: store }) => {
 
   return (
     <Modal width="600px" show={show} showCloseBtn onClose={onClose}>
-      <Wrapper testId="joinModal">
+      <Wrapper testid="joinModal">
         <FooterWechat />
       </Wrapper>
     </Modal>
diff --git a/src/containers/tool/JoinModal/styles/footer_wechat.js b/src/containers/tool/JoinModal/styles/footer_wechat.ts
similarity index 100%
rename from src/containers/tool/JoinModal/styles/footer_wechat.js
rename to src/containers/tool/JoinModal/styles/footer_wechat.ts
diff --git a/src/containers/tool/JoinModal/styles/index.js b/src/containers/tool/JoinModal/styles/index.ts
similarity index 86%
rename from src/containers/tool/JoinModal/styles/index.js
rename to src/containers/tool/JoinModal/styles/index.ts
index 05ab7fb2e..1eed30d3f 100755
--- a/src/containers/tool/JoinModal/styles/index.js
+++ b/src/containers/tool/JoinModal/styles/index.ts
@@ -4,7 +4,7 @@ import styled from 'styled-components'
 // import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))``
 
 export const holder = styled.div``
diff --git a/src/containers/tool/MailBox/index.js b/src/containers/tool/MailBox/index.js
index 43bc413b2..c7a70ed19 100755
--- a/src/containers/tool/MailBox/index.js
+++ b/src/containers/tool/MailBox/index.js
@@ -36,7 +36,7 @@ const MailBoxContainer = ({ mailBox: store }) => {
       trigger="click"
       onShow={visibleOnChange}
     >
-      <Wrapper testId="account-mailbox">
+      <Wrapper testid="account-mailbox">
         <NotifyDot active={mailStatusData.hasMail} />
         <HeaderMailIcon />
       </Wrapper>
diff --git a/src/containers/tool/MailBox/styles/index.js b/src/containers/tool/MailBox/styles/index.ts
similarity index 94%
rename from src/containers/tool/MailBox/styles/index.js
rename to src/containers/tool/MailBox/styles/index.ts
index e786807bf..9be465b38 100755
--- a/src/containers/tool/MailBox/styles/index.js
+++ b/src/containers/tool/MailBox/styles/index.ts
@@ -4,7 +4,7 @@ import HeaderMailSVG from '@/SvgIcons/HeaderMailSVG'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   position: relative;
 `
diff --git a/src/containers/tool/MailBox/styles/mails_panel.js b/src/containers/tool/MailBox/styles/mails_panel.ts
similarity index 100%
rename from src/containers/tool/MailBox/styles/mails_panel.js
rename to src/containers/tool/MailBox/styles/mails_panel.ts
diff --git a/src/containers/tool/MailBox/styles/mention_list.js b/src/containers/tool/MailBox/styles/mention_list.ts
similarity index 100%
rename from src/containers/tool/MailBox/styles/mention_list.js
rename to src/containers/tool/MailBox/styles/mention_list.ts
diff --git a/src/containers/unit/ArticleAuthorCard/styles/index.js b/src/containers/unit/ArticleAuthorCard/styles/index.ts
similarity index 100%
rename from src/containers/unit/ArticleAuthorCard/styles/index.js
rename to src/containers/unit/ArticleAuthorCard/styles/index.ts
diff --git a/src/containers/unit/ArticleAuthorCard/styles/reaction_numbers.js b/src/containers/unit/ArticleAuthorCard/styles/reaction_numbers.ts
similarity index 100%
rename from src/containers/unit/ArticleAuthorCard/styles/reaction_numbers.js
rename to src/containers/unit/ArticleAuthorCard/styles/reaction_numbers.ts
diff --git a/src/containers/unit/ArticleAuthorCard/styles/user_info.js b/src/containers/unit/ArticleAuthorCard/styles/user_info.ts
similarity index 100%
rename from src/containers/unit/ArticleAuthorCard/styles/user_info.js
rename to src/containers/unit/ArticleAuthorCard/styles/user_info.ts
diff --git a/src/containers/unit/ArticleBodyHeader/styles/index.js b/src/containers/unit/ArticleBodyHeader/styles/index.ts
similarity index 100%
rename from src/containers/unit/ArticleBodyHeader/styles/index.js
rename to src/containers/unit/ArticleBodyHeader/styles/index.ts
diff --git a/src/containers/unit/ArticleBodyHeader/styles/refined_label.js b/src/containers/unit/ArticleBodyHeader/styles/refined_label.ts
similarity index 100%
rename from src/containers/unit/ArticleBodyHeader/styles/refined_label.js
rename to src/containers/unit/ArticleBodyHeader/styles/refined_label.ts
diff --git a/src/containers/unit/ArticleFooter/AuthorInfo/index.js b/src/containers/unit/ArticleFooter/AuthorInfo/index.js
index 3a1ef23b7..c6b67e843 100644
--- a/src/containers/unit/ArticleFooter/AuthorInfo/index.js
+++ b/src/containers/unit/ArticleFooter/AuthorInfo/index.js
@@ -29,11 +29,11 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('c:AuthorInfo:index')
 
-const AuthorInfo = ({ testId, author }) => {
+const AuthorInfo = ({ testid, author }) => {
   const socialItems = pickBy((v) => !!v, author.social)
 
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       <TextIntro>
         <IntroTitle>关于作者</IntroTitle>
         <Name>
@@ -56,7 +56,7 @@ const AuthorInfo = ({ testId, author }) => {
 }
 
 AuthorInfo.propTypes = {
-  testId: T.string,
+  testid: T.string,
   author: T.shape({
     avatar: T.string,
     nickname: T.string,
@@ -79,7 +79,7 @@ AuthorInfo.propTypes = {
 }
 
 AuthorInfo.defaultProps = {
-  testId: 'author-info',
+  testid: 'author-info',
 }
 
 export default React.memo(AuthorInfo)
diff --git a/src/containers/unit/ArticleFooter/index.js b/src/containers/unit/ArticleFooter/index.js
index 629f44c26..2ca82bec4 100755
--- a/src/containers/unit/ArticleFooter/index.js
+++ b/src/containers/unit/ArticleFooter/index.js
@@ -24,13 +24,13 @@ import { useInit } from './logic'
 /* eslint-disable-next-line */
 const log = buildLog('C:ArticleFooter')
 
-const ArticleFooterContainer = ({ articleFooter: store, testId }) => {
+const ArticleFooterContainer = ({ articleFooter: store, testid }) => {
   useInit(store)
   const { viewingData, showReferenceList, showOperationList } = store
   const { tags, author } = viewingData
 
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       <BaseInfo>
         <TagList items={tags} />
         <Actions
@@ -48,11 +48,11 @@ const ArticleFooterContainer = ({ articleFooter: store, testId }) => {
 
 ArticleFooterContainer.propTypes = {
   articleFooter: T.any.isRequired,
-  testId: T.string,
+  testid: T.string,
 }
 
 ArticleFooterContainer.defaultProps = {
-  testId: 'article-footer',
+  testid: 'article-footer',
 }
 
 export default pluggedIn(ArticleFooterContainer)
diff --git a/src/containers/unit/ArticleFooter/styles/actions/action_item.js b/src/containers/unit/ArticleFooter/styles/actions/action_item.ts
similarity index 100%
rename from src/containers/unit/ArticleFooter/styles/actions/action_item.js
rename to src/containers/unit/ArticleFooter/styles/actions/action_item.ts
diff --git a/src/containers/unit/ArticleFooter/styles/actions/index.js b/src/containers/unit/ArticleFooter/styles/actions/index.ts
similarity index 95%
rename from src/containers/unit/ArticleFooter/styles/actions/index.js
rename to src/containers/unit/ArticleFooter/styles/actions/index.ts
index 173ca4084..f34afe26f 100644
--- a/src/containers/unit/ArticleFooter/styles/actions/index.js
+++ b/src/containers/unit/ArticleFooter/styles/actions/index.ts
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-center')};
 `
@@ -38,7 +38,7 @@ export const Text = styled.div`
   transition: color 0.25s;
 `
 export const PanelWrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn()};
   position: relative;
diff --git a/src/containers/unit/ArticleFooter/styles/actions/operation_panel.js b/src/containers/unit/ArticleFooter/styles/actions/operation_panel.ts
similarity index 100%
rename from src/containers/unit/ArticleFooter/styles/actions/operation_panel.js
rename to src/containers/unit/ArticleFooter/styles/actions/operation_panel.ts
diff --git a/src/containers/unit/ArticleFooter/styles/actions/refers_panel.js b/src/containers/unit/ArticleFooter/styles/actions/refers_panel.ts
similarity index 100%
rename from src/containers/unit/ArticleFooter/styles/actions/refers_panel.js
rename to src/containers/unit/ArticleFooter/styles/actions/refers_panel.ts
diff --git a/src/containers/unit/ArticleFooter/styles/author_info/index.js b/src/containers/unit/ArticleFooter/styles/author_info/index.ts
similarity index 96%
rename from src/containers/unit/ArticleFooter/styles/author_info/index.js
rename to src/containers/unit/ArticleFooter/styles/author_info/index.ts
index dcfb1171f..65ce9717a 100644
--- a/src/containers/unit/ArticleFooter/styles/author_info/index.js
+++ b/src/containers/unit/ArticleFooter/styles/author_info/index.ts
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { theme, css } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('justify-between')};
   border-top: 1px solid;
diff --git a/src/containers/unit/ArticleFooter/styles/author_info/social_list.js b/src/containers/unit/ArticleFooter/styles/author_info/social_list.ts
similarity index 100%
rename from src/containers/unit/ArticleFooter/styles/author_info/social_list.js
rename to src/containers/unit/ArticleFooter/styles/author_info/social_list.ts
diff --git a/src/containers/unit/ArticleFooter/styles/index.js b/src/containers/unit/ArticleFooter/styles/index.ts
similarity index 90%
rename from src/containers/unit/ArticleFooter/styles/index.js
rename to src/containers/unit/ArticleFooter/styles/index.ts
index 205700a39..142d8f469 100755
--- a/src/containers/unit/ArticleFooter/styles/index.js
+++ b/src/containers/unit/ArticleFooter/styles/index.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))``
 
 export const BaseInfo = styled.div`
diff --git a/src/containers/unit/ArticleFooter/styles/tag_list.js b/src/containers/unit/ArticleFooter/styles/tag_list.ts
similarity index 100%
rename from src/containers/unit/ArticleFooter/styles/tag_list.js
rename to src/containers/unit/ArticleFooter/styles/tag_list.ts
diff --git a/src/containers/unit/ArticleViewerHeader/styles/company_info.js b/src/containers/unit/ArticleViewerHeader/styles/company_info.ts
similarity index 100%
rename from src/containers/unit/ArticleViewerHeader/styles/company_info.js
rename to src/containers/unit/ArticleViewerHeader/styles/company_info.ts
diff --git a/src/containers/unit/ArticleViewerHeader/styles/index.js b/src/containers/unit/ArticleViewerHeader/styles/index.ts
similarity index 100%
rename from src/containers/unit/ArticleViewerHeader/styles/index.js
rename to src/containers/unit/ArticleViewerHeader/styles/index.ts
diff --git a/src/containers/unit/ArticleViewerHeader/styles/reaction.js b/src/containers/unit/ArticleViewerHeader/styles/reaction.ts
similarity index 100%
rename from src/containers/unit/ArticleViewerHeader/styles/reaction.js
rename to src/containers/unit/ArticleViewerHeader/styles/reaction.ts
diff --git a/src/containers/unit/ArticleViewerHeader/styles/user_info.js b/src/containers/unit/ArticleViewerHeader/styles/user_info.ts
similarity index 100%
rename from src/containers/unit/ArticleViewerHeader/styles/user_info.js
rename to src/containers/unit/ArticleViewerHeader/styles/user_info.ts
diff --git a/src/containers/unit/Comments/styles/comment/actions.js b/src/containers/unit/Comments/styles/comment/actions.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/comment/actions.js
rename to src/containers/unit/Comments/styles/comment/actions.ts
diff --git a/src/containers/unit/Comments/styles/comment/base.js b/src/containers/unit/Comments/styles/comment/base.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/comment/base.js
rename to src/containers/unit/Comments/styles/comment/base.ts
diff --git a/src/containers/unit/Comments/styles/comment/delete_mask.js b/src/containers/unit/Comments/styles/comment/delete_mask.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/comment/delete_mask.js
rename to src/containers/unit/Comments/styles/comment/delete_mask.ts
diff --git a/src/containers/unit/Comments/styles/comment/desktop_view.js b/src/containers/unit/Comments/styles/comment/desktop_view.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/comment/desktop_view.js
rename to src/containers/unit/Comments/styles/comment/desktop_view.ts
diff --git a/src/containers/unit/Comments/styles/comment/footer.js b/src/containers/unit/Comments/styles/comment/footer.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/comment/footer.js
rename to src/containers/unit/Comments/styles/comment/footer.ts
diff --git a/src/containers/unit/Comments/styles/comment/header.js b/src/containers/unit/Comments/styles/comment/header.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/comment/header.js
rename to src/containers/unit/Comments/styles/comment/header.ts
diff --git a/src/containers/unit/Comments/styles/comment/mobile_view/header.js b/src/containers/unit/Comments/styles/comment/mobile_view/header.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/comment/mobile_view/header.js
rename to src/containers/unit/Comments/styles/comment/mobile_view/header.ts
diff --git a/src/containers/unit/Comments/styles/comment/mobile_view/index.js b/src/containers/unit/Comments/styles/comment/mobile_view/index.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/comment/mobile_view/index.js
rename to src/containers/unit/Comments/styles/comment/mobile_view/index.ts
diff --git a/src/containers/unit/Comments/styles/comment/reply_bar.js b/src/containers/unit/Comments/styles/comment/reply_bar.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/comment/reply_bar.js
rename to src/containers/unit/Comments/styles/comment/reply_bar.ts
diff --git a/src/containers/unit/Comments/styles/comment/up_info.js b/src/containers/unit/Comments/styles/comment/up_info.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/comment/up_info.js
rename to src/containers/unit/Comments/styles/comment/up_info.ts
diff --git a/src/containers/unit/Comments/styles/comment_editor.js b/src/containers/unit/Comments/styles/comment_editor.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/comment_editor.js
rename to src/containers/unit/Comments/styles/comment_editor.ts
diff --git a/src/containers/unit/Comments/styles/comment_header.js b/src/containers/unit/Comments/styles/comment_header.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/comment_header.js
rename to src/containers/unit/Comments/styles/comment_header.ts
diff --git a/src/containers/unit/Comments/styles/comment_reply_bar.js b/src/containers/unit/Comments/styles/comment_reply_bar.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/comment_reply_bar.js
rename to src/containers/unit/Comments/styles/comment_reply_bar.ts
diff --git a/src/containers/unit/Comments/styles/comment_reply_editor.js b/src/containers/unit/Comments/styles/comment_reply_editor.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/comment_reply_editor.js
rename to src/containers/unit/Comments/styles/comment_reply_editor.ts
diff --git a/src/containers/unit/Comments/styles/comments_filter.js b/src/containers/unit/Comments/styles/comments_filter.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/comments_filter.js
rename to src/containers/unit/Comments/styles/comments_filter.ts
diff --git a/src/containers/unit/Comments/styles/comments_list.js b/src/containers/unit/Comments/styles/comments_list.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/comments_list.js
rename to src/containers/unit/Comments/styles/comments_list.ts
diff --git a/src/containers/unit/Comments/styles/editor_footer.js b/src/containers/unit/Comments/styles/editor_footer.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/editor_footer.js
rename to src/containers/unit/Comments/styles/editor_footer.ts
diff --git a/src/containers/unit/Comments/styles/editor_header.js b/src/containers/unit/Comments/styles/editor_header.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/editor_header.js
rename to src/containers/unit/Comments/styles/editor_header.ts
diff --git a/src/containers/unit/Comments/styles/index.js b/src/containers/unit/Comments/styles/index.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/index.js
rename to src/containers/unit/Comments/styles/index.ts
diff --git a/src/containers/unit/Comments/styles/locked_message.js b/src/containers/unit/Comments/styles/locked_message.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/locked_message.js
rename to src/containers/unit/Comments/styles/locked_message.ts
diff --git a/src/containers/unit/Comments/styles/reply_editor_header.js b/src/containers/unit/Comments/styles/reply_editor_header.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/reply_editor_header.js
rename to src/containers/unit/Comments/styles/reply_editor_header.ts
diff --git a/src/containers/unit/Comments/styles/reply_to_bar.js b/src/containers/unit/Comments/styles/reply_to_bar.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/reply_to_bar.js
rename to src/containers/unit/Comments/styles/reply_to_bar.ts
diff --git a/src/containers/unit/Comments/styles/words_counter.js b/src/containers/unit/Comments/styles/words_counter.ts
similarity index 100%
rename from src/containers/unit/Comments/styles/words_counter.js
rename to src/containers/unit/Comments/styles/words_counter.ts
diff --git a/src/containers/unit/Footer/DesktopView/index.js b/src/containers/unit/Footer/DesktopView/index.js
index 71fc053c1..e6534320f 100644
--- a/src/containers/unit/Footer/DesktopView/index.js
+++ b/src/containers/unit/Footer/DesktopView/index.js
@@ -71,7 +71,7 @@ const FooterContainer = ({ footer: store, metric }) => {
   }, [metric])
 
   return (
-    <Wrapper testId="footer" layout={bannerLayout} metric={metric}>
+    <Wrapper testid="footer" layout={bannerLayout} metric={metric}>
       <Modal show={showBusBanner} showCloseBtn onClose={toggleBusBanner}>
         <BusinessNote />
       </Modal>
diff --git a/src/containers/unit/Footer/styles/desktop_view/bottom_info.js b/src/containers/unit/Footer/styles/desktop_view/bottom_info.ts
similarity index 100%
rename from src/containers/unit/Footer/styles/desktop_view/bottom_info.js
rename to src/containers/unit/Footer/styles/desktop_view/bottom_info.ts
diff --git a/src/containers/unit/Footer/styles/desktop_view/brief_view.js b/src/containers/unit/Footer/styles/desktop_view/brief_view.ts
similarity index 100%
rename from src/containers/unit/Footer/styles/desktop_view/brief_view.js
rename to src/containers/unit/Footer/styles/desktop_view/brief_view.ts
diff --git a/src/containers/unit/Footer/styles/desktop_view/business_note.js b/src/containers/unit/Footer/styles/desktop_view/business_note.ts
similarity index 100%
rename from src/containers/unit/Footer/styles/desktop_view/business_note.js
rename to src/containers/unit/Footer/styles/desktop_view/business_note.ts
diff --git a/src/containers/unit/Footer/styles/desktop_view/digest_view/contact_bar.js b/src/containers/unit/Footer/styles/desktop_view/digest_view/contact_bar.ts
similarity index 100%
rename from src/containers/unit/Footer/styles/desktop_view/digest_view/contact_bar.js
rename to src/containers/unit/Footer/styles/desktop_view/digest_view/contact_bar.ts
diff --git a/src/containers/unit/Footer/styles/desktop_view/digest_view/index.js b/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts
similarity index 100%
rename from src/containers/unit/Footer/styles/desktop_view/digest_view/index.js
rename to src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts
diff --git a/src/containers/unit/Footer/styles/desktop_view/git_source_tag.js b/src/containers/unit/Footer/styles/desktop_view/git_source_tag.ts
similarity index 92%
rename from src/containers/unit/Footer/styles/desktop_view/git_source_tag.js
rename to src/containers/unit/Footer/styles/desktop_view/git_source_tag.ts
index 9eb863ca6..5f99053cc 100755
--- a/src/containers/unit/Footer/styles/desktop_view/git_source_tag.js
+++ b/src/containers/unit/Footer/styles/desktop_view/git_source_tag.ts
@@ -10,5 +10,5 @@ export const Title = styled.div`
   color: ${theme('thread.articleDigest')};
 `
 export const Tag = styled.div`
-  ${css.smokey()()};
+  ${css.smokey()};
 `
diff --git a/src/containers/unit/Footer/styles/index.js b/src/containers/unit/Footer/styles/index.ts
similarity index 91%
rename from src/containers/unit/Footer/styles/index.js
rename to src/containers/unit/Footer/styles/index.ts
index 1f7aed49a..769d66a79 100755
--- a/src/containers/unit/Footer/styles/index.js
+++ b/src/containers/unit/Footer/styles/index.ts
@@ -4,7 +4,7 @@ import { C11N } from '@/constant'
 import { css } from '@/utils'
 
 export const Wrapper = styled.footer.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('justify-center')};
   margin-top: ${({ layout }) => (layout === C11N.DIGEST_ROW ? '50px' : '80px')};
diff --git a/src/containers/unit/Footer/styles/mobile_view.js b/src/containers/unit/Footer/styles/mobile_view.ts
similarity index 100%
rename from src/containers/unit/Footer/styles/mobile_view.js
rename to src/containers/unit/Footer/styles/mobile_view.ts
diff --git a/src/containers/unit/Footer/styles/social_list.js b/src/containers/unit/Footer/styles/social_list.ts
similarity index 100%
rename from src/containers/unit/Footer/styles/social_list.js
rename to src/containers/unit/Footer/styles/social_list.ts
diff --git a/src/containers/unit/Header/DesktopView/ArticleEditorView.js b/src/containers/unit/Header/DesktopView/ArticleEditorView.js
index 79abc4eec..d0c64a670 100644
--- a/src/containers/unit/Header/DesktopView/ArticleEditorView.js
+++ b/src/containers/unit/Header/DesktopView/ArticleEditorView.js
@@ -56,7 +56,7 @@ const HeaderContainer = ({ header: store }) => {
   return (
     <Wrapper
       id="whereCallShowDoraemon"
-      testId="header"
+      testid="header"
       leftOffset={leftOffset}
       noBorder
     >
diff --git a/src/containers/unit/Header/DesktopView/ArticleView.js b/src/containers/unit/Header/DesktopView/ArticleView.js
index dcb942e03..43983d2df 100644
--- a/src/containers/unit/Header/DesktopView/ArticleView.js
+++ b/src/containers/unit/Header/DesktopView/ArticleView.js
@@ -57,7 +57,7 @@ const HeaderContainer = ({ header: store }) => {
   return (
     <Wrapper
       id="whereCallShowDoraemon"
-      testId="header"
+      testid="header"
       leftOffset={leftOffset}
       noBorder
     >
diff --git a/src/containers/unit/Header/DesktopView/CommunityVIew.js b/src/containers/unit/Header/DesktopView/CommunityVIew.js
index 89d53a601..00c2219f4 100644
--- a/src/containers/unit/Header/DesktopView/CommunityVIew.js
+++ b/src/containers/unit/Header/DesktopView/CommunityVIew.js
@@ -62,7 +62,7 @@ const HeaderContainer = ({ header: store, metric }) => {
   return (
     <Wrapper
       id="whereCallShowDoraemon"
-      testId="header"
+      testid="header"
       leftOffset={leftOffset}
       noBorder={hasNoBottomBorder}
     >
@@ -77,8 +77,8 @@ const HeaderContainer = ({ header: store, metric }) => {
         </RouterWrapper>
         <AddOns />
         <Operations>
-          <Search onClick={openDoraemon} testId="header-search">
-            <HeaderSearchIcon testId="header-search-icon" />
+          <Search onClick={openDoraemon} testid="header-search">
+            <HeaderSearchIcon testid="header-search-icon" />
           </Search>
 
           {MailBox && <MailBox />}
diff --git a/src/containers/unit/Header/UserAccount.js b/src/containers/unit/Header/UserAccount.js
index 220fe65db..77498c8a4 100755
--- a/src/containers/unit/Header/UserAccount.js
+++ b/src/containers/unit/Header/UserAccount.js
@@ -77,12 +77,12 @@ const UserAccount = ({ isLogin, accountInfo }) => {
             </PopMenu>
           }
         >
-          <Wrapper testId="header-login-user">
+          <Wrapper testid="header-login-user">
             <AvatarIcon src={accountInfo.avatar} />
           </Wrapper>
         </Tooltip>
       ) : (
-        <Wrapper testId="header-unlogin-user" onClick={onLogin}>
+        <Wrapper testid="header-unlogin-user" onClick={onLogin}>
           <DefaultUserIcon src={`${ICON}/user/account-solid.svg`} />
         </Wrapper>
       )}
diff --git a/src/containers/unit/Header/styles/addons.js b/src/containers/unit/Header/styles/addons.ts
similarity index 100%
rename from src/containers/unit/Header/styles/addons.js
rename to src/containers/unit/Header/styles/addons.ts
diff --git a/src/containers/unit/Header/styles/desktop_view/article_editor_view.js b/src/containers/unit/Header/styles/desktop_view/article_editor_view.ts
similarity index 100%
rename from src/containers/unit/Header/styles/desktop_view/article_editor_view.js
rename to src/containers/unit/Header/styles/desktop_view/article_editor_view.ts
diff --git a/src/containers/unit/Header/styles/desktop_view/article_view.js b/src/containers/unit/Header/styles/desktop_view/article_view.ts
similarity index 100%
rename from src/containers/unit/Header/styles/desktop_view/article_view.js
rename to src/containers/unit/Header/styles/desktop_view/article_view.ts
diff --git a/src/containers/unit/Header/styles/desktop_view/community_view.js b/src/containers/unit/Header/styles/desktop_view/community_view.ts
similarity index 92%
rename from src/containers/unit/Header/styles/desktop_view/community_view.js
rename to src/containers/unit/Header/styles/desktop_view/community_view.ts
index 49d0fa1b6..0f7f8e639 100644
--- a/src/containers/unit/Header/styles/desktop_view/community_view.js
+++ b/src/containers/unit/Header/styles/desktop_view/community_view.ts
@@ -4,7 +4,7 @@ import { theme, css } from '@/utils'
 import HeaderSearchSVG from '@/SvgIcons/HeaderSearchSVG'
 
 export const Wrapper = styled.header.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   width: 100%;
   height: 33px;
@@ -28,7 +28,7 @@ export const RouterWrapper = styled.div`
   height: 100%;
 `
 export const HeaderSearchIcon = styled(HeaderSearchSVG).attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   fill: ${theme('header.fg')};
   ${css.size(18)};
@@ -40,7 +40,7 @@ export const Operations = styled.div`
   ${css.flex('align-center')};
 `
 export const Search = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   color: ${theme('header.fg')};
 `
diff --git a/src/containers/unit/Header/styles/index.js b/src/containers/unit/Header/styles/index.ts
similarity index 85%
rename from src/containers/unit/Header/styles/index.js
rename to src/containers/unit/Header/styles/index.ts
index cf31a81cf..a57cb4b22 100644
--- a/src/containers/unit/Header/styles/index.js
+++ b/src/containers/unit/Header/styles/index.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   position: relative;
 `
diff --git a/src/containers/unit/Header/styles/threads_nav.js b/src/containers/unit/Header/styles/threads_nav.ts
similarity index 100%
rename from src/containers/unit/Header/styles/threads_nav.js
rename to src/containers/unit/Header/styles/threads_nav.ts
diff --git a/src/containers/unit/Header/styles/user_account.js b/src/containers/unit/Header/styles/user_account.ts
similarity index 98%
rename from src/containers/unit/Header/styles/user_account.js
rename to src/containers/unit/Header/styles/user_account.ts
index 79935fb07..90d6ce040 100755
--- a/src/containers/unit/Header/styles/user_account.js
+++ b/src/containers/unit/Header/styles/user_account.ts
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { theme, css } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.media.mobile`
     padding: 0;
diff --git a/src/containers/unit/Labeler/styles/index.js b/src/containers/unit/Labeler/styles/index.ts
similarity index 100%
rename from src/containers/unit/Labeler/styles/index.js
rename to src/containers/unit/Labeler/styles/index.ts
diff --git a/src/containers/unit/Labeler/styles/options.js b/src/containers/unit/Labeler/styles/options.ts
similarity index 100%
rename from src/containers/unit/Labeler/styles/options.js
rename to src/containers/unit/Labeler/styles/options.ts
diff --git a/src/containers/unit/Labeler/styles/selected.js b/src/containers/unit/Labeler/styles/selected.ts
similarity index 100%
rename from src/containers/unit/Labeler/styles/selected.js
rename to src/containers/unit/Labeler/styles/selected.ts
diff --git a/src/containers/unit/Labeler/styles/tag_list.js b/src/containers/unit/Labeler/styles/tag_list.ts
similarity index 100%
rename from src/containers/unit/Labeler/styles/tag_list.js
rename to src/containers/unit/Labeler/styles/tag_list.ts
diff --git a/src/containers/unit/ModeLine/BottomBar/index.js b/src/containers/unit/ModeLine/BottomBar/index.js
index 4484b047f..3aaa60b3f 100644
--- a/src/containers/unit/ModeLine/BottomBar/index.js
+++ b/src/containers/unit/ModeLine/BottomBar/index.js
@@ -23,7 +23,7 @@ import { openMenu } from '../logic'
 import { communityPageMenus, getArticlePageMenus } from './menus'
 
 const BottomBar = ({
-  testId,
+  testid,
   metric,
   article,
   activeMenu,
@@ -35,7 +35,7 @@ const BottomBar = ({
       : communityPageMenus
 
   return (
-    <Wrapper testId={testId} isMenuActive={activeMenu !== ''}>
+    <Wrapper testid={testid} isMenuActive={activeMenu !== ''}>
       <MenuBlock
         active={activeMenu === TYPE.MM_TYPE.GLOBAL_MENU}
         onClick={multiClick(() => openMenu(TYPE.MM_TYPE.GLOBAL_MENU))}
@@ -65,7 +65,7 @@ const BottomBar = ({
 }
 
 BottomBar.propTypes = {
-  testId: T.string,
+  testid: T.string,
   metric: T.oneOf(values(METRIC)).isRequired,
   article: T.any, // TODO
   activeMenu: T.oneOf([
@@ -81,7 +81,7 @@ BottomBar.propTypes = {
 }
 
 BottomBar.defaultProps = {
-  testId: 'modeline-bottom-bar',
+  testid: 'modeline-bottom-bar',
   isCommunityBlockExpand: false,
   article: null,
 }
diff --git a/src/containers/unit/ModeLine/TopBar/DesktopView.js b/src/containers/unit/ModeLine/TopBar/DesktopView.js
index f2089066f..aef85752d 100644
--- a/src/containers/unit/ModeLine/TopBar/DesktopView.js
+++ b/src/containers/unit/ModeLine/TopBar/DesktopView.js
@@ -18,7 +18,7 @@ const DesktopView = ({ visiable, viewing, leftOffset, hasNoBottomBorder }) => {
     <Wrapper
       leftOffset={leftOffset}
       noBorder={hasNoBottomBorder}
-      testId="modeline-topbar"
+      testid="modeline-topbar"
       visiable={visiable}
     >
       <InnerWrapper>
diff --git a/src/containers/unit/ModeLine/TopBar/MobileView/CommunityBar/index.js b/src/containers/unit/ModeLine/TopBar/MobileView/CommunityBar/index.js
index b619da1f9..9575a2a37 100644
--- a/src/containers/unit/ModeLine/TopBar/MobileView/CommunityBar/index.js
+++ b/src/containers/unit/ModeLine/TopBar/MobileView/CommunityBar/index.js
@@ -20,7 +20,7 @@ const CommunityBar = ({ visiable, viewing, leftOffset, hasNoBottomBorder }) => {
     <Wrapper
       leftOffset={leftOffset}
       noBorder={hasNoBottomBorder}
-      testId="modeline-topbar"
+      testid="modeline-topbar"
       visiable={visiable}
     >
       <InnerWrapper>
diff --git a/src/containers/unit/ModeLine/styles/bottom_bar/arrow_block.js b/src/containers/unit/ModeLine/styles/bottom_bar/arrow_block.ts
similarity index 100%
rename from src/containers/unit/ModeLine/styles/bottom_bar/arrow_block.js
rename to src/containers/unit/ModeLine/styles/bottom_bar/arrow_block.ts
diff --git a/src/containers/unit/ModeLine/styles/bottom_bar/community_info.js b/src/containers/unit/ModeLine/styles/bottom_bar/community_info.ts
similarity index 100%
rename from src/containers/unit/ModeLine/styles/bottom_bar/community_info.js
rename to src/containers/unit/ModeLine/styles/bottom_bar/community_info.ts
diff --git a/src/containers/unit/ModeLine/styles/bottom_bar/index.js b/src/containers/unit/ModeLine/styles/bottom_bar/index.ts
similarity index 97%
rename from src/containers/unit/ModeLine/styles/bottom_bar/index.js
rename to src/containers/unit/ModeLine/styles/bottom_bar/index.ts
index ffbb21ae8..59554a376 100644
--- a/src/containers/unit/ModeLine/styles/bottom_bar/index.js
+++ b/src/containers/unit/ModeLine/styles/bottom_bar/index.ts
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   position: fixed;
   left: 0;
diff --git a/src/containers/unit/ModeLine/styles/top_bar/desktop_view.js b/src/containers/unit/ModeLine/styles/top_bar/desktop_view.ts
similarity index 95%
rename from src/containers/unit/ModeLine/styles/top_bar/desktop_view.js
rename to src/containers/unit/ModeLine/styles/top_bar/desktop_view.ts
index e556a39d0..eb4bdd304 100644
--- a/src/containers/unit/ModeLine/styles/top_bar/desktop_view.js
+++ b/src/containers/unit/ModeLine/styles/top_bar/desktop_view.ts
@@ -4,7 +4,7 @@ import { css, theme, WIDTH } from '@/utils'
 import { getMaxWidth } from '../metrics/top_bar'
 
 export const WrapperBase = styled.header.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   z-index: 2;
   width: 100%;
@@ -44,7 +44,7 @@ export const Wrapper = styled.div`
   transition-delay: 1s;
 `
 export const InnerWrapper = styled(InnerWrapperBase)`
-  ${css.flex('align-center', 'space-between')};
+  ${css.flex('align-center', 'justify-between')};
 `
 export const TabsWrapper = styled.div`
   flex-grow: 1;
diff --git a/src/containers/unit/ModeLine/styles/top_bar/mobile_view/article_bar/index.js b/src/containers/unit/ModeLine/styles/top_bar/mobile_view/article_bar/index.ts
similarity index 95%
rename from src/containers/unit/ModeLine/styles/top_bar/mobile_view/article_bar/index.js
rename to src/containers/unit/ModeLine/styles/top_bar/mobile_view/article_bar/index.ts
index 63e32894a..68fc27606 100644
--- a/src/containers/unit/ModeLine/styles/top_bar/mobile_view/article_bar/index.js
+++ b/src/containers/unit/ModeLine/styles/top_bar/mobile_view/article_bar/index.ts
@@ -21,7 +21,7 @@ export const Wrapper = styled.div`
 export const InnerWrapper = styled.div`
   width: 100%;
   height: 33px;
-  ${css.flex('align-center', 'space-between')};
+  ${css.flex('align-center', 'justify-between')};
   padding-left: 0;
   padding-right: 0vw;
   transition: all 0.2s;
diff --git a/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/index.js b/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/index.ts
similarity index 94%
rename from src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/index.js
rename to src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/index.ts
index 025f43901..b85e9c76c 100644
--- a/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/index.js
+++ b/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/index.ts
@@ -20,7 +20,7 @@ export const Wrapper = styled.div`
 export const InnerWrapper = styled.div`
   width: 100%;
   height: 33px;
-  ${css.flex('align-center', 'space-between')};
+  ${css.flex('align-center', 'justify-between')};
   padding-left: 0;
   padding-right: 0vw;
   transition: all 0.2s;
diff --git a/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/tag_block.js b/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/tag_block.ts
similarity index 100%
rename from src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/tag_block.js
rename to src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/tag_block.ts
diff --git a/src/containers/unit/ModeLineMenu/index.js b/src/containers/unit/ModeLineMenu/index.js
index 4c64a2871..7cf3ccae6 100755
--- a/src/containers/unit/ModeLineMenu/index.js
+++ b/src/containers/unit/ModeLineMenu/index.js
@@ -44,21 +44,21 @@ const renderMenus = (type, curActive) => {
   }
 }
 
-const ModeLineMenuContainer = ({ modeLineMenu: store, testId, type }) => {
+const ModeLineMenuContainer = ({ modeLineMenu: store, testid, type }) => {
   useInit(store)
   const { curActive } = store
 
-  return <Wrapper testId={testId}>{renderMenus(type, curActive)}</Wrapper>
+  return <Wrapper testid={testid}>{renderMenus(type, curActive)}</Wrapper>
 }
 
 ModeLineMenuContainer.propTypes = {
   modeLineMenu: T.any.isRequired,
   type: T.oneOf([values(TYPE.MM_TYPE)]).isRequired,
-  testId: T.string,
+  testid: T.string,
 }
 
 ModeLineMenuContainer.defaultProps = {
-  testId: 'mode-line-menu',
+  testid: 'mode-line-menu',
 }
 
 export default pluggedIn(ModeLineMenuContainer)
diff --git a/src/containers/unit/ModeLineMenu/styles/filter_menu/content.js b/src/containers/unit/ModeLineMenu/styles/filter_menu/content.ts
similarity index 97%
rename from src/containers/unit/ModeLineMenu/styles/filter_menu/content.js
rename to src/containers/unit/ModeLineMenu/styles/filter_menu/content.ts
index 49d7d5986..a1e417969 100644
--- a/src/containers/unit/ModeLineMenu/styles/filter_menu/content.js
+++ b/src/containers/unit/ModeLineMenu/styles/filter_menu/content.ts
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('justify-between')};
   width: 100%;
diff --git a/src/containers/unit/ModeLineMenu/styles/filter_menu/header.js b/src/containers/unit/ModeLineMenu/styles/filter_menu/header.ts
similarity index 95%
rename from src/containers/unit/ModeLineMenu/styles/filter_menu/header.js
rename to src/containers/unit/ModeLineMenu/styles/filter_menu/header.ts
index 9c9b1cdda..16e959e16 100644
--- a/src/containers/unit/ModeLineMenu/styles/filter_menu/header.js
+++ b/src/containers/unit/ModeLineMenu/styles/filter_menu/header.ts
@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('justify-between')};
   width: 100%;
diff --git a/src/containers/unit/ModeLineMenu/styles/filter_menu/index.js b/src/containers/unit/ModeLineMenu/styles/filter_menu/index.ts
similarity index 90%
rename from src/containers/unit/ModeLineMenu/styles/filter_menu/index.js
rename to src/containers/unit/ModeLineMenu/styles/filter_menu/index.ts
index 537f92c12..297fbf326 100644
--- a/src/containers/unit/ModeLineMenu/styles/filter_menu/index.js
+++ b/src/containers/unit/ModeLineMenu/styles/filter_menu/index.ts
@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { css } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-start')};
   margin-top: 25px;
diff --git a/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/index.js b/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/index.ts
similarity index 97%
rename from src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/index.js
rename to src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/index.ts
index 614670388..70546c26b 100644
--- a/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/index.js
+++ b/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/index.ts
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-start')};
   width: 32vw;
diff --git a/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/options.js b/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/options.ts
similarity index 95%
rename from src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/options.js
rename to src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/options.ts
index f57187368..b13450707 100644
--- a/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/options.js
+++ b/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/options.ts
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-start')};
   width: 100%;
diff --git a/src/containers/unit/ModeLineMenu/styles/global_menu/home_navi.js b/src/containers/unit/ModeLineMenu/styles/global_menu/home_navi.ts
similarity index 95%
rename from src/containers/unit/ModeLineMenu/styles/global_menu/home_navi.js
rename to src/containers/unit/ModeLineMenu/styles/global_menu/home_navi.ts
index 925e0d173..a7c9e7a6b 100644
--- a/src/containers/unit/ModeLineMenu/styles/global_menu/home_navi.js
+++ b/src/containers/unit/ModeLineMenu/styles/global_menu/home_navi.ts
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-center')};
   width: 100%;
diff --git a/src/containers/unit/ModeLineMenu/styles/global_menu/main_menu.js b/src/containers/unit/ModeLineMenu/styles/global_menu/main_menu.ts
similarity index 96%
rename from src/containers/unit/ModeLineMenu/styles/global_menu/main_menu.js
rename to src/containers/unit/ModeLineMenu/styles/global_menu/main_menu.ts
index ea2ddae54..143bc5714 100644
--- a/src/containers/unit/ModeLineMenu/styles/global_menu/main_menu.js
+++ b/src/containers/unit/ModeLineMenu/styles/global_menu/main_menu.ts
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('justify-center')};
   width: 100%;
diff --git a/src/containers/unit/ModeLineMenu/styles/index.js b/src/containers/unit/ModeLineMenu/styles/index.ts
similarity index 87%
rename from src/containers/unit/ModeLineMenu/styles/index.js
rename to src/containers/unit/ModeLineMenu/styles/index.ts
index 553443dfd..a40cdd433 100755
--- a/src/containers/unit/ModeLineMenu/styles/index.js
+++ b/src/containers/unit/ModeLineMenu/styles/index.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-both')};
   height: 100%;
diff --git a/src/containers/unit/ModeLineMenu/styles/more_menu.js b/src/containers/unit/ModeLineMenu/styles/more_menu.ts
similarity index 90%
rename from src/containers/unit/ModeLineMenu/styles/more_menu.js
rename to src/containers/unit/ModeLineMenu/styles/more_menu.ts
index 333d51a38..843a5393d 100644
--- a/src/containers/unit/ModeLineMenu/styles/more_menu.js
+++ b/src/containers/unit/ModeLineMenu/styles/more_menu.ts
@@ -4,7 +4,7 @@ import { css } from '@/utils'
 import { L_MENU_HEIGHT } from './metrics/index'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-both')};
   height: ${L_MENU_HEIGHT};
diff --git a/src/containers/unit/ModeLineMenu/styles/navi_button.js b/src/containers/unit/ModeLineMenu/styles/navi_button.ts
similarity index 93%
rename from src/containers/unit/ModeLineMenu/styles/navi_button.js
rename to src/containers/unit/ModeLineMenu/styles/navi_button.ts
index 8f527cc81..2af747d2b 100644
--- a/src/containers/unit/ModeLineMenu/styles/navi_button.js
+++ b/src/containers/unit/ModeLineMenu/styles/navi_button.ts
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-both')};
   width: 68px;
diff --git a/src/containers/unit/ModeLineMenu/styles/search_menu.js b/src/containers/unit/ModeLineMenu/styles/search_menu.ts
similarity index 97%
rename from src/containers/unit/ModeLineMenu/styles/search_menu.js
rename to src/containers/unit/ModeLineMenu/styles/search_menu.ts
index 6f1b735d1..846d34f10 100644
--- a/src/containers/unit/ModeLineMenu/styles/search_menu.js
+++ b/src/containers/unit/ModeLineMenu/styles/search_menu.ts
@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-center', 'justify-start')};
   margin-top: 42px;
diff --git a/src/containers/unit/Sidebar/RealSidebar.js b/src/containers/unit/Sidebar/RealSidebar.js
index 5ecc96717..8439f0294 100644
--- a/src/containers/unit/Sidebar/RealSidebar.js
+++ b/src/containers/unit/Sidebar/RealSidebar.js
@@ -41,7 +41,7 @@ const SidebarContainer = ({ sidebar: store }) => {
 
   return (
     <MainWrapper
-      testId="sidebar"
+      testid="sidebar"
       pin={pin}
       className={ANCHOR.GLOBAL_BLUR_CLASS}
       isPulled={isPulled}
diff --git a/src/containers/unit/Sidebar/styles/footer.js b/src/containers/unit/Sidebar/styles/footer.ts
similarity index 100%
rename from src/containers/unit/Sidebar/styles/footer.js
rename to src/containers/unit/Sidebar/styles/footer.ts
diff --git a/src/containers/unit/Sidebar/styles/header.js b/src/containers/unit/Sidebar/styles/header.ts
similarity index 100%
rename from src/containers/unit/Sidebar/styles/header.js
rename to src/containers/unit/Sidebar/styles/header.ts
diff --git a/src/containers/unit/Sidebar/styles/index.js b/src/containers/unit/Sidebar/styles/index.ts
similarity index 97%
rename from src/containers/unit/Sidebar/styles/index.js
rename to src/containers/unit/Sidebar/styles/index.ts
index 9650f1fa8..d256218e4 100755
--- a/src/containers/unit/Sidebar/styles/index.js
+++ b/src/containers/unit/Sidebar/styles/index.ts
@@ -7,7 +7,7 @@ import { getMainWidth, getShadow, SIDEBAR_WIDTH } from './metric'
 // 纯css，div隐藏滚动条，保留鼠标滚动效果。
 // http://blog.csdn.net/liusaint1992/article/details/51277751
 export const Wrapper = styled.aside.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   position: fixed;
   top: 0;
diff --git a/src/containers/unit/Sidebar/styles/loading_blocks.js b/src/containers/unit/Sidebar/styles/loading_blocks.ts
similarity index 94%
rename from src/containers/unit/Sidebar/styles/loading_blocks.js
rename to src/containers/unit/Sidebar/styles/loading_blocks.ts
index 3b18fc879..bdcb98776 100644
--- a/src/containers/unit/Sidebar/styles/loading_blocks.js
+++ b/src/containers/unit/Sidebar/styles/loading_blocks.ts
@@ -4,7 +4,7 @@ import { animate, css, theme } from '@/utils'
 import { SIDEBAR_WIDTH } from './metric'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-center')};
   background: ${theme('sidebar.bg')};
diff --git a/src/containers/unit/Sidebar/styles/menu_list/index.js b/src/containers/unit/Sidebar/styles/menu_list/index.ts
similarity index 100%
rename from src/containers/unit/Sidebar/styles/menu_list/index.js
rename to src/containers/unit/Sidebar/styles/menu_list/index.ts
diff --git a/src/containers/unit/Sidebar/styles/menu_list/menu_bar.js b/src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts
similarity index 100%
rename from src/containers/unit/Sidebar/styles/menu_list/menu_bar.js
rename to src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts
diff --git a/src/containers/unit/Sidebar/styles/metric.js b/src/containers/unit/Sidebar/styles/metric.ts
similarity index 79%
rename from src/containers/unit/Sidebar/styles/metric.js
rename to src/containers/unit/Sidebar/styles/metric.ts
index abbc4b0cc..954560c13 100644
--- a/src/containers/unit/Sidebar/styles/metric.js
+++ b/src/containers/unit/Sidebar/styles/metric.ts
@@ -1,7 +1,7 @@
 export const SIDEBAR_WIDTH = '56px'
 export const SIDEBAR_EXPAND_WIDTH = '260px'
 
-export const getMainWidth = (pin) => {
+export const getMainWidth = (pin: boolean): string => {
   // 58px is 2px more than SIDEBAR_WIDTH
   // otherwise the sidebar will have horizontal scroller
   // fix later
@@ -9,6 +9,6 @@ export const getMainWidth = (pin) => {
   return pin ? SIDEBAR_EXPAND_WIDTH : '58px' // SIDEBAR_WIDTH
 }
 
-export const getShadow = (pin) => {
+export const getShadow = (pin: boolean): string => {
   return pin ? '3px 0 20px rgba(0, 0, 0, 0.2)' : ''
 }
diff --git a/src/containers/unit/Sidebar/styles/pull_button.js b/src/containers/unit/Sidebar/styles/pull_button.ts
similarity index 100%
rename from src/containers/unit/Sidebar/styles/pull_button.js
rename to src/containers/unit/Sidebar/styles/pull_button.ts
diff --git a/src/containers/unit/TagsBar/DesktopView/Folder.js b/src/containers/unit/TagsBar/DesktopView/Folder.js
index 1ff8cd802..9bff75c09 100644
--- a/src/containers/unit/TagsBar/DesktopView/Folder.js
+++ b/src/containers/unit/TagsBar/DesktopView/Folder.js
@@ -76,7 +76,7 @@ const Folder = ({ title, groupTags, allTags, activeTag, onSelect }) => {
               key={tag.id}
               tag={tag}
               active={activeTag.title === tag.title}
-              activeId={activeTag.id}
+              activeid={activeTag.id}
               onSelect={onSelect}
             />
           ))}
diff --git a/src/containers/unit/TagsBar/DesktopView/TagItem.js b/src/containers/unit/TagsBar/DesktopView/TagItem.js
index 1f041af11..d07e48e7e 100644
--- a/src/containers/unit/TagsBar/DesktopView/TagItem.js
+++ b/src/containers/unit/TagsBar/DesktopView/TagItem.js
@@ -12,13 +12,13 @@ import {
   CountInfoWrapper,
 } from '../styles/desktop_view/tag_item'
 
-const TagItem = ({ tag, active, activeId, inline, onSelect }) => {
+const TagItem = ({ tag, active, activeid, inline, onSelect }) => {
   return (
     <Wrapper active={active} inline={inline}>
       <HashSign
         color={tag.color}
         active={active}
-        activeId={activeId}
+        activeid={activeid}
         inline={inline}
       />
 
diff --git a/src/containers/unit/TagsBar/styles/card_view.js b/src/containers/unit/TagsBar/styles/card_view.ts
similarity index 100%
rename from src/containers/unit/TagsBar/styles/card_view.js
rename to src/containers/unit/TagsBar/styles/card_view.ts
diff --git a/src/containers/unit/TagsBar/styles/desktop_view/folder.js b/src/containers/unit/TagsBar/styles/desktop_view/folder.ts
similarity index 100%
rename from src/containers/unit/TagsBar/styles/desktop_view/folder.js
rename to src/containers/unit/TagsBar/styles/desktop_view/folder.ts
diff --git a/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.js b/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts
similarity index 100%
rename from src/containers/unit/TagsBar/styles/desktop_view/goback_tag.js
rename to src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts
diff --git a/src/containers/unit/TagsBar/styles/desktop_view/index.js b/src/containers/unit/TagsBar/styles/desktop_view/index.ts
similarity index 100%
rename from src/containers/unit/TagsBar/styles/desktop_view/index.js
rename to src/containers/unit/TagsBar/styles/desktop_view/index.ts
diff --git a/src/containers/unit/TagsBar/styles/desktop_view/tag_count.js b/src/containers/unit/TagsBar/styles/desktop_view/tag_count.ts
similarity index 100%
rename from src/containers/unit/TagsBar/styles/desktop_view/tag_count.js
rename to src/containers/unit/TagsBar/styles/desktop_view/tag_count.ts
diff --git a/src/containers/unit/TagsBar/styles/desktop_view/tag_item.js b/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts
similarity index 89%
rename from src/containers/unit/TagsBar/styles/desktop_view/tag_item.js
rename to src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts
index 45d3822eb..ec744e550 100644
--- a/src/containers/unit/TagsBar/styles/desktop_view/tag_item.js
+++ b/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts
@@ -26,15 +26,15 @@ export const AllTagIcon = styled(Img)`
   ${css.size(14)};
   transform: rotate(17deg);
 `
-const getActiveColor = (active, color, activeId) => {
-  if (activeId !== null) return active ? color : '#497684'
+const getActiveColor = (active, color, activeid) => {
+  if (activeid !== null) return active ? color : '#497684'
 
   return !active ? color : '#497684'
 }
 
 export const HashSign = styled(HashTagSVG)`
-  fill: ${({ active, color, activeId }) =>
-    getActiveColor(active, color, activeId)};
+  fill: ${({ active, color, activeid }) =>
+    getActiveColor(active, color, activeid)};
   ${css.size(14)};
   margin-right: ${({ inline }) => (!inline ? '12px' : '3px')};
   opacity: ${theme('tags.dotOpacity')};
diff --git a/src/containers/user/UserBilling/styles/bills_table.js b/src/containers/user/UserBilling/styles/bills_table.ts
similarity index 100%
rename from src/containers/user/UserBilling/styles/bills_table.js
rename to src/containers/user/UserBilling/styles/bills_table.ts
diff --git a/src/containers/user/UserBilling/styles/index.js b/src/containers/user/UserBilling/styles/index.ts
similarity index 100%
rename from src/containers/user/UserBilling/styles/index.js
rename to src/containers/user/UserBilling/styles/index.ts
diff --git a/src/containers/user/UserBilling/styles/table_section_desc.js b/src/containers/user/UserBilling/styles/table_section_desc.ts
similarity index 100%
rename from src/containers/user/UserBilling/styles/table_section_desc.js
rename to src/containers/user/UserBilling/styles/table_section_desc.ts
diff --git a/src/containers/user/UserBilling/styles/upgrade_menu.js b/src/containers/user/UserBilling/styles/upgrade_menu.ts
similarity index 100%
rename from src/containers/user/UserBilling/styles/upgrade_menu.js
rename to src/containers/user/UserBilling/styles/upgrade_menu.ts
diff --git a/src/containers/user/UserBilling/styles/xxx_plan.js b/src/containers/user/UserBilling/styles/xxx_plan.ts
similarity index 100%
rename from src/containers/user/UserBilling/styles/xxx_plan.js
rename to src/containers/user/UserBilling/styles/xxx_plan.ts
diff --git a/src/containers/user/UserFavorited/styles/breadcrumbs.js b/src/containers/user/UserFavorited/styles/breadcrumbs.ts
similarity index 100%
rename from src/containers/user/UserFavorited/styles/breadcrumbs.js
rename to src/containers/user/UserFavorited/styles/breadcrumbs.ts
diff --git a/src/containers/user/UserFavorited/styles/index.js b/src/containers/user/UserFavorited/styles/index.js
deleted file mode 100755
index 98f004575..000000000
--- a/src/containers/user/UserFavorited/styles/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-// import styled from 'styled-components'
-// import { theme } from '@/utils'
diff --git a/src/containers/user/UserLister/styles/header_info.js b/src/containers/user/UserLister/styles/header_info.ts
similarity index 100%
rename from src/containers/user/UserLister/styles/header_info.js
rename to src/containers/user/UserLister/styles/header_info.ts
diff --git a/src/containers/user/UserLister/styles/index.js b/src/containers/user/UserLister/styles/index.ts
similarity index 100%
rename from src/containers/user/UserLister/styles/index.js
rename to src/containers/user/UserLister/styles/index.ts
diff --git a/src/containers/user/UserLister/styles/user_list.js b/src/containers/user/UserLister/styles/user_list.ts
similarity index 100%
rename from src/containers/user/UserLister/styles/user_list.js
rename to src/containers/user/UserLister/styles/user_list.ts
diff --git a/src/containers/user/UserProfile/index.js b/src/containers/user/UserProfile/index.js
index 31e40d736..0aa6b2c5d 100755
--- a/src/containers/user/UserProfile/index.js
+++ b/src/containers/user/UserProfile/index.js
@@ -22,14 +22,14 @@ import { useInit } from './logic'
 /* eslint-disable-next-line */
 const log = buildLog('C:UserProfile')
 
-const UserProfileContainer = ({ userProfile: store, testId }) => {
+const UserProfileContainer = ({ userProfile: store, testid }) => {
   useInit(store)
 
   const { viewingUser } = store
   // console.log('# viewingUser: ', viewingUser)
 
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       <NumbersPad user={viewingUser} />
       <ContributesWrapper>
         <ContributeMap data={viewingUser.contributes} />
@@ -43,11 +43,11 @@ const UserProfileContainer = ({ userProfile: store, testId }) => {
 
 UserProfileContainer.propTypes = {
   userProfile: T.any.isRequired,
-  testId: T.string,
+  testid: T.string,
 }
 
 UserProfileContainer.defaultProps = {
-  testId: 'user-profile',
+  testid: 'user-profile',
 }
 
 export default pluggedIn(UserProfileContainer)
diff --git a/src/containers/user/UserProfile/styles/activities/brief_info.js b/src/containers/user/UserProfile/styles/activities/brief_info.ts
similarity index 100%
rename from src/containers/user/UserProfile/styles/activities/brief_info.js
rename to src/containers/user/UserProfile/styles/activities/brief_info.ts
diff --git a/src/containers/user/UserProfile/styles/activities/detail_info.js b/src/containers/user/UserProfile/styles/activities/detail_info.ts
similarity index 100%
rename from src/containers/user/UserProfile/styles/activities/detail_info.js
rename to src/containers/user/UserProfile/styles/activities/detail_info.ts
diff --git a/src/containers/user/UserProfile/styles/activities/event_block.js b/src/containers/user/UserProfile/styles/activities/event_block.ts
similarity index 100%
rename from src/containers/user/UserProfile/styles/activities/event_block.js
rename to src/containers/user/UserProfile/styles/activities/event_block.ts
diff --git a/src/containers/user/UserProfile/styles/activities/index.js b/src/containers/user/UserProfile/styles/activities/index.ts
similarity index 100%
rename from src/containers/user/UserProfile/styles/activities/index.js
rename to src/containers/user/UserProfile/styles/activities/index.ts
diff --git a/src/containers/user/UserProfile/styles/contribute_map.js b/src/containers/user/UserProfile/styles/contribute_map.ts
similarity index 87%
rename from src/containers/user/UserProfile/styles/contribute_map.js
rename to src/containers/user/UserProfile/styles/contribute_map.ts
index d4d155075..36cc5f3c4 100644
--- a/src/containers/user/UserProfile/styles/contribute_map.js
+++ b/src/containers/user/UserProfile/styles/contribute_map.ts
@@ -1,8 +1,9 @@
 import styled from 'styled-components'
 
 import { theme, css } from '@/utils'
+import { TTheme } from '@/types'
 
-const dotColor = (scale) => {
+const dotColor = (scale: string): TTheme => {
   let key = `heatmap.scale_${scale}`
   if (scale === 'empty') {
     key = 'heatmap.empty'
@@ -41,11 +42,9 @@ export const DotList = styled.div`
   margin-left: 5px;
   margin-right: 3px;
 `
-/* eslint-disable */
 export const ColorDot = styled.div`
   ${css.size(8)};
   border-radius: 2px;
   margin-right: 3px;
-  background-color: ${(props) => dotColor(props.scale)(props)};
+  background-color: ${({ scale }) => dotColor(scale)};
 `
-/* eslint-enable */
diff --git a/src/containers/user/UserProfile/styles/index.js b/src/containers/user/UserProfile/styles/index.ts
similarity index 93%
rename from src/containers/user/UserProfile/styles/index.js
rename to src/containers/user/UserProfile/styles/index.ts
index 20d75d32b..5d055ce6f 100755
--- a/src/containers/user/UserProfile/styles/index.js
+++ b/src/containers/user/UserProfile/styles/index.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))``
 export const ContributesWrapper = styled.div`
   width: 100%;
diff --git a/src/containers/user/UserProfile/styles/numbers_pad.js b/src/containers/user/UserProfile/styles/numbers_pad.ts
similarity index 100%
rename from src/containers/user/UserProfile/styles/numbers_pad.js
rename to src/containers/user/UserProfile/styles/numbers_pad.ts
diff --git a/src/containers/user/UserProfile/styles/subscribed_communities.js b/src/containers/user/UserProfile/styles/subscribed_communities.ts
similarity index 93%
rename from src/containers/user/UserProfile/styles/subscribed_communities.js
rename to src/containers/user/UserProfile/styles/subscribed_communities.ts
index 0e9fc096a..ab5cbf34a 100644
--- a/src/containers/user/UserProfile/styles/subscribed_communities.js
+++ b/src/containers/user/UserProfile/styles/subscribed_communities.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   margin-top: 50px;
   padding: 0 10px;
diff --git a/src/containers/user/UserPublishedComments/styles/comments_count.js b/src/containers/user/UserPublishedComments/styles/comments_count.ts
similarity index 100%
rename from src/containers/user/UserPublishedComments/styles/comments_count.js
rename to src/containers/user/UserPublishedComments/styles/comments_count.ts
diff --git a/src/containers/user/UserPublishedComments/styles/comments_to_content.js b/src/containers/user/UserPublishedComments/styles/comments_to_content.ts
similarity index 100%
rename from src/containers/user/UserPublishedComments/styles/comments_to_content.js
rename to src/containers/user/UserPublishedComments/styles/comments_to_content.ts
diff --git a/src/containers/user/UserPublishedComments/styles/index.js b/src/containers/user/UserPublishedComments/styles/index.ts
similarity index 100%
rename from src/containers/user/UserPublishedComments/styles/index.js
rename to src/containers/user/UserPublishedComments/styles/index.ts
diff --git a/src/containers/user/UserPublishedComments/styles/parent.js b/src/containers/user/UserPublishedComments/styles/parent.ts
similarity index 100%
rename from src/containers/user/UserPublishedComments/styles/parent.js
rename to src/containers/user/UserPublishedComments/styles/parent.ts
diff --git a/src/containers/user/UserSettings/styles/index.js b/src/containers/user/UserSettings/styles/index.ts
similarity index 100%
rename from src/containers/user/UserSettings/styles/index.js
rename to src/containers/user/UserSettings/styles/index.ts
diff --git a/src/containers/viewer/JobViewer/styles/digest_bar.js b/src/containers/viewer/JobViewer/styles/digest_bar.ts
similarity index 100%
rename from src/containers/viewer/JobViewer/styles/digest_bar.js
rename to src/containers/viewer/JobViewer/styles/digest_bar.ts
diff --git a/src/containers/viewer/JobViewer/styles/index.js b/src/containers/viewer/JobViewer/styles/index.ts
similarity index 100%
rename from src/containers/viewer/JobViewer/styles/index.js
rename to src/containers/viewer/JobViewer/styles/index.ts
diff --git a/src/containers/viewer/MailsViewer/index.js b/src/containers/viewer/MailsViewer/index.js
index 6dd426f73..d052c4109 100755
--- a/src/containers/viewer/MailsViewer/index.js
+++ b/src/containers/viewer/MailsViewer/index.js
@@ -12,7 +12,6 @@ import { pluggedIn, buildLog } from '@/utils'
 import TabSelector from '@/components/TabSelector'
 import MailLists from './MailLists'
 
-import { Wrapper } from './styles'
 import { useInit, selectChange } from './logic'
 
 /* eslint-disable-next-line */
@@ -45,7 +44,7 @@ const MailsViewerContainer = ({ mailsViewer: store }) => {
   const { activeRaw, pagedMentionsData, readState } = store
 
   return (
-    <Wrapper>
+    <div>
       <TabSelector
         source={mailTabs}
         activeRaw={activeRaw}
@@ -57,7 +56,7 @@ const MailsViewerContainer = ({ mailsViewer: store }) => {
         pagedMentions={pagedMentionsData}
         readState={readState}
       />
-    </Wrapper>
+    </div>
   )
 }
 
diff --git a/src/containers/viewer/MailsViewer/styles/index.js b/src/containers/viewer/MailsViewer/styles/index.js
deleted file mode 100755
index e69de29bb..000000000
diff --git a/src/containers/viewer/MailsViewer/styles/mention_list.js b/src/containers/viewer/MailsViewer/styles/mention_list.ts
similarity index 100%
rename from src/containers/viewer/MailsViewer/styles/mention_list.js
rename to src/containers/viewer/MailsViewer/styles/mention_list.ts
diff --git a/src/containers/viewer/MailsViewer/styles/toggle_info.js b/src/containers/viewer/MailsViewer/styles/toggle_info.ts
similarity index 100%
rename from src/containers/viewer/MailsViewer/styles/toggle_info.js
rename to src/containers/viewer/MailsViewer/styles/toggle_info.ts
diff --git a/src/containers/viewer/MailsViewer/styles/toggle_read_button.js b/src/containers/viewer/MailsViewer/styles/toggle_read_button.ts
similarity index 100%
rename from src/containers/viewer/MailsViewer/styles/toggle_read_button.js
rename to src/containers/viewer/MailsViewer/styles/toggle_read_button.ts
diff --git a/src/containers/viewer/PostViewer/styles/index.js b/src/containers/viewer/PostViewer/styles/index.ts
similarity index 100%
rename from src/containers/viewer/PostViewer/styles/index.js
rename to src/containers/viewer/PostViewer/styles/index.ts
diff --git a/src/pages/_app.js b/src/pages/_app.tsx
similarity index 100%
rename from src/pages/_app.js
rename to src/pages/_app.tsx
diff --git a/src/pages/user.js b/src/pages/user.js
index 4c843762a..524864573 100755
--- a/src/pages/user.js
+++ b/src/pages/user.js
@@ -110,7 +110,7 @@ const UserPage = (props) => {
         metric={METRIC.USER}
         seoConfig={seoConfig}
         errorCode={errorCode}
-        noSidebar={`/user/${user.login}`}
+        noSidebar={!!user.login}
       >
         <UserContent />
       </GlobalLayout>
diff --git a/src/stores/RootStore/index.js b/src/stores/RootStore/index.ts
similarity index 91%
rename from src/stores/RootStore/index.js
rename to src/stores/RootStore/index.ts
index d0b7ed856..3be21fbcb 100755
--- a/src/stores/RootStore/index.js
+++ b/src/stores/RootStore/index.ts
@@ -3,7 +3,7 @@
  *
  */
 
-import { types as T } from 'mobx-state-tree'
+import { types as T, Instance } from 'mobx-state-tree'
 import { merge } from 'ramda'
 
 import { EVENT } from '@/constant'
@@ -124,12 +124,14 @@ const rootStore = T.model({
   route: T.optional(RouteStore, {}),
   viewing: T.optional(ViewingStore, {}),
   comments: T.optional(CommentsStore, {}),
+  // @ts-ignore TODO:
   theme: T.optional(ThemeStore, ThemeDefaults),
   locale: T.optional(T.enumeration('locale', ['zh', 'en']), 'zh'),
   errorCode: T.maybeNull(T.number),
   // domain end
 
   // toolbox
+  // @ts-ignore TODO:
   sidebar: T.optional(SidebarStore, { menuItems: [] }),
   drawer: T.optional(DrawerStore, { visible: false }),
   doraemon: T.optional(DoraemonStore, {}),
@@ -260,76 +262,79 @@ const rootStore = T.model({
     },
   }))
   .actions((self) => ({
-    markRoute(query, opt) {
+    markRoute(query, opt): void {
       self.route.markRoute(query, opt)
     },
-    showTopModeline(bool) {
+    showTopModeline(bool): void {
       self.modeLine.showTopBar(bool)
     },
-    openDoraemon() {
+    openDoraemon(): void {
       self.doraemon.open()
     },
-    closeDrawer() {
+    closeDrawer(): void {
       self.drawer.close()
     },
-    changeTheme(name) {
+    changeTheme(name): void {
       self.theme.changeTheme(name)
     },
-    setViewing(sobj) {
+    setViewing(sobj): void {
       self.viewing.setViewing(sobj)
     },
-    updateViewingIfNeed(type, sobj) {
+    updateViewingIfNeed(type, sobj): void {
       self.viewing.updateViewingIfNeed(type, sobj)
     },
-    sponsorHepler() {
+    sponsorHepler(): void {
       self.footer.sponsorHepler()
     },
-    cashierHelper(opt) {
-      self.membershipContent.close()
+    cashierHelper(opt): void {
       self.footer.closeSponsor()
       self.cashier.callCashier(opt)
     },
-    toast(type, options = {}) {
+    toast(type, options = {}): void {
       const themeData = themeSkins[self.theme.curTheme]
       const progressBarColor = toastBarColor(type, themeData)
 
       const toastOpt = merge(options, { progressBarColor })
       toast[type](toastOpt)
     },
-    authWarning(options = {}) {
+    authWarning(options = {}): void {
       const defaultOpt = {
         position: 'topCenter',
         title: '当前账号未登录',
         msg: '暂不支持匿名操作，请登录后再次尝试.',
       }
 
+      // @ts-ignore TODO:
       if (options?.hideToast === true) {
         // pass
       } else {
+        // @ts-ignore TODO:
         self.toast('warn', merge(defaultOpt, options))
       }
 
       send(EVENT.LOGIN_PANEL)
-      return false
     },
-    changesetErr(options) {
+    changesetErr(options): void {
+      // @ts-ignore TODO:
       self.toast('error', options)
     },
-    callInformer() {
+    callInformer(): void {
       self.informer.show()
     },
-    callGirlVerifier() {
+    callGirlVerifier(): void {
       self.girlVerifier.show()
     },
-    updateC11N(options) {
+    updateC11N(options): void {
       self.account.updateC11N(options)
     },
-    isMemberOf(type) {
+    isMemberOf(type): boolean {
       return self.account.isMemberOf(type)
     },
-    mark(sobj) {
+    mark(sobj): void {
       markStates(sobj, self)
     },
   }))
 
+export type IRootStore = Instance<typeof rootStore>
+
 export default rootStore
diff --git a/src/stores/index.js b/src/stores/index.ts
similarity index 96%
rename from src/stores/index.js
rename to src/stores/index.ts
index 474fab567..0fedba493 100755
--- a/src/stores/index.js
+++ b/src/stores/index.ts
@@ -1,3 +1,8 @@
+// IRootStore imported by container/xx/store, which is imported by RootStore index
+// cause the cycle import issue, but type info is removed after ts compile,
+// so cycle issue it's fine, ingore it
+/* eslint-disable import/no-cycle */
+
 // domain store
 /* export { default as RouteStore } from './RouteStore' */
 export { default as RouteStore } from '@/containers/Route/store'
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 000000000..fc1246716
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,20 @@
+import { IRootStore as RootStoreInterface } from '@/stores/RootStore'
+
+export type IRootStore = RootStoreInterface
+
+export type TCommunity = {
+  id: string
+  title: string
+  logo: string
+  raw: string
+}
+
+export type TTheme = ((obj: any) => unknown) | string
+
+// google analytis format
+export type GA_EVENT = {
+  action: string
+  category: string
+  label: string
+  value: string
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100755
index 000000000..4aaff9a89
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": false,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "experimentalDecorators": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/containers/*": ["src/containers/*"],
+      "@/components/*": ["src/components/*"],
+      "@/services": ["src/services"],
+      "@/services/*": ["src/services/*"],
+      "@/constant": ["utils/constant"],
+      "@/hooks": ["src/hooks"],
+      "@/hoc": ["src/hoc"],
+      "@/config": ["config"],
+      "@/stores/*": ["src/stores/*"],
+      "@/model": ["src/stores/SharedModel"],
+      "@/utils": ["utils"],
+      "@/schemas": ["src/schemas"],
+      "@/types": ["src/types"],
+      "@/Img": ["src/components/Img"],
+      "@/SvgIcons/*": ["src/components/SvgIcons/*"],
+      "@/i18n": ["i18n"]
+    },
+    "plugins": [
+      {
+        "name": "typescript-styled-plugin",
+        "validate": false
+      }
+    ]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/utils/analytics.js b/utils/analytics.ts
similarity index 77%
rename from utils/analytics.js
rename to utils/analytics.ts
index 8f76763cd..1f6964d75 100755
--- a/utils/analytics.js
+++ b/utils/analytics.ts
@@ -1,9 +1,12 @@
+import { GA_EVENT } from '@/types'
+
 import { Global } from './helper'
 
 // https://analytics.google.com/analytics/web/?hl=zh-CN&pli=1#/embed/report-home/a39874160w174341184p173551323
 
 // https://developers.google.com/analytics/devguides/collection/gtagjs/pages
-const pageview = (url) => {
+const pageview = (url: string): void => {
+  // @ts-ignore
   Global.gtag('config', process.env.NEXT_PUBLIC_GA_TRACING_ID, {
     page_location: url,
   })
@@ -18,8 +21,10 @@ const pageview = (url) => {
     label: this.state.message
   })
 */
+const event = (e: GA_EVENT): void => {
+  const { action, category, label, value } = e
 
-const event = ({ action, category, label, value }) => {
+  // @ts-ignore
   Global.gtag('event', action, {
     event_category: category,
     event_label: label,
diff --git a/utils/animations.js b/utils/animations.ts
similarity index 100%
rename from utils/animations.js
rename to utils/animations.ts
diff --git a/utils/async.js b/utils/async.js
deleted file mode 100755
index ab4eab54b..000000000
--- a/utils/async.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import SR71 from './async/sr71'
-import { asyncErr, asyncRes } from './graphql'
-import { $solver } from './mobx'
-
-export default {
-  SR71,
-  asyncErr,
-  asyncRes,
-  $solver,
-}
diff --git a/utils/async/index.js b/utils/async/index.js
deleted file mode 100755
index 1ab869f16..000000000
--- a/utils/async/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as SR71 } from './sr71'
-export const holder = 1
diff --git a/utils/async/index.ts b/utils/async/index.ts
new file mode 100755
index 000000000..06d8c777b
--- /dev/null
+++ b/utils/async/index.ts
@@ -0,0 +1,10 @@
+import SR71 from './sr71'
+import { asyncErr, asyncRes } from '../graphql'
+import { $solver } from '../mobx'
+
+export default {
+  SR71,
+  asyncErr,
+  asyncRes,
+  $solver,
+}
diff --git a/utils/bstore.js b/utils/bstore.ts
similarity index 55%
rename from utils/bstore.js
rename to utils/bstore.ts
index ede0d4a3e..7dc7720e0 100755
--- a/utils/bstore.js
+++ b/utils/bstore.ts
@@ -3,16 +3,16 @@ import Cookies from 'js-cookie'
 import { path } from 'ramda'
 
 /* eslint-disable */
-const _has_key = (cookie, key) => {
+const _has_key = (cookie: string, key: string): boolean => {
   return new RegExp(
-    '(?:^|;\\s*)' + escape(key).replace(/[\-\.\+\*]/g, '\\$&') + '\\s*\\='
+    '(?:^|;\\s*)' + escape(key).replace(/[\-\.\+\*]/g, '\\$&') + '\\s*\\=',
   ).test(cookie)
 }
 
 // NOTE: this is used only in next's getInitialProps function
 // because getInitialProps is runing on server, do not hove browser cookie
-const from_req = (req, key) => {
-  const cookie = path(['headers', 'cookie'], req)
+const from_req = (req: Record<string, unknown>, key: string): string => {
+  const cookie: string = path(['headers', 'cookie'], req)
   if (!cookie || !key || !_has_key(cookie, key)) {
     return null
   }
@@ -20,6 +20,7 @@ const from_req = (req, key) => {
     '(?:^|.*;\\s*)' +
     escape(key).replace(/[\-\.\+\*]/g, '\\$&') +
     '\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*'
+  // @ts-ignore
   return unescape(cookie.replace(new RegExp(regexpStr), '$1'))
 }
 /* eslint-enable */
@@ -29,15 +30,17 @@ const from_req = (req, key) => {
 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, optional) => store.get(value, optional),
-  set: (key, value) => store.set(key, value),
-  remove: key => store.remove(key),
-  clearAll: () => store.clearAll(),
+  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),
+  clearAll: (): void => store.clearAll(),
   cookie: {
-    from_req: (req, key) => from_req(req, key),
-    set: (key, val, opt = {}) => Cookies.set(key, val, opt),
-    get: key => Cookies.get(key),
-    remove: key => Cookies.remove(key),
+    from_req: (req: Record<string, unknown>, key: string): string =>
+      from_req(req, key),
+    set: (key: string, val: string, opt = {}): string =>
+      Cookies.set(key, val, opt),
+    get: (key: string): string => Cookies.get(key),
+    remove: (key: string): void => Cookies.remove(key),
   },
 }
 
diff --git a/utils/css/flex.js b/utils/css/flex.ts
similarity index 62%
rename from utils/css/flex.js
rename to utils/css/flex.ts
index f392dc834..6ebe330d7 100644
--- a/utils/css/flex.js
+++ b/utils/css/flex.ts
@@ -1,4 +1,18 @@
-const flexExpand = (rule) => {
+type FlexRule =
+  | 'align-both'
+  | 'align-center'
+  | 'align-start'
+  | 'align-end'
+  | 'align-baseline'
+  | 'justify-center'
+  | 'justify-start'
+  | 'justify-end'
+  | 'justify-between'
+  | 'justify-around'
+  | 'justify-evenly'
+  | ''
+
+const flexExpand = (rule: FlexRule): string => {
   switch (rule) {
     case 'align-both':
       return 'align-items: center;justify-content: center;'
@@ -42,23 +56,32 @@ const flexExpand = (rule) => {
  * flex opts sort order:
  * [flex-direction][align-items][flex-grow]
  */
-const flexOpts = (rule1, rule2) => {
+const flexOpts = (rule1: FlexRule, rule2: FlexRule): string => {
   return `${flexExpand(rule1)}${flexExpand(rule2)}`
 }
 
-export const flex = (rule1, rule2 = '') => `
+export const flex = (rule1: FlexRule = '', rule2: FlexRule = ''): string => `
   display: flex;
   ${flexOpts(rule1, rule2)};
 `
-export const flexGrow = (rule1, rule2 = '') => `
+export const flexGrow = (
+  rule1: FlexRule = '',
+  rule2: FlexRule = '',
+): string => `
   ${flex(rule1, rule2)};
   flex-grow: 1;
 `
-export const flexColumn = (rule1, rule2 = '') => `
+export const flexColumn = (
+  rule1: FlexRule = '',
+  rule2: FlexRule = '',
+): string => `
   ${flex(rule1, rule2)};
   flex-direction: column;
 `
-export const flexColumnGrow = (rule1, rule2 = '') => `
+export const flexColumnGrow = (
+  rule1: FlexRule = '',
+  rule2: FlexRule = '',
+): string => `
   ${flexColumn(rule1, rule2)};
   flex-grow: 1;
 `
diff --git a/utils/css/index.js b/utils/css/index.ts
similarity index 87%
rename from utils/css/index.js
rename to utils/css/index.ts
index 999edfbcd..5bc97160c 100644
--- a/utils/css/index.js
+++ b/utils/css/index.ts
@@ -13,7 +13,7 @@ import { flex, flexGrow, flexColumn, flexColumnGrow } from './flex'
 import { circle, size } from './shape'
 import zIndex from './zindex'
 
-const smokey = (initOpacity = 0.6) => `
+const smokey = (initOpacity = 0.6): string => `
   opacity: ${initOpacity};
 
   &:hover {
@@ -22,14 +22,14 @@ const smokey = (initOpacity = 0.6) => `
   }
   transition: opacity 0.2s;
 `
-const cutFrom = (width = '100px') => `
+const cutFrom = (width = '100px'): string => `
   width: ${width};
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 `
 
-const threadTitleHover = () => {
+const threadTitleHover = (): string => {
   return styledCss`
     color: ${theme('thread.articleTitle')};
     text-decoration: underline;
diff --git a/utils/css/media.js b/utils/css/media.ts
similarity index 76%
rename from utils/css/media.js
rename to utils/css/media.ts
index 05d56503e..7b911d659 100644
--- a/utils/css/media.js
+++ b/utils/css/media.ts
@@ -106,19 +106,19 @@ const getLaptopMPadding = (metric) => {
 }
 
 // adapt the inner content with for each page
-export const fitContentWidth = (metric = METRIC.COMMUNITY) => {
+export const fitContentWidth = (metric = METRIC.COMMUNITY): string => {
   const laptopMmediaQuery = media.laptopM`
     padding-left: ${getLaptopMPadding(metric)};
     padding-right: ${getLaptopMPadding(metric)};
-  `.join('')
+  ` // .join('')
 
   const desktopLmediaQuery = media.desktopL`
     margin-left: ${WIDTH[metric]?.CONTENT_OFFSET_DESKTOPL};
-  `.join('')
+  ` // .join('')
 
   const laptopLmediaQuery = media.laptopL`
     margin-left: ${WIDTH[metric]?.CONTENT_OFFSET_LAPTOPL};
-  `.join('')
+  ` // .join('')
 
   return `
     max-width: ${getContentMaxWidth(metric)};
@@ -131,15 +131,26 @@ export const fitContentWidth = (metric = METRIC.COMMUNITY) => {
 }
 
 // get page max width
-export const fitPageWidth = (metric) => {
+export const fitPageWidth = (metric: string): string => {
   return `max-width: ${WIDTH[metric]?.PAGE || WIDTH.COMMUNITY.PAGE};`
 }
 
+// export const media = Object.keys(mediaBreakPoints).reduce((acc, label) => {
+//   acc[label] = (...args) => styledCss`
+//     @media (max-width: ${mediaBreakPoints[label]}px) {
+//       ${styledCss(...args)};
+//     }
+//   `
+//   return acc
+// }, {})
+
+// see @link https://github.com/styled-components/styled-components/issues/430#issuecomment-439016641
 export const media = Object.keys(mediaBreakPoints).reduce((acc, label) => {
-  acc[label] = (...args) => styledCss`
-    @media (max-width: ${mediaBreakPoints[label]}px) {
-      ${styledCss(...args)};
-    }
-  `
+  acc[label] = (literals: TemplateStringsArray, ...placeholders: any[]) =>
+    styledCss`
+        @media (max-width: ${mediaBreakPoints[label]}px) {
+          ${styledCss(literals, ...placeholders)};
+        }
+      `.join('')
   return acc
-}, {})
+}, {} as Record<keyof typeof mediaBreakPoints, (l: TemplateStringsArray, ...p: any[]) => string>)
diff --git a/utils/css/shape.js b/utils/css/shape.ts
similarity index 76%
rename from utils/css/shape.js
rename to utils/css/shape.ts
index d7306a342..c78c203c7 100644
--- a/utils/css/shape.js
+++ b/utils/css/shape.ts
@@ -1,6 +1,6 @@
 import { isString } from '../validator'
 
-export const circle = (width = '30px', displayBlock = true) => {
+export const circle = (width: string | number, displayBlock = true): string => {
   const theWidth = isString(width) ? width : `${width}px`
 
   return displayBlock
@@ -17,7 +17,7 @@ export const circle = (width = '30px', displayBlock = true) => {
 `
 }
 
-export const size = (width = '30px', displayBlock = true) => {
+export const size = (width: string | number, displayBlock = true): string => {
   const theWidth = isString(width) ? width : `${width}px`
 
   return displayBlock
diff --git a/utils/css/zindex.js b/utils/css/zindex.ts
similarity index 100%
rename from utils/css/zindex.js
rename to utils/css/zindex.ts
diff --git a/utils/device.js b/utils/device.ts
similarity index 100%
rename from utils/device.js
rename to utils/device.ts
diff --git a/utils/dom.js b/utils/dom.ts
similarity index 77%
rename from utils/dom.js
rename to utils/dom.ts
index bf9028749..aa475b484 100755
--- a/utils/dom.js
+++ b/utils/dom.ts
@@ -7,16 +7,14 @@ const hasWindow =
 
 /**
  * check is client side or not
- * @returns {Boolean}
  */
-export const isBrowser = () => hasDocument && hasWindow
+export const isBrowser = (): boolean => hasDocument && hasWindow
 const getDocument = () => (isBrowser() ? document : null)
 
 /**
  * scroll to page top
- * @return {void}
  */
-export const scrollToTop = () => {
+export const scrollToTop = (): void => {
   scrollIntoEle(ANCHOR.GLOBAL_HEADER_ID)
 
   // NOTE:  not work with customScroller
@@ -32,12 +30,10 @@ export const scrollToTop = () => {
 /**
  * scroll to page top
  * https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView
- * @param {string} eleID element id
- * @return
  */
-export const scrollIntoEle = (eleID) => {
+export const scrollIntoEle = (eleID: string): void => {
   const safeDocument = getDocument()
-  if (!safeDocument) return false
+  if (!safeDocument) return
 
   const e = safeDocument.getElementById(eleID)
 
@@ -46,14 +42,14 @@ export const scrollIntoEle = (eleID) => {
   }
 }
 
-export const scrollToHeader = () => scrollIntoEle(ANCHOR.GLOBAL_HEADER_ID)
-export const scrollToTabber = () => scrollIntoEle(ANCHOR.GLOBAL_TABBER_ID)
+export const scrollToHeader = (): void => scrollIntoEle(ANCHOR.GLOBAL_HEADER_ID)
+export const scrollToTabber = (): void => scrollIntoEle(ANCHOR.GLOBAL_TABBER_ID)
 
 /**
  * froze page's body element
  * @returns {void}
  */
-export const lockPage = () => {
+export const lockPage = (): void => {
   const safeDocument = getDocument()
 
   if (safeDocument) {
@@ -67,7 +63,7 @@ export const lockPage = () => {
  * unfroze page's body element
  * @returns {void}
  */
-export const unlockPage = () => {
+export const unlockPage = (): void => {
   const safeDocument = getDocument()
 
   if (safeDocument) {
@@ -79,9 +75,8 @@ export const unlockPage = () => {
 
 /**
  * focus on the open doraemon bar
- * @returns {void}
  */
-export const focusDoraemonBar = () => {
+export const focusDoraemonBar = (): void => {
   const safeDocument = getDocument()
 
   if (safeDocument) {
@@ -102,10 +97,8 @@ export const focusDoraemonBar = () => {
 /**
  * onBlur will on focus the whole page, if not use this
  * openDoraemon will not work until you click the page
- *
- * @returns {void}
  */
-export const hideDoraemonBarRecover = () => {
+export const hideDoraemonBarRecover = (): void => {
   const safeDocument = getDocument()
 
   if (safeDocument) {
@@ -119,14 +112,13 @@ export const hideDoraemonBarRecover = () => {
  * @see @link https://stackoverflow.com/questions/52937708/css-filter-on-parent-breaks-child-positioning
  *
  * @param {Boolean} visible
- * @returns {void}
  */
-export const toggleGlobalBlur = (visible) => {
+export const toggleGlobalBlur = (visible: boolean): void => {
   const blurableEls = document.querySelectorAll(`.${ANCHOR.GLOBAL_BLUR_CLASS}`)
 
   if (blurableEls) {
     for (let index = 0; index < blurableEls.length; index += 1) {
-      const el = blurableEls[index]
+      const el = blurableEls[index] as HTMLElement
 
       !visible ? (el.style.filter = '') : (el.style.filter = 'blur(2px)')
     }
@@ -137,12 +129,12 @@ export const toggleGlobalBlur = (visible) => {
  * make global blur more clear, not still blur
  * @returns {void}
  */
-export const clearGlobalBlur = () => {
+export const clearGlobalBlur = (): void => {
   const blurableEls = document.querySelectorAll(`.${ANCHOR.GLOBAL_BLUR_CLASS}`)
 
   if (blurableEls) {
     for (let index = 0; index < blurableEls.length; index += 1) {
-      const el = blurableEls[index]
+      const el = blurableEls[index] as HTMLElement
 
       el.style.filter = 'blur(1px)'
     }
@@ -154,11 +146,8 @@ export const clearGlobalBlur = () => {
  * under the CustomScroller, the trandition inViewport method is not work
  * NOTE:  在 CustomScroller 的情况下，传统的判断 inViewport 的方法行不通
  * 只需简单判断当前 el 的高度和已经滑动的距离即可
- *
- * @param {HTMLElement} el
- * @returns
  */
-export const isElementInViewport = (el) => {
+export const isElementInViewport = (el: HTMLElement): boolean => {
   if (!el) return false
   const rect = el.getBoundingClientRect()
 
@@ -169,14 +158,10 @@ export const isElementInViewport = (el) => {
 /**
  * add pixed by number
  *
- * example:
+ * e.g:
  * pixelAdd('20px', 10) => 30px
- *
- * @param {String} current
- * @param {Number} num
- * @returns {String}
  */
-export const pixelAdd = (current, num) => {
+export const pixelAdd = (current: string, num: number): string => {
   const pixelNum = Number(current.slice(0, -2))
 
   return `${pixelNum + num}px`
@@ -185,12 +170,11 @@ export const pixelAdd = (current, num) => {
 /**
  * check if child is descendant of the parent node
  * @see @link https://stackoverflow.com/questions/2234979/how-to-check-in-javascript-if-one-element-is-contained-within-another
- *
- * @param {HTMLElement} parent
- * @param {HTMLElement} child
- * @returns {Boolean}
  */
-export const isDescendant = (parent, child) => {
+export const isDescendant = (
+  parent: HTMLElement,
+  child: HTMLElement,
+): boolean => {
   let node = child.parentNode
   while (node != null) {
     if (node === parent) {
diff --git a/utils/helper.js b/utils/helper.ts
similarity index 72%
rename from utils/helper.js
rename to utils/helper.ts
index fe91338a8..7fedfd3ae 100755
--- a/utils/helper.js
+++ b/utils/helper.ts
@@ -8,6 +8,11 @@ import { EVENT } from '@/constant'
 import { scrollToHeader } from './dom'
 import { isString } from './validator'
 
+type TSORTABLE_ITEMS = {
+  color: string
+  index?: number
+}[]
+
 /* eslint-disable */
 // TODO: document ?
 export const Global = typeof window !== 'undefined' ? window : global
@@ -29,7 +34,10 @@ export const mapKeys = curry((fn, obj) => {
   )
 })
 
-export const sortByColor = (source) =>
+/**
+ * sort the array by it's color
+ */
+export const sortByColor = (source: TSORTABLE_ITEMS): TSORTABLE_ITEMS =>
   sort(
     (t1, t2) => TAG_COLOR_ORDER[t1.color] - TAG_COLOR_ORDER[t2.color],
     source,
@@ -37,11 +45,9 @@ export const sortByColor = (source) =>
 
 /**
  * sort the array by it's index
- *
- * @param {[any]} source - any array contains item with index
- * @returns {[any]}
  */
-export const sortByIndex = (source) => sort((a, b) => a.index - b.index, source)
+export const sortByIndex = (source: TSORTABLE_ITEMS): TSORTABLE_ITEMS =>
+  sort((a, b) => a.index - b.index, source)
 
 /* eslint-disable */
 const log = (...args) => (data) => {
@@ -59,13 +65,22 @@ export const Rlog = (arg = 'Rlog: ') => tap(log(arg))
  * @param {*string} str 需要进行处理的字符串，可含汉字
  * @param {*number} len 需要显示多少个汉字，两个英文字母相当于一个汉字
  */
-export const cutFrom = (str, len = 20) => {
+export const cutFrom = (str: string, len = 20): string => {
   if (!str || !isString(str)) return '??...'
   return len >= length(str) ? str : `${limit(str, len, '')}...`
 }
 
-// https://stackoverflow.com/questions/9461621/how-to-format-a-number-as-2-5k-if-a-thousand-or-more-otherwise-900-in-javascrip
-export const prettyNum = (num, digits = 1) => {
+/**
+ * prettyNum with human format
+ * @see @link https://stackoverflow.com/questions/9461621/how-to-format-a-number-as-2-5k-if-a-thousand-or-more-otherwise-900-in-javascrip
+ * e.g:
+ * console.log(prettyNum(1200)) // => 1.2k
+ *
+ * @param {number} num
+ * @param {number} [digits=1]
+ * @returns {string}
+ */
+export const prettyNum = (num: number, digits = 1): string => {
   const si = [
     { value: 1, symbol: '' },
     { value: 1e3, symbol: 'k' },
@@ -92,24 +107,31 @@ export const prettyNum = (num, digits = 1) => {
   /* eslint-enable  */
 }
 
-// https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
-export const numberWithCommas = (x) =>
+/**
+ * number with commas foramt
+ * @see @link https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
+ *
+ * @param {*} x
+ */
+export const numberWithCommas = (x: number): string =>
   x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 
-// from https://stackoverflow.com/questions/20396456/how-to-do-word-counts-for-a-mixture-of-english-and-chinese-in-javascript
-// count both chinese-word and english-words
-export const countWords = (str) => {
+/**
+ * count both chinese-word and english-words
+ * @see @link https://stackoverflow.com/questions/20396456/how-to-do-word-counts-for-a-mixture-of-english-and-chinese-in-javascript
+ *
+ * @param {string} str
+ * @returns {number}
+ */
+export const countWords = (str: string): number => {
   const matches = str.match(/[\u00ff-\uffff]|\S+/g)
   return matches ? matches.length : 0
 }
 
 /**
  * publish event message, 'send' inspired by Elixir
- *
- * @param {string} msg
- * @param {object} [data={}]
  */
-export const send = (msg, data = {}) => {
+export const send = (msg: string, data = {}): void => {
   // TODO: check the msg is valid
   // PubSub.publishSync(msg, data)
   PubSub.publish(msg, data)
@@ -118,25 +140,28 @@ export const send = (msg, data = {}) => {
 /**
  * shortcut for close Drawer
  *
- * @param {string} [type='']
  */
-export const closeDrawer = (type = '') => send(EVENT.DRAWER.CLOSE, { type })
+export const closeDrawer = (type = ''): void =>
+  send(EVENT.DRAWER.CLOSE, { type })
 
 /**
  * hepler for call the JoinModal Container to show wechatQRCode or mail scriscribe list etc ..
  *
- * @param {string} type
- * @param {string} data
  */
-export const joinUS = (type, data) => send(EVENT.JOIN_US, { type, data })
+export const joinUS = (type: string, data = {}): void =>
+  send(EVENT.JOIN_US, { type, data })
 
-export const errRescue = ({ type, operation, details, path }) =>
+export const errRescue = ({ type, operation, details, path }): void =>
   send(EVENT.ERR_RESCUE, { type, data: { operation, details, path } })
 
 // errRescue({type: ERR.GRAPHQL, operation: operationName, details: graphQLErrors})
 
 /* eslint-disable */
-export const debounce = (func, wait, immediate) => {
+export const debounce = (
+  func: Function,
+  wait: number,
+  immediate: boolean,
+): (() => void) => {
   let timeout
   return function () {
     const context = this
@@ -153,10 +178,13 @@ export const debounce = (func, wait, immediate) => {
 }
 /* eslint-enable */
 
-export const extractMentions = (text) => {
+/**
+ * extract mention format from markdown str into list
+ */
+export const extractMentions = (str: string): string[] => {
   const mentionsRegex = new RegExp('@([a-zA-Z0-9_.-]+)', 'gim')
 
-  let matches = text.match(mentionsRegex)
+  let matches = str.match(mentionsRegex)
   if (matches?.length) {
     matches = matches.map((match) => {
       return match.slice(1)
@@ -166,8 +194,11 @@ export const extractMentions = (text) => {
   return []
 }
 
-// https://blogs.sap.com/2017/07/15/use-regular-expression-to-parse-the-image-reference-in-the-markdown-sourcre-code/
-export const extractAttachments = (str) => {
+/**
+ * extract markdown attachments from str
+ * @see @link https://blogs.sap.com/2017/07/15/use-regular-expression-to-parse-the-image-reference-in-the-markdown-sourcre-code/
+ */
+export const extractAttachments = (str: string): string[] => {
   let m
   const regex = /!\[(.*?)\]\((.*?)\)/g
 
@@ -184,7 +215,8 @@ export const extractAttachments = (str) => {
 }
 
 // checkout if the site is running on cypress container
-export const isCypressRunning = () => {
+export const isCypressRunning = (): boolean => {
+  // @ts-ignore
   if (typeof window !== 'undefined') return !!window.Cypress
 
   return false
@@ -204,10 +236,10 @@ export const isCypressRunning = () => {
  * after:  onClick={multiClick(openMenu(TYPE.MM_TYPE.GLOBAL_MENU))}
  */
 export const multiClick = (
-  onClick,
-  onDoubleClick = scrollToHeader,
+  onClick: (HTMLElementEventMap) => void,
+  onDoubleClick: (e: HTMLElementEventMap) => void = scrollToHeader,
   latency = 250,
-) => {
+): ((event: HTMLElementEventMap) => void) => {
   let timeoutID = null
 
   return (event) => {
@@ -232,7 +264,7 @@ export const multiClick = (
  *
  * see: https://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range
  */
-export const getRandomInt = (min, max) => {
+export const getRandomInt = (min: number, max: number): number => {
   min = Math.ceil(min)
   max = Math.floor(max)
   return Math.floor(Math.random() * (max - min + 1)) + min
@@ -282,10 +314,14 @@ export const findDeepMatch = (data, key, value) => {
  * @param {String} - key
  * @returns {Object}
  */
-export const groupByKey = (array, key) => {
+export const groupByKey = (
+  array: Record<string, unknown>[],
+  key: string,
+): Record<string, unknown> => {
   return array.reduce((hash, obj) => {
     if (obj[key] === undefined) return hash
     return Object.assign(hash, {
+      // @ts-ignore
       [obj[key]]: (hash[obj[key]] || []).concat(obj),
     })
   }, {})
diff --git a/utils/index.js b/utils/index.ts
similarity index 90%
rename from utils/index.js
rename to utils/index.ts
index f61470cad..8a73a239d 100755
--- a/utils/index.js
+++ b/utils/index.ts
@@ -1,8 +1,12 @@
+// most of the cycle import error is caused by @/types, which is fine
+// since @/types is used only when TS compiler, will not effect production code
+/* eslint-disable import/no-cycle */
+
 /*
  * utils functiosn
  */
 
-export { default as asyncSuit } from './async'
+export { default as asyncSuit } from './async/index'
 
 export { buildLog } from './logger'
 
diff --git a/utils/mobx.js b/utils/mobx.ts
similarity index 87%
rename from utils/mobx.js
rename to utils/mobx.ts
index d3ce80c50..e4010352a 100755
--- a/utils/mobx.js
+++ b/utils/mobx.ts
@@ -1,3 +1,5 @@
+import { FunctionComponent } from 'react'
+
 import {
   path,
   has,
@@ -17,6 +19,11 @@ import { toJS } from 'mobx'
 
 import { isObject } from './validator'
 
+type IStore = {
+  mark: (obj: Record<string, unknown>) => void
+  updateEditing?: (obj: Record<string, unknown>) => void
+}
+
 /*
  * select sub store from root store
  * by design, one container should only access it's own store
@@ -49,7 +56,10 @@ export const storePlug = curry((selectedStore, props) => ({
  * 注意： 容器组件的命名需遵守 XxxContainer 的约定规则 (以 Container 结尾)
  *
  */
-export const pluggedIn = (container, store) => {
+export const pluggedIn = (
+  container: FunctionComponent,
+  store = '',
+): FunctionComponent => {
   let subStoreName = ''
   // console.log('container displayName: ', container.displayName)
   if (store) {
@@ -113,7 +123,12 @@ export const markStates = (sobj, self) => {
   return false
 }
 
-export const flashState = (store, state, value, secs = 5) => {
+export const flashState = (
+  store: IStore,
+  state: string,
+  value: string,
+  secs = 5,
+): void => {
   store.mark({ [state]: value })
   setTimeout(() => {
     store.mark({ [state]: '' })
@@ -124,12 +139,17 @@ export const flashState = (store, state, value, secs = 5) => {
    can't put this in store, because this method is async
    only boolean now
  */
-export const meteorState = (store, state, secs, statusMsg = '') => {
+export const meteorState = (
+  store: IStore,
+  state: string,
+  secs: number,
+  statusMsg = '',
+): void => {
   if (!has(state, store)) {
     /* eslint-disable */
     console.error(`Error: meteorState not found ${state}`)
     /* eslint-enable */
-    return false
+    return
   }
 
   store.mark({
@@ -143,10 +163,9 @@ export const meteorState = (store, state, secs, statusMsg = '') => {
       statusMsg: '',
     })
   }, secs * 1000)
-  return false
 }
 
-export const stripMobx = (obj) => {
+export const stripMobx = (obj: any): any => {
   if (!obj) return obj
   return toJS(obj)
 }
@@ -157,16 +176,22 @@ export const stripMobx = (obj) => {
  * NOTE: this method require store has a updateEditing under the hook to do the real update
  *
  */
-export const updateEditing = (store, part, e) => {
-  if (!store) return false
+export const updateEditing = (
+  store: IStore,
+  part: string,
+  e: HTMLElement,
+): void => {
+  if (!store) return
   if (!store.updateEditing) {
     // eslint-disable-next-line no-console
     return console.warn('Error: updateEditing not found in store: ', store)
   }
 
-  let value = e
+  let value = e as HTMLElement
+  // @ts-ignore
   if (isObject(e) && has('target', e)) {
     /* eslint-disable prefer-destructuring */
+    // @ts-ignore
     value = e.target.value
     /* eslint-enable prefer-destructuring */
   }
diff --git a/utils/scripts/generators/component/stateless.js.hbs b/utils/scripts/generators/component/stateless.js.hbs
index eeb0124be..3786c2884 100755
--- a/utils/scripts/generators/component/stateless.js.hbs
+++ b/utils/scripts/generators/component/stateless.js.hbs
@@ -19,13 +19,13 @@ import { Wrapper } from './styles'
 /* eslint-disable-next-line */
 const log = buildLog('c:{{ properCase name }}:index')
 
-const {{ properCase name }} = ({{preCurly ""}} testId {{afterCurly ""}}) => {
+const {{ properCase name }} = ({{preCurly ""}} testid {{afterCurly ""}}) => {
   {{#if wantI18n}}
   const { t } = useTrans()
   {{/if}}
   return (
     {{#if wantStyle}}
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       {{/if}}
       <div>
         <h2>{{ properCase name }} component</h2>
@@ -38,11 +38,11 @@ const {{ properCase name }} = ({{preCurly ""}} testId {{afterCurly ""}}) => {
 }
 
 {{ properCase name }}.propTypes = {
-  testId: T.string,
+  testid: T.string,
 }
 
 {{ properCase name }}.defaultProps = {
-  testId: '{{ dashCase name}}',
+  testid: '{{ dashCase name}}',
 }
 
 export default React.memo({{ properCase name }})
diff --git a/utils/scripts/generators/component/styles.js.hbs b/utils/scripts/generators/component/styles.js.hbs
index e9556cc81..55780bd54 100755
--- a/utils/scripts/generators/component/styles.js.hbs
+++ b/utils/scripts/generators/component/styles.js.hbs
@@ -4,6 +4,6 @@ import styled from 'styled-components'
 // import { theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(props => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))``
 export const Title = styled.div``
diff --git a/utils/scripts/generators/container/hooks.js.hbs b/utils/scripts/generators/container/hooks.tsx.hbs
similarity index 59%
rename from utils/scripts/generators/container/hooks.js.hbs
rename to utils/scripts/generators/container/hooks.tsx.hbs
index 00528187e..c9d220c71 100755
--- a/utils/scripts/generators/container/hooks.js.hbs
+++ b/utils/scripts/generators/container/hooks.tsx.hbs
@@ -7,40 +7,46 @@
  */
 
 import React from 'react'
-import T from 'prop-types'
 
 import { pluggedIn, buildLog } from '@/utils'
 {{#if wantI18n}}
 import { useTrans } from '@/hooks'
 {{/if}}
 
+import { IStore } from './store'
+
 import { Wrapper } from './styles'
 import { useInit } from './logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:{{ properCase name }}')
 
-const {{ properCase name }}Container = ({{preCurly ""}} {{ camelCase name}}: store, testId {{afterCurly ""}}) => {
+interface IProps {
+  {{ camelCase name }}?: IStore
+  testid: string
+}
+
+const defaultProps: IProps = {
+  testid: '{{ dashCase name}}',
+}
+
+const {{ properCase name }}Container: React.FC<IProps> = ({{preCurly ""}} 
+  {{ camelCase name}}: store, 
+  testid,
+{{afterCurly ""}}) => {
   useInit(store)
   {{#if wantI18n}}
   const { t } = useTrans()
   {{/if}}
 
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       <h2>{{ properCase name }} hooks container!</h2>
       <div>impress me!</div>
     </Wrapper>
   )
 }
 
-{{ properCase name }}Container.propTypes = {
-  {{ camelCase name }}: T.any.isRequired,
-  testId: T.string,
-}
-
-{{ properCase name }}Container.defaultProps = {
-  testId: '{{ dashCase name}}',
-}
+{{ properCase name }}Container.defaultProps = defaultProps
 
 export default pluggedIn({{ properCase name }}Container)
diff --git a/utils/scripts/generators/container/index.js b/utils/scripts/generators/container/index.js
index b16877a18..cacec8212 100755
--- a/utils/scripts/generators/container/index.js
+++ b/utils/scripts/generators/container/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 /**
  * Container Generator
  */
@@ -56,27 +57,27 @@ module.exports = {
     const actions = [
       {
         type: 'add',
-        path: `${TARGET_DIR}/${data.scope}/{{properCase name}}/index.js`,
+        path: `${TARGET_DIR}/${data.scope}/{{properCase name}}/index.tsx`,
         // templateFile: './container/class.js.hbs',
-        templateFile: './container/hooks.js.hbs',
+        templateFile: './container/hooks.tsx.hbs',
         abortOnFail: true,
       },
       {
         type: 'add',
-        path: `${TARGET_DIR}/${data.scope}/{{properCase name}}/logic.js`,
-        templateFile: './container/logic.js.hbs',
+        path: `${TARGET_DIR}/${data.scope}/{{properCase name}}/logic.ts`,
+        templateFile: './container/logic.ts.hbs',
         abortOnFail: true,
       },
       {
         type: 'add',
-        path: `${TARGET_DIR}/${data.scope}/{{properCase name}}/store.js`,
-        templateFile: './container/store.js.hbs',
+        path: `${TARGET_DIR}/${data.scope}/{{properCase name}}/store.ts`,
+        templateFile: './container/store.ts.hbs',
         abortOnFail: true,
       },
       {
         type: 'add',
-        path: `${TARGET_DIR}/${data.scope}/{{properCase name}}/styles/index.js`,
-        templateFile: './container/styles.js.hbs',
+        path: `${TARGET_DIR}/${data.scope}/{{properCase name}}/styles/index.ts`,
+        templateFile: './container/styles.ts.hbs',
         abortOnFail: true,
       },
       {
@@ -93,19 +94,19 @@ module.exports = {
       },
       {
         type: 'append',
-        path: `${STORE_TARGET_DIR}/index.js`,
+        path: `${STORE_TARGET_DIR}/index.ts`,
         pattern: /(\/\/ GEN: EXPORT CONTAINERS STORE HERE)/g,
         template: `export {{preCurly ""}} default as {{ properCase name}}Store {{afterCurly ""}} from '@/containers/${data.scope}/{{properCase name}}/store'`,
       },
       {
         type: 'append',
-        path: `${STORE_TARGET_DIR}/RootStore/index.js`,
+        path: `${STORE_TARGET_DIR}/RootStore/index.ts`,
         pattern: /(\/\/ GEN: IMPORT SUBSTORE)/g,
         template: '  {{properCase name}}Store,',
       },
       {
         type: 'append',
-        path: `${STORE_TARGET_DIR}/RootStore/index.js`,
+        path: `${STORE_TARGET_DIR}/RootStore/index.ts`,
         pattern: /(\/\/ GEN: PLUG SUBSTORE TO ROOTSTORE)/g,
         template:
           '    {{ camelCase name}}: T.optional({{properCase name}}Store, {{preCurly ""}}{{afterCurly ""}}),',
diff --git a/utils/scripts/generators/container/logic.js.hbs b/utils/scripts/generators/container/logic.ts.hbs
similarity index 72%
rename from utils/scripts/generators/container/logic.js.hbs
rename to utils/scripts/generators/container/logic.ts.hbs
index d959955d9..81c3cf234 100755
--- a/utils/scripts/generators/container/logic.js.hbs
+++ b/utils/scripts/generators/container/logic.ts.hbs
@@ -2,20 +2,24 @@ import { useEffect } from 'react'
 // import { } from 'ramda'
 
 import { buildLog } from '@/utils'
+
 // import S from './service'
+import { IStore } from './store'
 
-let store = null
+let store: IStore | undefined
 
 /* eslint-disable-next-line */
 const log = buildLog('L:{{ properCase name }}')
 
-export const someMethod = () => {}
+export const someMethod = (): void => {
+  //
+}
 
 // ###############################
 // init & uninit handlers
 // ###############################
 
-export const useInit = (_store) => {
+export const useInit = (_store: IStore): void => {
   useEffect(() => {
     store = _store
     log('useInit: ', store)
diff --git a/utils/scripts/generators/container/store.js.hbs b/utils/scripts/generators/container/store.js.hbs
deleted file mode 100755
index d1fb7e309..000000000
--- a/utils/scripts/generators/container/store.js.hbs
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
- * {{ properCase name }} 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:{{ properCase name }}')
-
-const {{ properCase name }} = T
-  .model('{{ properCase name }}', {})
-  .views(self => ({
-    get root() {
-      return getParent(self)
-    },
-  }))
-  .actions(self => ({
-    mark(sobj) {
-      markStates(sobj, self)
-    },
-  }))
-
-export default {{ properCase name }}
diff --git a/utils/scripts/generators/container/store.ts.hbs b/utils/scripts/generators/container/store.ts.hbs
new file mode 100755
index 000000000..3d4fc4c1a
--- /dev/null
+++ b/utils/scripts/generators/container/store.ts.hbs
@@ -0,0 +1,31 @@
+/*
+ * {{ properCase name }} store
+ *
+ */
+
+import { types as T, getParent, Instance } from 'mobx-state-tree'
+// import {} from 'ramda'
+
+import { TCommunity, IRootStore } from '@/types'
+import { markStates, buildLog, stripMobx } from '@/utils'
+
+/* eslint-disable-next-line */
+const log = buildLog('S:{{ properCase name }}')
+
+const {{ properCase name }} = T.model('{{ properCase name }}', {})
+  .views((self) => ({
+    get curCommunity(): TCommunity {
+      const root = getParent(self) as IRootStore
+
+      return stripMobx(root.viewing.community)
+    },
+  }))
+  .actions((self) => ({
+    mark(sobj: Record<string, unknown>): void {
+      markStates(sobj, self)
+    },
+  }))
+
+export type IStore = Instance<typeof {{ properCase name }}>
+
+export default {{ properCase name }}
diff --git a/utils/scripts/generators/container/styles.js.hbs b/utils/scripts/generators/container/styles.ts.hbs
similarity index 84%
rename from utils/scripts/generators/container/styles.js.hbs
rename to utils/scripts/generators/container/styles.ts.hbs
index de2949859..0625b50d0 100755
--- a/utils/scripts/generators/container/styles.js.hbs
+++ b/utils/scripts/generators/container/styles.ts.hbs
@@ -3,6 +3,6 @@ import styled from 'styled-components'
 // import { theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(props => ({
-'data-test-id': props.testId,
+'data-test-id': props.testid,
 }))``
 export const Title = styled.div``
\ No newline at end of file
diff --git a/utils/scripts/generators/index.js b/utils/scripts/generators/index.js
index 382996337..5f8166291 100755
--- a/utils/scripts/generators/index.js
+++ b/utils/scripts/generators/index.js
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
 const componentGenerator = require('./component/index.js')
 const containerGenerator = require('./container/index.js')
 const storeGenerator = require('./store/index.js')
diff --git a/utils/scripts/generators/store/index.js b/utils/scripts/generators/store/index.js
index da692f311..aa1488228 100755
--- a/utils/scripts/generators/store/index.js
+++ b/utils/scripts/generators/store/index.js
@@ -6,6 +6,7 @@
 
 'use strict'
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const componentExists = require('../helper/component_exists')
 
 module.exports = {
@@ -32,7 +33,7 @@ module.exports = {
       {
         type: 'add',
         path: '../../../stores/{{properCase name}}/index.js',
-        templateFile: './store/store.js.hbs',
+        templateFile: './store/store.ts.hbs',
         abortOnFail: true,
       },
       {
diff --git a/utils/scripts/generators/store/store.js.hbs b/utils/scripts/generators/store/store.ts.hbs
similarity index 100%
rename from utils/scripts/generators/store/store.js.hbs
rename to utils/scripts/generators/store/store.ts.hbs
diff --git a/utils/social.js b/utils/social.ts
similarity index 100%
rename from utils/social.js
rename to utils/social.ts
diff --git a/utils/themes/index.js b/utils/themes/index.ts
similarity index 91%
rename from utils/themes/index.js
rename to utils/themes/index.ts
index eb269541f..5701ff8f9 100755
--- a/utils/themes/index.js
+++ b/utils/themes/index.ts
@@ -12,6 +12,8 @@
  */
 
 import { map, path, split } from 'ramda'
+
+import { TTheme } from '@/types'
 import skinsData from './skins'
 
 export const themeSkins = { ...skinsData }
@@ -22,7 +24,7 @@ export const themeCoverMap = map(path(['cover']), themeSkins)
 export const themeCoverIndexMap = map(path(['coverIndex']), themeSkins)
 
 // curried shorthand for style-components
-export const theme = (themePath) =>
+export const theme = (themePath: string): TTheme =>
   path(['theme', ...split('.', themePath)]) || 'wheat'
 
 export { default as themeMeta } from './theme_meta'
diff --git a/utils/themes/skins/cyan.js b/utils/themes/skins/cyan.ts
similarity index 100%
rename from utils/themes/skins/cyan.js
rename to utils/themes/skins/cyan.ts
diff --git a/utils/themes/skins/github.js b/utils/themes/skins/github.ts
similarity index 100%
rename from utils/themes/skins/github.js
rename to utils/themes/skins/github.ts
diff --git a/utils/themes/skins/green.js b/utils/themes/skins/green.ts
similarity index 100%
rename from utils/themes/skins/green.js
rename to utils/themes/skins/green.ts
diff --git a/utils/themes/skins/index.js b/utils/themes/skins/index.ts
similarity index 100%
rename from utils/themes/skins/index.js
rename to utils/themes/skins/index.ts
diff --git a/utils/themes/skins/iron_green.js b/utils/themes/skins/iron_green.ts
similarity index 100%
rename from utils/themes/skins/iron_green.js
rename to utils/themes/skins/iron_green.ts
diff --git a/utils/themes/skins/monokai.js b/utils/themes/skins/monokai.ts
similarity index 100%
rename from utils/themes/skins/monokai.js
rename to utils/themes/skins/monokai.ts
diff --git a/utils/themes/skins/purple.js b/utils/themes/skins/purple.ts
similarity index 100%
rename from utils/themes/skins/purple.js
rename to utils/themes/skins/purple.ts
diff --git a/utils/themes/skins/solarized_dark.js b/utils/themes/skins/solarized_dark.ts
similarity index 100%
rename from utils/themes/skins/solarized_dark.js
rename to utils/themes/skins/solarized_dark.ts
diff --git a/utils/themes/skins/yellow.js b/utils/themes/skins/yellow.ts
similarity index 100%
rename from utils/themes/skins/yellow.js
rename to utils/themes/skins/yellow.ts
diff --git a/utils/themes/theme_meta.js b/utils/themes/theme_meta.ts
similarity index 100%
rename from utils/themes/theme_meta.js
rename to utils/themes/theme_meta.ts
diff --git a/utils/uid.js b/utils/uid.ts
similarity index 88%
rename from utils/uid.js
rename to utils/uid.ts
index 16287f92e..e42f75e3f 100755
--- a/utils/uid.js
+++ b/utils/uid.ts
@@ -5,7 +5,7 @@ import { customAlphabet } from 'nanoid'
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6)
 
 const uid = {
-  gen: () => nanoid(),
+  gen: (): string => nanoid(),
 }
 
 export default uid
diff --git a/utils/validator.js b/utils/validator.ts
similarity index 87%
rename from utils/validator.js
rename to utils/validator.ts
index 19ad52a47..a92f14615 100755
--- a/utils/validator.js
+++ b/utils/validator.ts
@@ -23,9 +23,9 @@ export const notEmpty = compose(not, isEmpty)
 export const isEmptyValue = compose(isEmpty, trim)
 export const nilOrEmpty = either(isNil, isEmpty)
 
-export const hasValue = compose(not, nilOrEmpty)
+export const hasValue: (v: any) => boolean = compose(not, nilOrEmpty)
 
-export const isObject = (value) => {
+export const isObject = (value: any): boolean => {
   const type = typeof value
   return value != null && (type === 'object' || type === 'function')
 }
@@ -37,7 +37,7 @@ export const isObject = (value) => {
  * @return {Boolean}
  * @returns
  */
-export const isString = (value) => {
+export const isString = (value: any): boolean => {
   if (typeof value === 'string' || value instanceof String) {
     return true
   }
@@ -58,21 +58,27 @@ const trimIfNeed = (v) => {
 
 const validValues = compose(map(trimIfNeed), pickBy(notNil), reject(isObject))
 
-export const cast = (fields, source) => {
+export const cast = (
+  fields: string[],
+  source: Record<string, unknown>,
+): any => {
   const casted = pick(fields, source)
 
+  // @ts-ignore
   return merge(validValues(casted), validObjects(casted))
 }
 
 const keyOf = compose(head, keys)
 const valueOf = compose(head, values)
 
-export const changeset = (source) => ({
-  exist: (obj, cb, opt = { skip: false }) => {
+export const changeset = (
+  source: Record<string, string>,
+): Record<string, unknown> => ({
+  exist: (obj, cb, opt = { skip: false, msg: '' }) => {
     if (source.__dirty__) return changeset(source)
     if (opt.skip) return changeset(source)
 
-    const field = keyOf(obj)
+    const field: string = keyOf(obj) as string
     const trans = valueOf(obj)
     let isInValid = false
 
@@ -94,7 +100,7 @@ export const changeset = (source) => ({
   min: (obj, num, cb) => {
     if (source.__dirty__) return changeset(source)
 
-    const field = keyOf(obj)
+    const field: string = keyOf(obj) as string
     const trans = valueOf(obj)
 
     if (trim(source[field]).length < num) {
@@ -124,7 +130,7 @@ export const changeset = (source) => ({
   startsWith: (obj, prefix, cb, condition = true) => {
     if (source.__dirty__ || !condition) return changeset(source)
 
-    const field = keyOf(obj)
+    const field = keyOf(obj) as string
     const trans = valueOf(obj)
 
     if (!hasValue(source[field]) || !startsWith(prefix, trim(source[field]))) {
@@ -138,7 +144,7 @@ export const changeset = (source) => ({
   },
   durationFmt: (obj, cb) => {
     if (source.__dirty__) return changeset(source)
-    const field = keyOf(obj)
+    const field = keyOf(obj) as string
     const trans = valueOf(obj)
 
     const shortFmt = /^([01]?[0-9]|[0-5][0-9]):[0-5][0-9]$/
@@ -159,7 +165,7 @@ export const changeset = (source) => ({
     if (source.__dirty__) return changeset(source)
     if (opt.skip) return changeset(source)
 
-    const field = keyOf(obj)
+    const field: string = keyOf(obj) as string
     const trans = valueOf(obj)
 
     const regex = /[0-9]{4}[/][0-9][0-9][/][0-3][0-9]$/
diff --git a/yarn.lock b/yarn.lock
index 6d06163f8..fdf829f7c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2143,6 +2143,10 @@
   version "2.2.6"
   resolved "https://registry.npm.taobao.org/@types/js-cookie/download/@types/js-cookie-2.2.6.tgz#f1a1cb35aff47bc5cfb05cb0c441ca91e914c26f"
 
+"@types/json-schema@^7.0.3":
+  version "7.0.7"
+  resolved "https://registry.npm.taobao.org/@types/json-schema/download/@types/json-schema-7.0.7.tgz?cache=0&sync_timestamp=1613378919536&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fjson-schema%2Fdownload%2F%40types%2Fjson-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
+
 "@types/json-schema@^7.0.4":
   version "7.0.4"
   resolved "https://registry.npm.taobao.org/@types/json-schema/download/@types/json-schema-7.0.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fjson-schema%2Fdownload%2F%40types%2Fjson-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339"
@@ -2194,6 +2198,12 @@
   version "15.7.3"
   resolved "https://registry.npm.taobao.org/@types/prop-types/download/@types/prop-types-15.7.3.tgz?cache=0&sync_timestamp=1588201821986&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fprop-types%2Fdownload%2F%40types%2Fprop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
 
+"@types/ramda@^0.27.38":
+  version "0.27.38"
+  resolved "https://registry.npm.taobao.org/@types/ramda/download/@types/ramda-0.27.38.tgz#797d5cdc9e00482e665dfea28142bb6c3c5f11e7"
+  dependencies:
+    ts-toolbelt "^6.15.1"
+
 "@types/react-transition-group@^2.0.8":
   version "2.9.2"
   resolved "https://registry.npm.taobao.org/@types/react-transition-group/download/@types/react-transition-group-2.9.2.tgz?cache=0&sync_timestamp=1590088384339&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Freact-transition-group%2Fdownload%2F%40types%2Freact-transition-group-2.9.2.tgz#c48cf2a11977c8b4ff539a1c91d259eaa627028d"
@@ -2239,6 +2249,69 @@
   version "0.8.0"
   resolved "https://registry.npm.taobao.org/@types/zen-observable/download/@types/zen-observable-0.8.0.tgz?cache=0&sync_timestamp=1588203762000&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fzen-observable%2Fdownload%2F%40types%2Fzen-observable-0.8.0.tgz#8b63ab7f1aa5321248aad5ac890a485656dcea4d"
 
+"@typescript-eslint/eslint-plugin@^4.17.0":
+  version "4.17.0"
+  resolved "https://registry.npm.taobao.org/@typescript-eslint/eslint-plugin/download/@typescript-eslint/eslint-plugin-4.17.0.tgz#6f856eca4e6a52ce9cf127dfd349096ad936aa2d"
+  dependencies:
+    "@typescript-eslint/experimental-utils" "4.17.0"
+    "@typescript-eslint/scope-manager" "4.17.0"
+    debug "^4.1.1"
+    functional-red-black-tree "^1.0.1"
+    lodash "^4.17.15"
+    regexpp "^3.0.0"
+    semver "^7.3.2"
+    tsutils "^3.17.1"
+
+"@typescript-eslint/experimental-utils@4.17.0":
+  version "4.17.0"
+  resolved "https://registry.npm.taobao.org/@typescript-eslint/experimental-utils/download/@typescript-eslint/experimental-utils-4.17.0.tgz#762c44aaa1a6a3c05b6d63a8648fb89b89f84c80"
+  dependencies:
+    "@types/json-schema" "^7.0.3"
+    "@typescript-eslint/scope-manager" "4.17.0"
+    "@typescript-eslint/types" "4.17.0"
+    "@typescript-eslint/typescript-estree" "4.17.0"
+    eslint-scope "^5.0.0"
+    eslint-utils "^2.0.0"
+
+"@typescript-eslint/parser@^4.17.0":
+  version "4.17.0"
+  resolved "https://registry.npm.taobao.org/@typescript-eslint/parser/download/@typescript-eslint/parser-4.17.0.tgz?cache=0&sync_timestamp=1615228899130&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Fparser%2Fdownload%2F%40typescript-eslint%2Fparser-4.17.0.tgz#141b647ffc72ebebcbf9b0fe6087f65b706d3215"
+  dependencies:
+    "@typescript-eslint/scope-manager" "4.17.0"
+    "@typescript-eslint/types" "4.17.0"
+    "@typescript-eslint/typescript-estree" "4.17.0"
+    debug "^4.1.1"
+
+"@typescript-eslint/scope-manager@4.17.0":
+  version "4.17.0"
+  resolved "https://registry.npm.taobao.org/@typescript-eslint/scope-manager/download/@typescript-eslint/scope-manager-4.17.0.tgz#f4edf94eff3b52a863180f7f89581bf963e3d37d"
+  dependencies:
+    "@typescript-eslint/types" "4.17.0"
+    "@typescript-eslint/visitor-keys" "4.17.0"
+
+"@typescript-eslint/types@4.17.0":
+  version "4.17.0"
+  resolved "https://registry.npm.taobao.org/@typescript-eslint/types/download/@typescript-eslint/types-4.17.0.tgz#f57d8fc7f31b348db946498a43050083d25f40ad"
+
+"@typescript-eslint/typescript-estree@4.17.0":
+  version "4.17.0"
+  resolved "https://registry.npm.taobao.org/@typescript-eslint/typescript-estree/download/@typescript-eslint/typescript-estree-4.17.0.tgz#b835d152804f0972b80dbda92477f9070a72ded1"
+  dependencies:
+    "@typescript-eslint/types" "4.17.0"
+    "@typescript-eslint/visitor-keys" "4.17.0"
+    debug "^4.1.1"
+    globby "^11.0.1"
+    is-glob "^4.0.1"
+    semver "^7.3.2"
+    tsutils "^3.17.1"
+
+"@typescript-eslint/visitor-keys@4.17.0":
+  version "4.17.0"
+  resolved "https://registry.npm.taobao.org/@typescript-eslint/visitor-keys/download/@typescript-eslint/visitor-keys-4.17.0.tgz#9c304cfd20287c14a31d573195a709111849b14d"
+  dependencies:
+    "@typescript-eslint/types" "4.17.0"
+    eslint-visitor-keys "^2.0.0"
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.npm.taobao.org/@webassemblyjs/ast/download/@webassemblyjs/ast-1.9.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40webassemblyjs%2Fast%2Fdownload%2F%40webassemblyjs%2Fast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -5593,10 +5666,20 @@ eslint-utils@^1.4.2:
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
+eslint-utils@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npm.taobao.org/eslint-utils/download/eslint-utils-2.1.0.tgz?cache=0&sync_timestamp=1592843197443&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feslint-utils%2Fdownload%2Feslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
 eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npm.taobao.org/eslint-visitor-keys/download/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
 
+eslint-visitor-keys@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npm.taobao.org/eslint-visitor-keys/download/eslint-visitor-keys-2.0.0.tgz?cache=0&sync_timestamp=1597435362955&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feslint-visitor-keys%2Fdownload%2Feslint-visitor-keys-2.0.0.tgz#21fdc8fbcd9c795cc0321f0563702095751511a8"
+
 eslint@6.4.0:
   version "6.4.0"
   resolved "https://registry.npm.taobao.org/eslint/download/eslint-6.4.0.tgz?cache=0&sync_timestamp=1590197198062&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feslint%2Fdownload%2Feslint-6.4.0.tgz#5aa9227c3fbe921982b2eda94ba0d7fae858611a"
@@ -5953,6 +6036,17 @@ fast-glob@^3.0.3:
     micromatch "^4.0.2"
     picomatch "^2.2.1"
 
+fast-glob@^3.1.1:
+  version "3.2.5"
+  resolved "https://registry.npm.taobao.org/fast-glob/download/fast-glob-3.2.5.tgz?cache=0&sync_timestamp=1610876645039&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffast-glob%2Fdownload%2Ffast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661"
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.0"
+    merge2 "^1.3.0"
+    micromatch "^4.0.2"
+    picomatch "^2.2.1"
+
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.npm.taobao.org/fast-json-stable-stringify/download/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -6603,6 +6697,17 @@ globby@^10.0.1:
     merge2 "^1.2.3"
     slash "^3.0.0"
 
+globby@^11.0.1:
+  version "11.0.2"
+  resolved "https://registry.npm.taobao.org/globby/download/globby-11.0.2.tgz#1af538b766a3b540ebfb58a32b2e2d5897321d83"
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.1.1"
+    ignore "^5.1.4"
+    merge2 "^1.3.0"
+    slash "^3.0.0"
+
 globby@^7.1.1:
   version "7.1.1"
   resolved "https://registry.npm.taobao.org/globby/download/globby-7.1.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fglobby%2Fdownload%2Fglobby-7.1.1.tgz#fb2ccff9401f8600945dfada97440cca972b8680"
@@ -6985,7 +7090,7 @@ ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.npm.taobao.org/ignore/download/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
 
-ignore@^5.1.1:
+ignore@^5.1.1, ignore@^5.1.4:
   version "5.1.8"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
 
@@ -10838,6 +10943,10 @@ regexpp@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npm.taobao.org/regexpp/download/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
 
+regexpp@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npm.taobao.org/regexpp/download/regexpp-3.1.0.tgz?cache=0&sync_timestamp=1592843197777&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregexpp%2Fdownload%2Fregexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
+
 regexpu-core@^4.7.0:
   version "4.7.0"
   resolved "https://registry.npm.taobao.org/regexpu-core/download/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
@@ -12408,14 +12517,28 @@ ts-pnp@^1.1.6:
   version "1.2.0"
   resolved "https://registry.npm.taobao.org/ts-pnp/download/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
 
+ts-toolbelt@^6.15.1:
+  version "6.15.5"
+  resolved "https://registry.npm.taobao.org/ts-toolbelt/download/ts-toolbelt-6.15.5.tgz?cache=0&sync_timestamp=1615048666537&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fts-toolbelt%2Fdownload%2Fts-toolbelt-6.15.5.tgz#cb3b43ed725cb63644782c64fbcad7d8f28c0a83"
+
 tslib@^1.10.0, tslib@^1.9.0, tslib@^1.9.3:
   version "1.13.0"
   resolved "https://registry.npm.taobao.org/tslib/download/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
 
+tslib@^1.8.1:
+  version "1.14.1"
+  resolved "https://registry.npm.taobao.org/tslib/download/tslib-1.14.1.tgz?cache=0&sync_timestamp=1609887785854&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftslib%2Fdownload%2Ftslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+
 tslib@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npm.taobao.org/tslib/download/tslib-2.0.0.tgz#18d13fc2dce04051e20f074cc8387fd8089ce4f3"
 
+tsutils@^3.17.1:
+  version "3.21.0"
+  resolved "https://registry.npm.taobao.org/tsutils/download/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
+  dependencies:
+    tslib "^1.8.1"
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.npm.taobao.org/tty-browserify/download/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
@@ -12485,6 +12608,10 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.npm.taobao.org/typedarray/download/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+typescript@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.npm.taobao.org/typescript/download/typescript-4.2.3.tgz#39062d8019912d43726298f09493d598048c1ce3"
+
 ua-parser-js@^0.7.18:
   version "0.7.21"
   resolved "https://registry.npm.taobao.org/ua-parser-js/download/ua-parser-js-0.7.21.tgz#853cf9ce93f642f67174273cc34565ae6f308777"