feat(shared): use shared methods to judge types (#1591)

* feat(shared): add shared util methods * refactor: use shared methods to judge types
alibaba · May 9, 2022 · c907c7b · c907c7b
1 parent d5a4509
commit c907c7b
Show file tree

Hide file tree

Showing 25 changed files with 144 additions and 47 deletions.
diff --git a/packages/hooks/src/createUseStorageState/index.ts b/packages/hooks/src/createUseStorageState/index.ts
@@ -2,7 +2,7 @@
 import { useState } from 'react';
 import useMemoizedFn from '../useMemoizedFn';
 import useUpdateEffect from '../useUpdateEffect';
-import { isFunction } from '../utils';
+import { isFunction, isUndef } from '../utils';
 
 export interface IFuncUpdater<T> {
   (previousState?: T): T;
@@ -76,7 +76,7 @@ export function createUseStorageState(getStorage: () => Storage | undefined) {
     }, [key]);
 
     const updateState = (value?: T | IFuncUpdater<T>) => {
-      if (typeof value === 'undefined') {
+      if (isUndef(value)) {
         setState(undefined);
         storage?.removeItem(key);
       } else if (isFunction(value)) {

diff --git a/packages/hooks/src/useAsyncEffect/index.ts b/packages/hooks/src/useAsyncEffect/index.ts
@@ -1,5 +1,6 @@
 import type { DependencyList } from 'react';
 import { useEffect } from 'react';
+import { isFunction } from '../utils';
 
 function useAsyncEffect(
   effect: () => AsyncGenerator<void, void, void> | Promise<void>,
@@ -8,7 +9,7 @@ function useAsyncEffect(
   function isAsyncGenerator(
     val: AsyncGenerator<void, void, void> | Promise<void>,
   ): val is AsyncGenerator<void, void, void> {
-    return typeof val[Symbol.asyncIterator] === 'function';
+    return isFunction(val[Symbol.asyncIterator]);
   }
   useEffect(() => {
     const e = effect();

diff --git a/packages/hooks/src/useCookieState/index.ts b/packages/hooks/src/useCookieState/index.ts
@@ -1,7 +1,7 @@
 import Cookies from 'js-cookie';
 import { useState } from 'react';
 import useMemoizedFn from '../useMemoizedFn';
-import { isFunction } from '../utils';
+import { isFunction, isString } from '../utils';
 
 export type State = string | undefined;
 
@@ -13,7 +13,7 @@ function useCookieState(cookieKey: string, options: Options = {}) {
   const [state, setState] = useState<State>(() => {
     const cookieValue = Cookies.get(cookieKey);
 
-    if (typeof cookieValue === 'string') return cookieValue;
+    if (isString(cookieValue)) return cookieValue;
 
     if (isFunction(options.defaultValue)) {
       return options.defaultValue();

diff --git a/packages/hooks/src/useCounter/index.ts b/packages/hooks/src/useCounter/index.ts
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import useMemoizedFn from '../useMemoizedFn';
+import { isNumber } from '../utils';
 
 export interface Options {
   min?: number;
@@ -18,10 +19,10 @@ export type ValueParam = number | ((c: number) => number);
 function getTargetValue(val: number, options: Options = {}) {
   const { min, max } = options;
   let target = val;
-  if (typeof max === 'number') {
+  if (isNumber(max)) {
     target = Math.min(max, target);
   }
-  if (typeof min === 'number') {
+  if (isNumber(min)) {
     target = Math.max(min, target);
   }
   return target;
@@ -39,7 +40,7 @@ function useCounter(initialValue: number = 0, options: Options = {}) {
 
   const setValue = (value: ValueParam) => {
     setCurrent((c) => {
-      const target = typeof value === 'number' ? value : value(c);
+      const target = isNumber(value) ? value : value(c);
       return getTargetValue(target, {
         max,
         min,

diff --git a/packages/hooks/src/useDebounceFn/index.ts b/packages/hooks/src/useDebounceFn/index.ts
@@ -3,12 +3,13 @@ import { useMemo } from 'react';
 import type { DebounceOptions } from '../useDebounce/debounceOptions';
 import useLatest from '../useLatest';
 import useUnmount from '../useUnmount';
+import { isFunction } from '../utils';
 
 type noop = (...args: any) => any;
 
 function useDebounceFn<T extends noop>(fn: T, options?: DebounceOptions) {
   if (process.env.NODE_ENV === 'development') {
-    if (typeof fn !== 'function') {
+    if (!isFunction(fn)) {
       console.error(`useDebounceFn expected parameter is a function, got ${typeof fn}`);
     }
   }
@@ -20,9 +21,9 @@ function useDebounceFn<T extends noop>(fn: T, options?: DebounceOptions) {
   const debounced = useMemo(
     () =>
       debounce(
-        ((...args: Parameters<T>): ReturnType<T> => {
+        (...args: Parameters<T>): ReturnType<T> => {
           return fnRef.current(...args);
-        }),
+        },
         wait,
         options,
       ),

diff --git a/packages/hooks/src/useEventTarget/index.ts b/packages/hooks/src/useEventTarget/index.ts
@@ -1,5 +1,6 @@
 import { useCallback, useState } from 'react';
 import useLatest from '../useLatest';
+import { isFunction } from '../utils';
 
 interface EventTarget<U> {
   target: {
@@ -22,7 +23,7 @@ function useEventTarget<T, U = T>(options?: Options<T, U>) {
 
   const onChange = useCallback((e: EventTarget<U>) => {
     const _value = e.target.value;
-    if (typeof transformerRef.current === 'function') {
+    if (isFunction(transformerRef.current)) {
       return setValue(transformerRef.current(_value));
     }
     // no transformer => U and T should be the same

diff --git a/packages/hooks/src/useHistoryTravel/index.ts b/packages/hooks/src/useHistoryTravel/index.ts
@@ -1,5 +1,6 @@
 import { useRef, useState } from 'react';
 import useMemoizedFn from '../useMemoizedFn';
+import { isNumber } from '../utils';
 
 interface IData<T> {
   present?: T;
@@ -86,7 +87,7 @@ export default function useHistoryTravel<T>(initialValue?: T) {
   };
 
   const go = (step: number) => {
-    const stepNum = typeof step === 'number' ? step : Number(step);
+    const stepNum = isNumber(step) ? step : Number(step);
     if (stepNum === 0) {
       return;
     }

diff --git a/packages/hooks/src/useKeyPress/index.ts b/packages/hooks/src/useKeyPress/index.ts
@@ -1,4 +1,5 @@
 import useLatest from '../useLatest';
+import { isNumber, isString } from '../utils';
 import type { BasicTarget } from '../utils/domTarget';
 import { getTargetElement } from '../utils/domTarget';
 import useDeepCompareEffectWithTarget from '../utils/useDeepCompareWithTarget';
@@ -155,7 +156,7 @@ function genFilterKey(event: KeyboardEvent, keyFilter: keyType, exactMatch: bool
   }
 
   // 数字类型直接匹配事件的 keyCode
-  if (typeof keyFilter === 'number') {
+  if (isNumber(keyFilter)) {
     return event.keyCode === keyFilter;
   }
 
@@ -195,7 +196,7 @@ function genKeyFormater(keyFilter: KeyFilter, exactMatch: boolean): KeyPredicate
   if (typeof keyFilter === 'function') {
     return keyFilter;
   }
-  if (typeof keyFilter === 'string' || typeof keyFilter === 'number') {
+  if (isString(keyFilter) || isNumber(keyFilter)) {
     return (event: KeyboardEvent) => genFilterKey(event, keyFilter, exactMatch);
   }
   if (Array.isArray(keyFilter)) {

diff --git a/packages/hooks/src/useMemoizedFn/index.ts b/packages/hooks/src/useMemoizedFn/index.ts
@@ -1,4 +1,5 @@
 import { useMemo, useRef } from 'react';
+import { isFunction } from '../utils';
 
 type noop = (this: any, ...args: any[]) => any;
 
@@ -9,7 +10,7 @@ type PickFunction<T extends noop> = (
 
 function useMemoizedFn<T extends noop>(fn: T) {
   if (process.env.NODE_ENV === 'development') {
-    if (typeof fn !== 'function') {
+    if (!isFunction(fn)) {
       console.error(`useMemoizedFn expected parameter is a function, got ${typeof fn}`);
     }
   }

diff --git a/packages/hooks/src/useMount/index.ts b/packages/hooks/src/useMount/index.ts
@@ -1,9 +1,12 @@
 import { useEffect } from 'react';
+import { isFunction } from '../utils';
 
 const useMount = (fn: () => void) => {
   if (process.env.NODE_ENV === 'development') {
-    if (typeof fn !== 'function') {
-      console.error(`useMount: parameter \`fn\` expected to be a function, but got "${typeof fn}".`);
+    if (!isFunction(fn)) {
+      console.error(
+        `useMount: parameter \`fn\` expected to be a function, but got "${typeof fn}".`,
+      );
     }
   }
 

diff --git a/packages/hooks/src/useNetwork/index.ts b/packages/hooks/src/useNetwork/index.ts
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { isObject } from '../utils';
 
 export interface NetworkState {
   since?: Date;
@@ -19,7 +20,7 @@ enum NetworkEventType {
 
 function getConnection() {
   const nav = navigator as any;
-  if (typeof nav !== 'object') return null;
+  if (!isObject(nav)) return null;
   return nav.connection || nav.mozConnection || nav.webkitConnection;
 }
 

diff --git a/packages/hooks/src/useRafInterval/index.ts b/packages/hooks/src/useRafInterval/index.ts
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import useLatest from '../useLatest';
+import { isNumber } from '../utils';
 
 interface Handle {
   id: number | NodeJS.Timer;
@@ -50,7 +51,7 @@ function useRafInterval(
   const fnRef = useLatest(fn);
 
   useEffect(() => {
-    if (typeof delay !== 'number' || delay < 0) return;
+    if (!isNumber(delay) || delay < 0) return;
     if (immediate) {
       fnRef.current();
     }

diff --git a/packages/hooks/src/useRafTimeout/index.ts b/packages/hooks/src/useRafTimeout/index.ts
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import useLatest from '../useLatest';
+import { isNumber } from '../utils';
 
 interface Handle {
   id: number | NodeJS.Timeout;
@@ -45,7 +46,7 @@ function useRafTimeout(fn: () => void, delay: number | undefined) {
   const fnRef = useLatest(fn);
 
   useEffect(() => {
-    if (typeof delay !== 'number' || delay < 0) return;
+    if (!isNumber(delay) || delay < 0) return;
     const timer = setRafTimeout(() => {
       fnRef.current();
     }, delay);

diff --git a/packages/hooks/src/useReactive/index.ts b/packages/hooks/src/useReactive/index.ts
@@ -1,16 +1,13 @@
 import { useRef } from 'react';
 import useCreation from '../useCreation';
 import useUpdate from '../useUpdate';
+import { isObject } from '../utils';
 
 // k:v 原对象:代理过的对象
 const proxyMap = new WeakMap();
 // k:v 代理过的对象:原对象
 const rawMap = new WeakMap();
 
-function isObject(val: Record<string, any>): boolean {
-  return typeof val === 'object' && val !== null;
-}
-
 function observer<T extends Record<string, any>>(initialVal: T, cb: () => void): T {
   const existingProxy = proxyMap.get(initialVal);
 

diff --git a/packages/hooks/src/useRequest/src/Fetch.ts b/packages/hooks/src/useRequest/src/Fetch.ts
@@ -1,3 +1,4 @@
+import { isFunction } from '../../utils';
 import type { MutableRefObject } from 'react';
 import type { FetchState, Options, PluginReturn, Service, Subscribe } from './types';
 
@@ -154,7 +155,7 @@ export default class Fetch<TData, TParams extends any[]> {
 
   mutate(data?: TData | ((oldData?: TData) => TData | undefined)) {
     let targetData: TData | undefined;
-    if (typeof data === 'function') {
+    if (isFunction(data)) {
       // @ts-ignore
       targetData = data(this.state.data);
     } else {

diff --git a/packages/hooks/src/useRequest/src/utils/isOnline.ts b/packages/hooks/src/useRequest/src/utils/isOnline.ts
@@ -1,7 +1,8 @@
+import { isUndef } from '../../../utils';
 import canUseDom from '../../../utils/canUseDom';
 
 export default function isOnline(): boolean {
-  if (canUseDom() && typeof navigator.onLine !== 'undefined') {
+  if (canUseDom() && !isUndef(navigator.onLine)) {
     return navigator.onLine;
   }
   return true;

diff --git a/packages/hooks/src/useThrottleFn/index.ts b/packages/hooks/src/useThrottleFn/index.ts
@@ -3,12 +3,13 @@ import { useMemo } from 'react';
 import useLatest from '../useLatest';
 import type { ThrottleOptions } from '../useThrottle/throttleOptions';
 import useUnmount from '../useUnmount';
+import { isFunction } from '../utils';
 
 type noop = (...args: any) => any;
 
 function useThrottleFn<T extends noop>(fn: T, options?: ThrottleOptions) {
   if (process.env.NODE_ENV === 'development') {
-    if (typeof fn !== 'function') {
+    if (!isFunction(fn)) {
       console.error(`useThrottleFn expected parameter is a function, got ${typeof fn}`);
     }
   }
@@ -20,9 +21,9 @@ function useThrottleFn<T extends noop>(fn: T, options?: ThrottleOptions) {
   const throttled = useMemo(
     () =>
       throttle(
-        ((...args: Parameters<T>): ReturnType<T> => {
+        (...args: Parameters<T>): ReturnType<T> => {
           return fnRef.current(...args);
-        }),
+        },
         wait,
         options,
       ),

diff --git a/packages/hooks/src/useTimeout/index.ts b/packages/hooks/src/useTimeout/index.ts
@@ -1,11 +1,12 @@
 import { useEffect } from 'react';
 import useLatest from '../useLatest';
+import { isNumber } from '../utils';
 
 function useTimeout(fn: () => void, delay: number | undefined): void {
   const fnRef = useLatest(fn);
 
   useEffect(() => {
-    if (typeof delay !== 'number' || delay < 0) return;
+    if (!isNumber(delay) || delay < 0) return;
     const timer = setTimeout(() => {
       fnRef.current();
     }, delay);

diff --git a/packages/hooks/src/useUnmount/index.ts b/packages/hooks/src/useUnmount/index.ts
@@ -1,9 +1,10 @@
 import { useEffect } from 'react';
 import useLatest from '../useLatest';
+import { isFunction } from '../utils';
 
 const useUnmount = (fn: () => void) => {
   if (process.env.NODE_ENV === 'development') {
-    if (typeof fn !== 'function') {
+    if (!isFunction(fn)) {
       console.error(`useUnmount expected parameter is a function, got ${typeof fn}`);
     }
   }

diff --git a/packages/hooks/src/useVirtualList/index.ts b/packages/hooks/src/useVirtualList/index.ts
@@ -5,6 +5,7 @@ import useMemoizedFn from '../useMemoizedFn';
 import useSize from '../useSize';
 import { getTargetElement } from '../utils/domTarget';
 import type { BasicTarget } from '../utils/domTarget';
+import { isNumber } from '../utils';
 
 export interface Options<T> {
   containerTarget: BasicTarget;
@@ -25,7 +26,7 @@ const useVirtualList = <T = any>(list: T[], options: Options<T>) => {
   const [targetList, setTargetList] = useState<{ index: number; data: T }[]>([]);
 
   const getVisibleCount = (containerHeight: number, fromIndex: number) => {
-    if (typeof itemHeightRef.current === 'number') {
+    if (isNumber(itemHeightRef.current)) {
       return Math.ceil(containerHeight / itemHeightRef.current);
     }
 
@@ -36,14 +37,14 @@ const useVirtualList = <T = any>(list: T[], options: Options<T>) => {
       sum += height;
       endIndex = i;
       if (sum >= containerHeight) {
-          break;
+        break;
       }
     }
     return endIndex - fromIndex;
   };
 
   const getOffset = (scrollTop: number) => {
-    if (typeof itemHeightRef.current === 'number') {
+    if (isNumber(itemHeightRef.current)) {
       return Math.floor(scrollTop / itemHeightRef.current) + 1;
     }
     let sum = 0;
@@ -61,7 +62,7 @@ const useVirtualList = <T = any>(list: T[], options: Options<T>) => {
 
   // 获取上部高度
   const getDistanceTop = (index: number) => {
-    if (typeof itemHeightRef.current === 'number') {
+    if (isNumber(itemHeightRef.current)) {
       const height = index * itemHeightRef.current;
       return height;
     }
@@ -73,7 +74,7 @@ const useVirtualList = <T = any>(list: T[], options: Options<T>) => {
   };
 
   const totalHeight = useMemo(() => {
-    if (typeof itemHeightRef.current === 'number') {
+    if (isNumber(itemHeightRef.current)) {
       return list.length * itemHeightRef.current;
     }
     // @ts-ignore