diff --git a/.eslintignore b/.eslintignore
index 0290b8510e..2faa058d8c 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -4,9 +4,13 @@ components/**/*.jsx
 !components/*/demo/*
 !.*.js
 # Docs templates
+site/theme/template/Color/ColorPicker.jsx
 site/theme/template/IconDisplay/*.js
 site/theme/template/IconDisplay/*.jsx
+site/theme/template/IconDisplay/fields.js
 site/theme/template/Home/**/*.jsx
+site/theme/template/utils.jsx
+site/theme/template/Layout/Footer.jsx
 typings
 es/**/*
 lib/**/*
diff --git a/.gitignore b/.gitignore
index d9c5d644af..0c3223915d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,9 +41,10 @@ components/**/*.jsx
 *.tmp
 
 # Docs templates
+site/theme/template/Color/ColorPicker.jsx
 site/theme/template/IconDisplay/*.js
 site/theme/template/IconDisplay/*.jsx
 site/theme/template/IconDisplay/fields.js
-
 site/theme/template/Home/**/*.jsx
-
+site/theme/template/utils.jsx
+site/theme/template/Layout/Footer.jsx
diff --git a/package.json b/package.json
index d2fd05b5b9..f8f6888f37 100644
--- a/package.json
+++ b/package.json
@@ -152,6 +152,7 @@
     "@types/prop-types": "^15.7.1",
     "@types/raf": "^3.4.0",
     "@types/react": "^16.9.0",
+    "@types/react-color": "^3.0.1",
     "@types/react-dom": "^16.8.4",
     "@types/shallowequal": "^1.1.1",
     "@types/warning": "^3.0.0",
@@ -191,7 +192,7 @@
     "full-icu": "^1.3.0",
     "glob": "^7.1.4",
     "http-server": "^0.12.0",
-    "husky": "^4.0.1",
+    "husky": "^4.0.3",
     "ignore-emit-webpack-plugin": "^2.0.2",
     "immutability-helper": "^3.0.0",
     "intersection-observer": "^0.7.0",
diff --git a/scripts/print-changelog.js b/scripts/print-changelog.js
index 486cd44e4c..3f8cc0104d 100644
--- a/scripts/print-changelog.js
+++ b/scripts/print-changelog.js
@@ -1,4 +1,5 @@
 /* eslint-disable no-await-in-loop */
+/* eslint-disable no-console */
 const chalk = require('chalk');
 const jsdom = require('jsdom');
 const jQuery = require('jquery');
diff --git a/site/theme/template/Color/ColorPicker.jsx b/site/theme/template/Color/ColorPicker.tsx
similarity index 73%
rename from site/theme/template/Color/ColorPicker.jsx
rename to site/theme/template/Color/ColorPicker.tsx
index fbbb9192ea..eee02322a7 100644
--- a/site/theme/template/Color/ColorPicker.jsx
+++ b/site/theme/template/Color/ColorPicker.tsx
@@ -1,21 +1,25 @@
 import React, { Component } from 'react';
-import { ChromePicker, SketchPicker } from 'react-color';
+import { SketchPicker } from 'react-color';
 
 const noop = () => {};
 
-const pickers = {
-  chrome: ChromePicker,
-  sketch: SketchPicker,
-};
+interface ColorPickerProps {
+  color?: string;
+  small: boolean;
+  position: string;
+  presetColors?: string[];
+  onChange: (hex: string, color: { hex: string }) => void;
+  onChangeComplete: (hex: string) => void;
+}
 
-export default class ColorPicker extends Component {
+export default class ColorPicker extends Component<ColorPickerProps> {
   static defaultProps = {
     onChange: noop,
     onChangeComplete: noop,
     position: 'bottom',
   };
 
-  static getDerivedStateFromProps(props) {
+  static getDerivedStateFromProps(props: ColorPickerProps) {
     if ('color' in props) {
       return {
         color: props.color,
@@ -26,6 +30,7 @@ export default class ColorPicker extends Component {
 
   state = {
     displayColorPicker: false,
+    color: undefined,
   };
 
   handleClick = () => {
@@ -37,29 +42,28 @@ export default class ColorPicker extends Component {
     this.setState({ displayColorPicker: false });
   };
 
-  handleChange = color => {
+  handleChange = (color: { hex: string }) => {
     const { onChange } = this.props;
     this.setState({ color: color.hex });
     onChange(color.hex, color);
   };
 
-  handleChangeComplete = color => {
+  handleChangeComplete = (color: { hex: string }) => {
     const { onChangeComplete } = this.props;
     this.setState({ color: color.hex });
     onChangeComplete(color.hex);
   };
 
   render() {
-    const { small, type, position } = this.props;
+    const { small, position, presetColors } = this.props;
     const { color, displayColorPicker } = this.state;
-    const Picker = pickers[type];
     const styles = {
       color: {
         width: small ? '80px' : '120px',
         height: small ? '16px' : '24px',
         borderRadius: '2px',
         background: color,
-      },
+      } as React.CSSProperties,
       swatch: {
         padding: '4px',
         background: '#fff',
@@ -67,22 +71,22 @@ export default class ColorPicker extends Component {
         boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
         display: 'inline-block',
         cursor: 'pointer',
-      },
+      } as React.CSSProperties,
       popover: {
         position: 'absolute',
-        zIndex: '2',
-      },
+        zIndex: 2,
+      } as React.CSSProperties,
       cover: {
         position: 'fixed',
         top: '0px',
         right: '0px',
         bottom: '0px',
         left: '0px',
-      },
+      } as React.CSSProperties,
       wrapper: {
         position: 'inherit',
-        zIndex: '100',
-      },
+        zIndex: 100,
+      } as React.CSSProperties,
     };
 
     if (position === 'top') {
@@ -99,8 +103,8 @@ export default class ColorPicker extends Component {
       <div style={styles.popover}>
         <div style={styles.cover} onClick={this.handleClose} />
         <div style={styles.wrapper}>
-          <Picker
-            {...this.props}
+          <SketchPicker
+            presetColors={presetColors}
             color={color}
             onChange={this.handleChange}
             onChangeComplete={this.handleChangeComplete}
diff --git a/site/theme/template/Layout/Footer.d.ts b/site/theme/template/Layout/Footer.d.ts
deleted file mode 100644
index 02134c050d..0000000000
--- a/site/theme/template/Layout/Footer.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import * as React from 'react';
-
-declare function Footer(): JSX.Element;
-export default Footer;
diff --git a/site/theme/template/Layout/Footer.jsx b/site/theme/template/Layout/Footer.tsx
similarity index 97%
rename from site/theme/template/Layout/Footer.jsx
rename to site/theme/template/Layout/Footer.tsx
index 146bff1142..13c2a7d11a 100644
--- a/site/theme/template/Layout/Footer.jsx
+++ b/site/theme/template/Layout/Footer.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedMessage, injectIntl, WrappedComponentProps } from 'react-intl';
 import { Modal, message } from 'antd';
 import { Link } from 'bisheng/router';
 import RcFooter from 'rc-footer';
@@ -22,7 +22,7 @@ import {
 import { isLocalStorageNameSupported, loadScript, getLocalizedPathname } from '../utils';
 import ColorPicker from '../Color/ColorPicker';
 
-class Footer extends React.Component {
+class Footer extends React.Component<WrappedComponentProps> {
   lessLoaded = false;
 
   state = {
@@ -47,7 +47,7 @@ class Footer extends React.Component {
   }
 
   getColumns() {
-    const { intl = {} } = this.props;
+    const { intl } = this.props;
     const isZhCN = intl.locale === 'zh-CN';
     return [
       {
@@ -330,13 +330,13 @@ class Footer extends React.Component {
     ];
   }
 
-  handleColorChange = color => {
+  handleColorChange = (color: string) => {
     const changeColor = () => {
       const {
         intl: { messages },
       } = this.props;
       const hide = message.loading(messages['app.footer.primary-color-changing']);
-      window.less
+      (window as any).less
         .modifyVars({
           '@primary-color': color,
         })
@@ -352,7 +352,7 @@ class Footer extends React.Component {
     if (this.lessLoaded) {
       changeColor();
     } else {
-      window.less = {
+      (window as any).less = {
         async: true,
         javascriptEnabled: true,
       };
@@ -401,7 +401,6 @@ class Footer extends React.Component {
     const colors = Object.keys(presetPalettes).filter(item => item !== 'grey');
     return (
       <ColorPicker
-        type="sketch"
         small
         color={color}
         position="top"
diff --git a/site/theme/template/utils.d.ts b/site/theme/template/utils.d.ts
deleted file mode 100644
index 876b1cefd3..0000000000
--- a/site/theme/template/utils.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export = Util;
-export as namespace Util;
-
-declare namespace Util {
-  function getMenuItems(...args: any[]): string;
-  function isZhCN(pathname: string): boolean;
-  function getLocalizedPathname(path: string, isChinese: boolean): string;
-  function ping(callback: Function): string;
-  function isLocalStorageNameSupported(): boolean;
-  function loadScript(src: string): void;
-  function getMetaDescription(jml: any): any;
-}
diff --git a/site/theme/template/utils.jsx b/site/theme/template/utils.tsx
similarity index 78%
rename from site/theme/template/utils.jsx
rename to site/theme/template/utils.tsx
index 33240f433d..6d51f2071b 100644
--- a/site/theme/template/utils.jsx
+++ b/site/theme/template/utils.tsx
@@ -1,11 +1,28 @@
 import flattenDeep from 'lodash/flattenDeep';
 import flatten from 'lodash/flatten';
 
-export function getMenuItems(moduleData, locale, categoryOrder, typeOrder) {
+interface Meta {
+  skip?: boolean;
+  category?: any;
+  type?: any;
+  title?: any;
+  order?: number;
+  children?: Meta[];
+}
+
+interface ModuleDataItem {
+  meta: Meta;
+}
+
+interface Orders {
+  [key: string]: number;
+}
+
+export function getMenuItems(moduleData: ModuleDataItem[], locale: string, categoryOrder: Orders, typeOrder: Orders) {
   const menuMeta = moduleData.map(item => item.meta).filter(meta => !meta.skip);
 
-  const menuItems = [];
-  const sortFn = (a, b) => (a.order || 0) - (b.order || 0);
+  const menuItems: Meta[] = [];
+  const sortFn = (a: Meta, b: Meta) => (a.order || 0) - (b.order || 0);
   menuMeta.sort(sortFn).forEach(meta => {
     // Format
     if (meta.category) {
@@ -35,6 +52,7 @@ export function getMenuItems(moduleData, locale, categoryOrder, typeOrder) {
         };
         menuItems.push(type);
       }
+      type.children = type.children || [];
       type.children.push(meta);
       return;
     }
@@ -51,6 +69,8 @@ export function getMenuItems(moduleData, locale, categoryOrder, typeOrder) {
       menuItems.push(group);
     }
 
+    group.children = group.children || [];
+
     if (meta.type) {
       let type = group.children.filter(i => i.title === meta.type)[0];
       if (!type) {
@@ -62,13 +82,14 @@ export function getMenuItems(moduleData, locale, categoryOrder, typeOrder) {
         };
         group.children.push(type);
       }
+      type.children = type.children || [];
       type.children.push(meta);
     } else {
       group.children.push(meta);
     }
   });
 
-  function nestSort(list) {
+  function nestSort(list: Meta[]): Meta[] {
     return list.sort(sortFn).map(item => {
       if (item.children) {
         return {
@@ -84,11 +105,11 @@ export function getMenuItems(moduleData, locale, categoryOrder, typeOrder) {
   return nestSort(menuItems);
 }
 
-export function isZhCN(pathname) {
+export function isZhCN(pathname: string) {
   return /-cn\/?$/.test(pathname);
 }
 
-export function getLocalizedPathname(path, zhCN) {
+export function getLocalizedPathname(path: string, zhCN: boolean) {
   const pathname = path.startsWith('/') ? path : `/${path}`;
   if (!zhCN) {
     // to enUS
@@ -103,7 +124,7 @@ export function getLocalizedPathname(path, zhCN) {
   return `${pathname}-cn`;
 }
 
-export function ping(callback) {
+export function ping(callback: (status: string) => void) {
   // eslint-disable-next-line
   const url =
     'https://private-a' +
@@ -112,8 +133,8 @@ export function ping(callback) {
     'ay.com/alip' +
     'ay-rmsdeploy-image/rmsportal/RKuAiriJqrUhyqW.png';
   const img = new Image();
-  let done;
-  const finish = status => {
+  let done: boolean;
+  const finish = (status: string) => {
     if (!done) {
       done = true;
       img.src = '';
@@ -138,20 +159,22 @@ export function isLocalStorageNameSupported() {
   }
 }
 
-export function loadScript(src) {
+export function loadScript(src: string) {
   return new Promise((resolve, reject) => {
     const script = document.createElement('script');
     script.type = 'text/javascript';
     script.src = src;
     script.onload = resolve;
     script.onerror = reject;
-    document.head.appendChild(script);
+    document.head!.appendChild(script);
   });
 }
 
-export function getMetaDescription(jml) {
+export function getMetaDescription(jml: any[]) {
   const COMMON_TAGS = ['h1', 'h2', 'h3', 'p', 'img', 'a', 'code', 'strong'];
-  if (!Array.isArray(jml)) return '';
+  if (!Array.isArray(jml)) {
+    return '';
+  }
   const paragraph = flattenDeep(
     jml
       .filter(item => {