GitLab

效果

• 自动提示内部函数的名称、参数类型和返回值类型
• 使用 methods 不存在的函数会报错提示
• 提示错误入参和返回值

函数声明

useMethods 新的函数声明修改为：

export function useMethods<T extends Record<string, (...args: any[]) => any>>(methods: T): { [K in keyof T]: (...args: Parameters<T[K]>) => ReturnType<T[K]> };

示例

const methods = useMethods({
  /** 获取暗文 */
  getPlaceholder(val: string) {
    return '请输入' + val;
  },
  /**
   * 获取暗文
   * @description
   * @param val 追加暗文
   * @return
   * @demo
   */
  getPlaceholder2(val: string) {
    return '请输入' + val;
  }
});

覆写 @lhb/hook 内的函数声明

因为 @lhb/hook 涉及项目较多，如果更新，项目内未正确使用 methods 的地方会有较多报错提示（如 调用 methods 内不存在的函数、入参错误等），所以暂不对其修改，采用单个项目内覆写的方式进行。

types/js-lib.d.ts 内追加

//... 

import * as originalLhbHook from '@lhb/hook';

// 覆写 @lhb/hook 内的 useMethods，使其能自动提示内部函数的名称、参数类型和返回值类型
declare module '@lhb/hook' {
  export type LhbHook = originalLhbHook.LhbRegexp; // 因为 `@lhb/hook` 内 `namespace lhbRegexp` 所以这里用 `LhbRegexp`，实际应该改为 `LhbHook`

  /**
   * 升级版 useCallback，满足绝大部分函数构建场景。解决 useCallback 多次声明函数导致的性能问题
   * warning： 不能替代useCallback 在 缓存初始值的场景
   * @description 覆写了 node_modules/@lhb/hook/index.d.ts 内的 useMethods 函数声明
   * @param  {any} methods 需要被优化的方法集群
   * @return {any} 新对象
   * @example
    const { handleChange, handleChange2 } = useMethods({
      handleChange() {
        setPage(1);
      },
      handleChange2() {
        this.handleChange();
      }
    })
   */
  export function useMethods<T extends Record<string, (...args: any[]) => any>>(methods: T): { [K in keyof T]: (...args: Parameters<T[K]>) => ReturnType<T[K]> };

}

顺带一提，@lhb/hook 内 namespace lhbRegexp 应该改为 namespace LhbHook。