chore: refactor with ts

components/_util/KeyCode.ts

@@ -425,97 +425,98 @@ const KeyCode = {
    * WIN_IME
    */
   WIN_IME: 229,
-};
 
-/*
- whether text and modified key is entered at the same time.
- */
-KeyCode.isTextModifyingKeyEvent = function isTextModifyingKeyEvent(e) {
-  const keyCode = e.keyCode;
-  if (
-    (e.altKey && !e.ctrlKey) ||
-    e.metaKey ||
-    // Function keys don't generate text
-    (keyCode >= KeyCode.F1 && keyCode <= KeyCode.F12)
-  ) {
-    return false;
-  }
-
-  // The following keys are quite harmless, even in combination with
-  // CTRL, ALT or SHIFT.
-  switch (keyCode) {
-    case KeyCode.ALT:
-    case KeyCode.CAPS_LOCK:
-    case KeyCode.CONTEXT_MENU:
-    case KeyCode.CTRL:
-    case KeyCode.DOWN:
-    case KeyCode.END:
-    case KeyCode.ESC:
-    case KeyCode.HOME:
-    case KeyCode.INSERT:
-    case KeyCode.LEFT:
-    case KeyCode.MAC_FF_META:
-    case KeyCode.META:
-    case KeyCode.NUMLOCK:
-    case KeyCode.NUM_CENTER:
-    case KeyCode.PAGE_DOWN:
-    case KeyCode.PAGE_UP:
-    case KeyCode.PAUSE:
-    case KeyCode.PRINT_SCREEN:
-    case KeyCode.RIGHT:
-    case KeyCode.SHIFT:
-    case KeyCode.UP:
-    case KeyCode.WIN_KEY:
-    case KeyCode.WIN_KEY_RIGHT:
+  // ======================== Function ========================
+  /**
+   * whether text and modified key is entered at the same time.
+   */
+  isTextModifyingKeyEvent: function isTextModifyingKeyEvent(e: KeyboardEvent) {
+    const { keyCode } = e;
+    if (
+      (e.altKey && !e.ctrlKey) ||
+      e.metaKey ||
+      // Function keys don't generate text
+      (keyCode >= KeyCode.F1 && keyCode <= KeyCode.F12)
+    ) {
       return false;
-    default:
+    }
+
+    // The following keys are quite harmless, even in combination with
+    // CTRL, ALT or SHIFT.
+    switch (keyCode) {
+      case KeyCode.ALT:
+      case KeyCode.CAPS_LOCK:
+      case KeyCode.CONTEXT_MENU:
+      case KeyCode.CTRL:
+      case KeyCode.DOWN:
+      case KeyCode.END:
+      case KeyCode.ESC:
+      case KeyCode.HOME:
+      case KeyCode.INSERT:
+      case KeyCode.LEFT:
+      case KeyCode.MAC_FF_META:
+      case KeyCode.META:
+      case KeyCode.NUMLOCK:
+      case KeyCode.NUM_CENTER:
+      case KeyCode.PAGE_DOWN:
+      case KeyCode.PAGE_UP:
+      case KeyCode.PAUSE:
+      case KeyCode.PRINT_SCREEN:
+      case KeyCode.RIGHT:
+      case KeyCode.SHIFT:
+      case KeyCode.UP:
+      case KeyCode.WIN_KEY:
+      case KeyCode.WIN_KEY_RIGHT:
+        return false;
+      default:
+        return true;
+    }
+  },
+
+  /**
+   * whether character is entered.
+   */
+  isCharacterKey: function isCharacterKey(keyCode: number) {
+    if (keyCode >= KeyCode.ZERO && keyCode <= KeyCode.NINE) {
       return true;
-  }
-};
+    }
 
-/*
- whether character is entered.
- */
-KeyCode.isCharacterKey = function isCharacterKey(keyCode) {
-  if (keyCode >= KeyCode.ZERO && keyCode <= KeyCode.NINE) {
-    return true;
-  }
-
-  if (keyCode >= KeyCode.NUM_ZERO && keyCode <= KeyCode.NUM_MULTIPLY) {
-    return true;
-  }
-
-  if (keyCode >= KeyCode.A && keyCode <= KeyCode.Z) {
-    return true;
-  }
-
-  // Safari sends zero key code for non-latin characters.
-  if (window.navigation.userAgent.indexOf('WebKit') !== -1 && keyCode === 0) {
-    return true;
-  }
-
-  switch (keyCode) {
-    case KeyCode.SPACE:
-    case KeyCode.QUESTION_MARK:
-    case KeyCode.NUM_PLUS:
-    case KeyCode.NUM_MINUS:
-    case KeyCode.NUM_PERIOD:
-    case KeyCode.NUM_DIVISION:
-    case KeyCode.SEMICOLON:
-    case KeyCode.DASH:
-    case KeyCode.EQUALS:
-    case KeyCode.COMMA:
-    case KeyCode.PERIOD:
-    case KeyCode.SLASH:
-    case KeyCode.APOSTROPHE:
-    case KeyCode.SINGLE_QUOTE:
-    case KeyCode.OPEN_SQUARE_BRACKET:
-    case KeyCode.BACKSLASH:
-    case KeyCode.CLOSE_SQUARE_BRACKET:
+    if (keyCode >= KeyCode.NUM_ZERO && keyCode <= KeyCode.NUM_MULTIPLY) {
       return true;
-    default:
-      return false;
-  }
+    }
+
+    if (keyCode >= KeyCode.A && keyCode <= KeyCode.Z) {
+      return true;
+    }
+
+    // Safari sends zero key code for non-latin characters.
+    if (window.navigator.userAgent.indexOf('WebKit') !== -1 && keyCode === 0) {
+      return true;
+    }
+
+    switch (keyCode) {
+      case KeyCode.SPACE:
+      case KeyCode.QUESTION_MARK:
+      case KeyCode.NUM_PLUS:
+      case KeyCode.NUM_MINUS:
+      case KeyCode.NUM_PERIOD:
+      case KeyCode.NUM_DIVISION:
+      case KeyCode.SEMICOLON:
+      case KeyCode.DASH:
+      case KeyCode.EQUALS:
+      case KeyCode.COMMA:
+      case KeyCode.PERIOD:
+      case KeyCode.SLASH:
+      case KeyCode.APOSTROPHE:
+      case KeyCode.SINGLE_QUOTE:
+      case KeyCode.OPEN_SQUARE_BRACKET:
+      case KeyCode.BACKSLASH:
+      case KeyCode.CLOSE_SQUARE_BRACKET:
+        return true;
+      default:
+        return false;
+    }
+  },
 };
 
 export default KeyCode;

components/_util/Portal.tsx

@@ -1,10 +1,13 @@
 import PropTypes from './vue-types';
-import { Teleport } from 'vue';
+import { Teleport, defineComponent, PropType } from 'vue';
 
-export default {
+export default defineComponent({
   name: 'Portal',
   props: {
-    getContainer: PropTypes.func.isRequired,
+    getContainer: {
+      type: Function as PropType<(triggerNode: HTMLElement) => HTMLElement>,
+      required: true,
+    },
     children: PropTypes.any.isRequired,
     didUpdate: PropTypes.func,
   },
@@ -45,4 +48,4 @@ export default {
     }
     return null;
   },
-};
+});

components/_util/easings.ts

@@ -1,8 +1,9 @@
-export function easeInOutCubic(t, b, c, d) {
+export function easeInOutCubic(t: number, b: number, c: number, d: number) {
   const cc = c - b;
   t /= d / 2;
   if (t < 1) {
     return (cc / 2) * t * t * t + b;
   }
+  // eslint-disable-next-line no-return-assign
   return (cc / 2) * ((t -= 2) * t * t + 2) + b;
 }

components/_util/getScroll.ts

@@ -1,17 +1,25 @@
-export default function getScroll(target, top) {
+export function isWindow(obj: any) {
+  return obj !== null && obj !== undefined && obj === obj.window;
+}
+
+export default function getScroll(target: HTMLElement | Window | Document | null, top: Boolean) {
   if (typeof window === 'undefined') {
     return 0;
   }
 
-  const prop = top ? 'pageYOffset' : 'pageXOffset';
   const method = top ? 'scrollTop' : 'scrollLeft';
-  const isWindow = target === window;
-
-  let ret = isWindow ? target[prop] : target[method];
-  // ie6,7,8 standard mode
-  if (isWindow && typeof ret !== 'number') {
-    ret = window.document.documentElement[method];
+  let result = 0;
+  if (isWindow(target)) {
+    result = (target as Window)[top ? 'pageYOffset' : 'pageXOffset'];
+  } else if (target instanceof Document) {
+    result = target.documentElement[method];
+  } else if (target) {
+    result = (target as HTMLElement)[method];
   }
-
-  return ret;
+  if (target && !isWindow(target) && typeof result !== 'number') {
+    result = ((target as HTMLElement).ownerDocument || (target as Document)).documentElement[
+      method
+    ];
+  }
+  return result;
 }

components/_util/isValid.ts

@@ -1,4 +1,5 @@
-const isValid = value => {
+const isValid = (value: unknown) => {
   return value !== undefined && value !== null && value !== '';
 };
+
 export default isValid;

components/_util/responsiveObserve.js

@@ -1,63 +0,0 @@
-export const responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
-
-export const responsiveMap = {
-  xs: '(max-width: 575px)',
-  sm: '(min-width: 576px)',
-  md: '(min-width: 768px)',
-  lg: '(min-width: 992px)',
-  xl: '(min-width: 1200px)',
-  xxl: '(min-width: 1600px)',
-};
-
-const subscribers = new Map();
-let subUid = -1;
-let screens = {};
-
-const responsiveObserve = {
-  matchHandlers: {},
-  dispatch(pointMap) {
-    screens = pointMap;
-    subscribers.forEach(func => func(screens));
-    return subscribers.size >= 1;
-  },
-  subscribe(func) {
-    if (!subscribers.size) this.register();
-    subUid += 1;
-    subscribers.set(subUid, func);
-    func(screens);
-    return subUid;
-  },
-  unsubscribe(token) {
-    subscribers.delete(token);
-    if (!subscribers.size) this.unregister();
-  },
-  unregister() {
-    Object.keys(responsiveMap).forEach(screen => {
-      const matchMediaQuery = responsiveMap[screen];
-      const handler = this.matchHandlers[matchMediaQuery];
-      handler?.mql.removeListener(handler?.listener);
-    });
-    subscribers.clear();
-  },
-  register() {
-    Object.keys(responsiveMap).forEach(screen => {
-      const matchMediaQuery = responsiveMap[screen];
-      const listener = ({ matches }) => {
-        this.dispatch({
-          ...screens,
-          [screen]: matches,
-        });
-      };
-      const mql = window.matchMedia(matchMediaQuery);
-      mql.addListener(listener);
-      this.matchHandlers[matchMediaQuery] = {
-        mql,
-        listener,
-      };
-
-      listener(mql);
-    });
-  },
-};
-
-export default responsiveObserve;

components/_util/scrollTo.ts

@@ -1,19 +1,18 @@
 import raf from 'raf';
-import getScroll from './getScroll';
+import getScroll, { isWindow } from './getScroll';
 import { easeInOutCubic } from './easings';
 
-// interface ScrollToOptions {
-//   /** Scroll container, default as window */
-//   getContainer?: () => HTMLElement | Window;
-//   /** Scroll end callback */
-//   callback?: () => any;
-//   /** Animation duration, default as 450 */
-//   duration?: number;
-// }
+interface ScrollToOptions {
+  /** Scroll container, default as window */
+  getContainer?: () => HTMLElement | Window | Document;
+  /** Scroll end callback */
+  callback?: () => any;
+  /** Animation duration, default as 450 */
+  duration?: number;
+}
 
-export default function scrollTo(y, options = {}) {
+export default function scrollTo(y: number, options: ScrollToOptions = {}) {
   const { getContainer = () => window, callback, duration = 450 } = options;
-
   const container = getContainer();
   const scrollTop = getScroll(container, true);
   const startTime = Date.now();
@@ -22,10 +21,12 @@ export default function scrollTo(y, options = {}) {
     const timestamp = Date.now();
     const time = timestamp - startTime;
     const nextScrollTop = easeInOutCubic(time > duration ? duration : time, scrollTop, y, duration);
-    if (container === window) {
-      window.scrollTo(window.pageXOffset, nextScrollTop);
+    if (isWindow(container)) {
+      (container as Window).scrollTo(window.pageXOffset, nextScrollTop);
+    } else if (container instanceof HTMLDocument || container.constructor.name === 'HTMLDocument') {
+      (container as HTMLDocument).documentElement.scrollTop = nextScrollTop;
     } else {
-      container.scrollTop = nextScrollTop;
+      (container as HTMLElement).scrollTop = nextScrollTop;
     }
     if (time < duration) {
       raf(frameFunc);

components/_util/transButton.tsx

@@ -2,8 +2,8 @@
  * Wrap of sub component which need use as Button capacity (like Icon component).
  * This helps accessibility reader to tread as a interactive button to operation.
  */
+import { defineComponent, PropType } from 'vue';
 import KeyCode from './KeyCode';
-import PropTypes from './vue-types';
 
 const inlineStyle = {
   border: 0,
@@ -13,30 +13,30 @@ const inlineStyle = {
   display: 'inline-block',
 };
 
-const TransButton = {
+const TransButton = defineComponent({
   name: 'TransButton',
   inheritAttrs: false,
   props: {
-    noStyle: PropTypes.bool,
-    onClick: PropTypes.func,
+    noStyle: Boolean,
+    onClick: Function as PropType<(e: MouseEvent) => void>,
   },
 
   methods: {
-    onKeyDown(event) {
+    onKeyDown(event: KeyboardEvent) {
       const { keyCode } = event;
       if (keyCode === KeyCode.ENTER) {
         event.preventDefault();
       }
     },
 
-    onKeyUp(event) {
+    onKeyUp(event: KeyboardEvent) {
       const { keyCode } = event;
       if (keyCode === KeyCode.ENTER) {
         this.$emit('click', event);
       }
     },
 
-    setRef(btn) {
+    setRef(btn: HTMLDivElement) {
       this.$refs.div = btn;
     },
 
@@ -67,10 +67,10 @@ const TransButton = {
         onKeyup={this.onKeyUp}
         style={{ ...(!noStyle ? inlineStyle : null) }}
       >
-        {this.$slots.default && this.$slots.default()}
+        {this.$slots.default?.()}
       </div>
     );
   },
-};
+});
 
 export default TransButton;

components/_util/util.ts

@@ -53,8 +53,8 @@ function resolvePropValue(options, props, key, value) {
   return value;
 }
 
-export function getDataAndAriaProps(props) {
-  return Object.keys(props).reduce((memo, key) => {
+export function getDataAndAriaProps(props: Record<string, unknown>) {
+  return Object.keys(props).reduce((memo: Record<string, unknown>, key: string) => {
     if (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-') {
       memo[key] = props[key];
     }

components/_util/vnode.ts

@@ -1,8 +1,8 @@
 import { filterEmpty } from './props-util';
-import { cloneVNode } from 'vue';
+import { cloneVNode, VNode } from 'vue';
 import warning from './warning';
 
-export function cloneElement(vnode, nodeProps = {}, override = true) {
+export function cloneElement(vnode: VNode, nodeProps = {}, override = true) {
   let ele = vnode;
   if (Array.isArray(vnode)) {
     ele = filterEmpty(vnode)[0];
@@ -14,10 +14,10 @@ export function cloneElement(vnode, nodeProps = {}, override = true) {
 
   // cloneVNode内部是合并属性，这里改成覆盖属性
   node.props = override ? { ...node.props, ...nodeProps } : node.props;
-  warning(typeof node.props.class !== 'object', 'class must be string');
+  warning(typeof node.props!.class !== 'object', 'class must be string');
   return node;
 }
 
-export function cloneVNodes(vnodes, nodeProps = {}, override = true) {
+export function cloneVNodes(vnodes: VNode[], nodeProps = {}, override = true) {
   return vnodes.map(vnode => cloneElement(vnode, nodeProps, override));
 }

components/grid/Col.tsx

@@ -1,5 +1,5 @@
 import { inject, defineComponent, HTMLAttributes, CSSProperties } from 'vue';
-import classNames from 'classnames';
+import classNames from '../_util/classNames';
 import { ConfigConsumerProps } from '../config-provider';
 import { rowContextState } from './Row';
 

package.json

@@ -82,6 +82,8 @@
     "@commitlint/cli": "^8.0.0",
     "@commitlint/config-conventional": "^8.0.0",
     "@octokit/rest": "^16.0.0",
+    "@types/lodash-es": "^4.17.3",
+    "@types/raf": "^3.4.0",
     "@typescript-eslint/eslint-plugin": "^4.1.0",
     "@typescript-eslint/parser": "^4.1.0",
     "@vue/babel-plugin-jsx": "^1.0.0-rc.2",