diff --git a/.eslintrc.js b/.eslintrc.js
index 75f728b1..d85cf221 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,9 +1,6 @@
-const base = require('@umijs/fabric/dist/eslint');
-
 module.exports = {
-  ...base,
+  extends: [require.resolve('@umijs/fabric/dist/eslint')],
   rules: {
-    ...base.rules,
     'default-case': 0,
     'import/no-extraneous-dependencies': 0,
     'react/no-find-dom-node': 0,
diff --git a/examples/case.tsx b/examples/case.tsx
index 8c2f0066..d0aff15a 100644
--- a/examples/case.tsx
+++ b/examples/case.tsx
@@ -1,8 +1,9 @@
 /* eslint no-console:0 */
 
 import React from 'react';
-import { CSSMotionProps } from 'rc-motion';
-import Trigger, { BuildInPlacements } from '../src';
+import type { CSSMotionProps } from 'rc-motion';
+import type { BuildInPlacements } from '../src';
+import Trigger from '../src';
 import './case.less';
 
 const builtinPlacements: BuildInPlacements = {
@@ -202,7 +203,7 @@ const Demo = () => {
             maskMotion={motion ? MaskMotion : null}
             maskClosable={maskClosable}
             stretch={stretch}
-            action={Object.keys(actions).filter(action => actions[action])}
+            action={Object.keys(actions).filter((action) => actions[action])}
             builtinPlacements={builtinPlacements}
             forceRender={forceRender}
             popupStyle={{
diff --git a/examples/click-nested.js b/examples/click-nested.js
index c81790a4..3fd27b2a 100644
--- a/examples/click-nested.js
+++ b/examples/click-nested.js
@@ -37,17 +37,7 @@ const popupBorderStyle = {
   background: 'rgba(255, 0, 0, 0.1)',
 };
 
-function saveRef(name, component) {
-  this[name] = component;
-}
-
 class Test extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.saveContainerRef = saveRef.bind(this, 'containerInstance');
-  }
-
   render() {
     return (
       <div style={{ margin: 200 }}>
@@ -68,7 +58,7 @@ class Test extends React.Component {
                   i am a click popup{' '}
                   <button
                     type="button"
-                    onMouseDown={e => {
+                    onMouseDown={(e) => {
                       e.stopPropagation();
                       e.preventDefault();
                     }}
diff --git a/examples/nested.js b/examples/nested.js
index 9e3e6ac5..84529e67 100644
--- a/examples/nested.js
+++ b/examples/nested.js
@@ -36,16 +36,10 @@ const popupBorderStyle = {
   padding: 10,
 };
 
-function saveRef(name, component) {
-  this[name] = component;
-}
-
 class Test extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.saveContainerRef = saveRef.bind(this, 'containerInstance');
-  }
+  saveContainerRef = (node) => {
+    this.containerInstanceNode = node;
+  };
 
   render() {
     const innerTrigger = (
@@ -55,7 +49,7 @@ class Test extends React.Component {
           popupPlacement="bottom"
           action={['click']}
           builtinPlacements={builtinPlacements}
-          getPopupContainer={() => this.containerInstance}
+          getPopupContainer={() => this.containerInstanceNode}
           popup={<div style={popupBorderStyle}>I am inner Trigger Popup</div>}
         >
           <span href="#" style={{ margin: 20 }}>
diff --git a/examples/simple.tsx b/examples/simple.tsx
index 7471dd67..4351a0e7 100644
--- a/examples/simple.tsx
+++ b/examples/simple.tsx
@@ -35,7 +35,7 @@ function getPopupContainer(trigger) {
   return trigger.parentNode;
 }
 
-const InnerTarget = props => (
+const InnerTarget = (props) => (
   <div
     style={{
       margin: 20,
@@ -78,7 +78,7 @@ interface TestState {
   mobile?: boolean;
 }
 
-class Test extends React.Component<{}, TestState> {
+class Test extends React.Component<any, TestState> {
   state: TestState = {
     mask: true,
     maskClosable: true,
@@ -92,19 +92,19 @@ class Test extends React.Component<{}, TestState> {
     transitionName: 'rc-trigger-popup-zoom',
   };
 
-  onPlacementChange = e => {
+  onPlacementChange = (e) => {
     this.setState({
       placement: e.target.value,
     });
   };
 
-  onStretch = e => {
+  onStretch = (e) => {
     this.setState({
       stretch: e.target.value,
     });
   };
 
-  onTransitionChange = e => {
+  onTransitionChange = (e) => {
     this.setState({
       transitionName: e.target.checked ? e.target.value : '',
     });
@@ -126,31 +126,31 @@ class Test extends React.Component<{}, TestState> {
     });
   };
 
-  onOffsetXChange = e => {
+  onOffsetXChange = (e) => {
     const targetValue = e.target.value;
     this.setState({
       offsetX: targetValue || undefined,
     });
   };
 
-  onOffsetYChange = e => {
+  onOffsetYChange = (e) => {
     const targetValue = e.target.value;
     this.setState({
       offsetY: targetValue || undefined,
     });
   };
 
-  onVisibleChange = visible => {
+  onVisibleChange = (visible) => {
     console.log('tooltip', visible);
   };
 
-  onMask = e => {
+  onMask = (e) => {
     this.setState({
       mask: e.target.checked,
     });
   };
 
-  onMaskClosable = e => {
+  onMaskClosable = (e) => {
     this.setState({
       maskClosable: e.target.checked,
     });
@@ -173,13 +173,13 @@ class Test extends React.Component<{}, TestState> {
     });
   };
 
-  destroyPopupOnHide = e => {
+  destroyPopupOnHide = (e) => {
     this.setState({
       destroyPopupOnHide: e.target.checked,
     });
   };
 
-  autoDestroy = e => {
+  autoDestroy = (e) => {
     this.setState({
       autoDestroy: e.target.checked,
     });
@@ -374,7 +374,7 @@ class Test extends React.Component<{}, TestState> {
                       background: '#FFF',
                       textAlign: 'center',
                     },
-                    popupRender: node => (
+                    popupRender: (node) => (
                       <>
                         <div>
                           <input
diff --git a/package.json b/package.json
index 157137b3..02546b99 100644
--- a/package.json
+++ b/package.json
@@ -50,12 +50,12 @@
     "enzyme-adapter-react-16": "^1.14.0",
     "enzyme-to-json": "^3.4.0",
     "eslint": "^7.0.0",
-    "father": "^2.13.2",
+    "father-test": "3.0.1",
     "np": "^6.2.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "regenerator-runtime": "^0.13.7",
-    "typescript": "^3.5.2"
+    "typescript": "^4.0.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",
diff --git a/src/Popup/Mask.tsx b/src/Popup/Mask.tsx
index 72ecbc21..21807a35 100644
--- a/src/Popup/Mask.tsx
+++ b/src/Popup/Mask.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import CSSMotion, { CSSMotionProps } from 'rc-motion';
-import { TransitionNameType, AnimationType } from '../interface';
+import type { CSSMotionProps } from 'rc-motion';
+import CSSMotion from 'rc-motion';
+import type { TransitionNameType, AnimationType } from '../interface';
 import { getMotion } from '../utils/legacyUtil';
 
 export interface MaskProps {
diff --git a/src/Popup/MobilePopupInner.tsx b/src/Popup/MobilePopupInner.tsx
index 23e35052..b58b7702 100644
--- a/src/Popup/MobilePopupInner.tsx
+++ b/src/Popup/MobilePopupInner.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import CSSMotion from 'rc-motion';
 import classNames from 'classnames';
-import { PopupInnerProps, PopupInnerRef } from './PopupInner';
-import { MobileConfig } from '../interface';
+import type { PopupInnerProps, PopupInnerRef } from './PopupInner';
+import type { MobileConfig } from '../interface';
 
 interface MobilePopupInnerProps extends PopupInnerProps {
   mobile?: MobileConfig;
diff --git a/src/Popup/PopupInner.tsx b/src/Popup/PopupInner.tsx
index f077372a..8a097491 100644
--- a/src/Popup/PopupInner.tsx
+++ b/src/Popup/PopupInner.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { useRef, useState } from 'react';
 import Align from 'rc-align';
-import { RefAlign } from 'rc-align/lib/Align';
-import CSSMotion, { CSSMotionProps, MotionEndEventHandler } from 'rc-motion';
+import type { RefAlign } from 'rc-align/lib/Align';
+import type { CSSMotionProps, MotionEndEventHandler } from 'rc-motion';
+import CSSMotion from 'rc-motion';
 import classNames from 'classnames';
-import {
+import type {
   Point,
   AlignType,
   StretchType,
@@ -97,7 +98,7 @@ const PopupInner = React.forwardRef<PopupInnerRef, PopupInnerProps>(
     const [status, goNextStatus] = useVisibleStatus(visible, doMeasure);
 
     // ======================== Aligns ========================
-    const prepareResolveRef = useRef<Function>();
+    const prepareResolveRef = useRef<(value: unknown) => void>();
 
     // `target` on `rc-align` can accept as a function to get the bind element or a point.
     // ref: https://www.npmjs.com/package/rc-align
@@ -134,7 +135,7 @@ const PopupInner = React.forwardRef<PopupInnerRef, PopupInnerProps>(
 
     // ======================== Motion ========================
     const motion = { ...getMotion(props) };
-    ['onAppearEnd', 'onEnterEnd', 'onLeaveEnd'].forEach(eventName => {
+    ['onAppearEnd', 'onEnterEnd', 'onLeaveEnd'].forEach((eventName) => {
       const originHandler: MotionEndEventHandler = motion[eventName];
       motion[eventName] = (element, event) => {
         goNextStatus();
@@ -143,7 +144,7 @@ const PopupInner = React.forwardRef<PopupInnerRef, PopupInnerProps>(
     });
 
     function onShowPrepare() {
-      return new Promise(resolve => {
+      return new Promise((resolve) => {
         prepareResolveRef.current = resolve;
       });
     }
diff --git a/src/Popup/index.tsx b/src/Popup/index.tsx
index c8f862d9..3c64eca4 100644
--- a/src/Popup/index.tsx
+++ b/src/Popup/index.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useState, useEffect } from 'react';
-import { CSSMotionProps } from 'rc-motion';
+import type { CSSMotionProps } from 'rc-motion';
 import isMobile from 'rc-util/lib/isMobile';
-import {
+import type {
   StretchType,
   AlignType,
   TransitionNameType,
@@ -11,7 +11,8 @@ import {
   MobileConfig,
 } from '../interface';
 import Mask from './Mask';
-import PopupInner, { PopupInnerRef } from './PopupInner';
+import type { PopupInnerRef } from './PopupInner';
+import PopupInner from './PopupInner';
 import MobilePopupInner from './MobilePopupInner';
 
 export interface PopupProps {
@@ -61,7 +62,7 @@ const Popup = React.forwardRef<PopupInnerRef, PopupProps>(
       if (visible && mobile) {
         setInMobile(isMobile());
       }
-    }, [visible, !!mobile]);
+    }, [visible, mobile]);
 
     const popupNode: React.ReactNode = inMobile ? (
       <MobilePopupInner {...cloneProps} mobile={mobile} ref={ref} />
diff --git a/src/Popup/useStretchStyle.ts b/src/Popup/useStretchStyle.ts
index d757e72c..3de0f9ea 100644
--- a/src/Popup/useStretchStyle.ts
+++ b/src/Popup/useStretchStyle.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StretchType } from '../interface';
+import type { StretchType } from '../interface';
 
 export default (
   stretch?: StretchType,
diff --git a/src/Popup/useVisibleStatus.ts b/src/Popup/useVisibleStatus.ts
index 2805ad5a..84e47a35 100644
--- a/src/Popup/useVisibleStatus.ts
+++ b/src/Popup/useVisibleStatus.ts
@@ -32,13 +32,13 @@ export default (
     cancelRaf();
     rafRef.current = raf(() => {
       // Only align should be manually trigger
-      setStatus(prev => {
+      setStatus((prev) => {
         switch (status) {
           case 'align':
             return 'motion';
-
           case 'motion':
             return 'stable';
+          default:
         }
 
         return prev;
@@ -59,6 +59,7 @@ export default (
       case 'measure':
         doMeasure();
         break;
+      default:
     }
 
     if (status) {
diff --git a/src/index.tsx b/src/index.tsx
index 0be5708b..8f3b02c9 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 import ReactDOM from 'react-dom';
 import raf from 'rc-util/lib/raf';
 import contains from 'rc-util/lib/Dom/contains';
 import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
 import { composeRef, supportRef } from 'rc-util/lib/ref';
-import { CSSMotionProps } from 'rc-motion';
+import type { CSSMotionProps } from 'rc-motion';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import Portal from 'rc-util/lib/Portal';
 import classNames from 'classnames';
@@ -15,18 +15,18 @@ import {
   getAlignPopupClassName,
 } from './utils/alignUtil';
 import Popup from './Popup';
-import { PopupInnerRef } from './Popup/PopupInner';
+import type { PopupInnerRef } from './Popup/PopupInner';
 import TriggerContext from './context';
-import {
+import type {
   ActionType,
   AlignType,
-  BuildInPlacements,
   TransitionNameType,
   AnimationType,
   Point,
   CommonEventHandler,
   MobileConfig,
 } from './interface';
+import { BuildInPlacements } from './interface';
 
 function noop() {}
 
@@ -193,8 +193,8 @@ export function generateTrigger(
         popupVisible,
       };
 
-      ALL_HANDLERS.forEach(h => {
-        this[`fire${h}`] = e => {
+      ALL_HANDLERS.forEach((h) => {
+        this[`fire${h}`] = (e) => {
           this.fireEvents(h, e);
         };
       });
@@ -227,7 +227,8 @@ export function generateTrigger(
         }
         // always hide on mobile
         if (!this.touchOutsideHandler) {
-          currentDocument = currentDocument || props.getDocument(this.getRootDomNode());
+          currentDocument =
+            currentDocument || props.getDocument(this.getRootDomNode());
           this.touchOutsideHandler = addEventListener(
             currentDocument,
             'touchstart',
@@ -236,7 +237,8 @@ export function generateTrigger(
         }
         // close popup when trigger type contains 'onContextMenu' and document is scrolling.
         if (!this.contextMenuOutsideHandler1 && this.isContextMenuToShow()) {
-          currentDocument = currentDocument || props.getDocument(this.getRootDomNode());
+          currentDocument =
+            currentDocument || props.getDocument(this.getRootDomNode());
           this.contextMenuOutsideHandler1 = addEventListener(
             currentDocument,
             'scroll',
@@ -264,7 +266,7 @@ export function generateTrigger(
       raf.cancel(this.attachId);
     }
 
-    onMouseEnter = e => {
+    onMouseEnter = (e) => {
       const { mouseEnterDelay } = this.props;
       this.fireEvents('onMouseEnter', e);
       this.delaySetPopupVisible(
@@ -274,12 +276,12 @@ export function generateTrigger(
       );
     };
 
-    onMouseMove = e => {
+    onMouseMove = (e) => {
       this.fireEvents('onMouseMove', e);
       this.setPoint(e);
     };
 
-    onMouseLeave = e => {
+    onMouseLeave = (e) => {
       this.fireEvents('onMouseLeave', e);
       this.delaySetPopupVisible(false, this.props.mouseLeaveDelay);
     };
@@ -288,7 +290,7 @@ export function generateTrigger(
       this.clearDelayTimer();
     };
 
-    onPopupMouseLeave = e => {
+    onPopupMouseLeave = (e) => {
       // https://github.com/react-component/trigger/pull/13
       // react bug?
       if (
@@ -301,7 +303,7 @@ export function generateTrigger(
       this.delaySetPopupVisible(false, this.props.mouseLeaveDelay);
     };
 
-    onFocus = e => {
+    onFocus = (e) => {
       this.fireEvents('onFocus', e);
       // incase focusin and focusout
       this.clearDelayTimer();
@@ -311,17 +313,17 @@ export function generateTrigger(
       }
     };
 
-    onMouseDown = e => {
+    onMouseDown = (e) => {
       this.fireEvents('onMouseDown', e);
       this.preClickTime = Date.now();
     };
 
-    onTouchStart = e => {
+    onTouchStart = (e) => {
       this.fireEvents('onTouchStart', e);
       this.preTouchTime = Date.now();
     };
 
-    onBlur = e => {
+    onBlur = (e) => {
       this.fireEvents('onBlur', e);
       this.clearDelayTimer();
       if (this.isBlurToHide()) {
@@ -329,7 +331,7 @@ export function generateTrigger(
       }
     };
 
-    onContextMenu = e => {
+    onContextMenu = (e) => {
       e.preventDefault();
       this.fireEvents('onContextMenu', e);
       this.setPopupVisible(true, e);
@@ -341,7 +343,7 @@ export function generateTrigger(
       }
     };
 
-    onClick = event => {
+    onClick = (event) => {
       this.fireEvents('onClick', event);
       // focus will trigger click
       if (this.focusTime) {
@@ -394,7 +396,7 @@ export function generateTrigger(
       }
     };
 
-    onDocumentClick = event => {
+    onDocumentClick = (event) => {
       if (this.props.mask && !this.props.maskClosable) {
         return;
       }
@@ -451,7 +453,7 @@ export function generateTrigger(
       return ReactDOM.findDOMNode(this) as HTMLElement;
     };
 
-    getPopupClassNameFromAlign = align => {
+    getPopupClassNameFromAlign = (align) => {
       const className = [];
       const {
         popupPlacement,
@@ -582,7 +584,9 @@ export function generateTrigger(
 
     getContainer = () => {
       const { getDocument } = this.props;
-      const popupContainer = getDocument(this.getRootDomNode()).createElement('div');
+      const popupContainer = getDocument(this.getRootDomNode()).createElement(
+        'div',
+      );
       // Make sure default popup container will never cause scrollbar appearing
       // https://github.com/react-component/trigger/issues/41
       popupContainer.style.position = 'absolute';
@@ -619,7 +623,7 @@ export function generateTrigger(
       }
     }
 
-    setPoint = point => {
+    setPoint = (point) => {
       const { alignPoint } = this.props;
       if (!alignPoint || !point) return;
 
diff --git a/src/interface.ts b/src/interface.ts
index ef21548b..c7c6baef 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -1,4 +1,4 @@
-import { CSSMotionProps } from 'rc-motion';
+import type { CSSMotionProps } from 'rc-motion';
 
 /** Two char of 't' 'b' 'c' 'l' 'r'. Example: 'lt' */
 export type AlignPoint = string;
@@ -43,9 +43,7 @@ export interface AlignType {
   ignoreShake?: boolean;
 }
 
-export interface BuildInPlacements {
-  [placement: string]: AlignType;
-}
+export type BuildInPlacements = Record<string, AlignType>;
 
 export type StretchType = string;
 
diff --git a/src/utils/alignUtil.ts b/src/utils/alignUtil.ts
index f4b8d5a3..2c6197c7 100644
--- a/src/utils/alignUtil.ts
+++ b/src/utils/alignUtil.ts
@@ -1,6 +1,10 @@
-import { AlignType, BuildInPlacements, AlignPoint } from '../interface';
+import type { AlignType, BuildInPlacements, AlignPoint } from '../interface';
 
-function isPointsEq(a1: AlignPoint[], a2: AlignPoint[], isAlignPoint: boolean): boolean {
+function isPointsEq(
+  a1: AlignPoint[],
+  a2: AlignPoint[],
+  isAlignPoint: boolean,
+): boolean {
   if (isAlignPoint) {
     return a1[0] === a2[0];
   }
diff --git a/src/utils/legacyUtil.ts b/src/utils/legacyUtil.ts
index af40f13f..c9a840d9 100644
--- a/src/utils/legacyUtil.ts
+++ b/src/utils/legacyUtil.ts
@@ -1,5 +1,5 @@
-import { CSSMotionProps } from 'rc-motion';
-import { AnimationType, TransitionNameType } from '../interface';
+import type { CSSMotionProps } from 'rc-motion';
+import type { AnimationType, TransitionNameType } from '../interface';
 
 interface GetMotionProps {
   motion: CSSMotionProps;
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..f6d96058
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "jsx": "preserve",
+    "declaration": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "paths": {
+      "@/*": ["src/*"],
+      "@@/*": ["src/.umi/*"],
+      "rc-dialog": ["src/index.ts"]
+    }
+  }
+}