账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    【umijs hook】ts 同一名称的泛型方法定义多次的作用是什么?
    45
    0
    import { DependencyList, useState, useMemo, useRef, useCallback } from 'react';
    import useUpdateEffect from '../useUpdateEffect';
    import useDebounceFn from '../useDebounceFn';
    
    import useAsync from '../useAsync';
    
    export interface ReturnValue<T> {
      loading: boolean;
      data?: T;
      value: any;
      onChange: (value: any) => void;
      cancel: () => void;
      run: () => void;
    }
    
    export interface Options {
      wait?: number;
    }
    
    function useSearch<Result>(
      fn: (value: any) => Promise<Result>,
      options?: Options,
    ): ReturnValue<Result>;
    function useSearch<Result>(
      fn: (value: any) => Promise<Result>,
      deps?: DependencyList,
      options?: Options,
    ): ReturnValue<Result>;
    function useSearch<Result>(
      fn: (value: any) => Promise<Result>,
      deps?: DependencyList | Options,
      options?: Options,
    ): ReturnValue<Result> {
      const _deps: DependencyList = (Array.isArray(deps) ? deps : []) as DependencyList;
      const _options: Options = (typeof deps === 'object' && !Array.isArray(deps)
        ? deps
        : options || {}) as Options;
    
      const [value, setValue] = useState<any>('');
    
      const { loading, data, run, cancel: cancelAsync } = useAsync<Result>(fn, [value, ..._deps], {
        manual: true,
      });
    
      const wait: number = useMemo(() => (_options.wait === undefined ? 300 : _options.wait), [
        _options.wait,
      ]);
    
      const debounce = useDebounceFn(
        () => {
          run(value);
        },
        [value],
        wait,
      );
    
      /* 依赖变化时,需要立即重新请求 */
      useUpdateEffect(() => {
        run(value);
      }, _deps);
    
      const cancel = useCallback(() => {
        /* 先取消防抖 */
        debounce.cancel();
        /* 再取消 async */
        cancelAsync();
      }, [cancelAsync, debounce.cancel]);
    
      /* 手动触发 */
      const trigger = useCallback(() => {
        run(value);
      }, [run, value]);
    
      return {
        data,
        loading,
        value,
        onChange: setValue,
        cancel,
        run: trigger,
      };
    }
    
    export default useSearch;
    

    截取部分源码 请问这个function useSearch 定义了多次的作用是什么?

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 巨木擎天 普通会员 1楼

      在UmiJS(umijs)中,泛型方法(TypeScript interfaces)是一种强大的特性,它允许我们在同一个类定义中使用不同类型的泛型方法,这些方法可以具有相同的名称,但是参数类型和返回类型可能会有所不同。以下是一些同一名称的泛型方法定义在ts中所可能的作用:

      1. 抽象方法:
      2. 泛型参数类型:泛型方法接收一个或多个泛型参数,每个泛型参数可以有不同的类型。例如,有一个名为User的类,其中包含一个名为getName的方法,其类型为string。如果我们想在该类中定义一个名为getUser的方法,该方法的参数类型可以是stringUser,例如:

      ```typescript interface User { getName(): string; }

      interface UserOptions { name?: string; }

      function getUser(user: UserOptions): User { // 使用默认名称(如果未提供) if (!user.name) { return new User(); }

      // 使用提供名称 return new User(user.name); } ```

      1. 继承方法:
      2. 泛型参数类型:泛型方法可以继承一个已定义的泛型方法,使其具有相同的名字和参数类型。例如,有一个名为Person的类,其中包含一个名为getName的方法,其类型为string。如果我们想在该类中定义一个名为getUser的方法,该方法的参数类型可以是string,也可以是Person,例如:

      ```typescript class Person { getName(): string { return 'John'; }

      getUser(user: Person): User { // 使用默认名称(如果未提供) if (!user.getName) { return new Person(); }

      // 使用提供名称
      return new Person(user.getName);
      

      } }

      function getUser(user: PersonOptions): User { // 使用提供名称(如果未提供) if (!user.name) { return new Person(); }

      // 使用默认名称和提供名称 return new Person(user.name, user); } ```

      1. 接口:
      2. 泛型参数类型:泛型方法可以接受一个或多个泛型接口作为参数,这些接口可以有不同的类型。例如,有一个名为Person的接口,其中包含一个名为getName的方法,其类型为string。如果我们想在该接口中定义一个名为getUser的方法,该方法的参数类型可以是string,也可以是Person,例如:

      ```typescript interface Person { getName(): string; }

      interface PersonOptions extends Person { name?: string; }

      function getUser(user: PersonOptions): User { // 使用默认名称(如果未提供) if (!user.name) { return new Person(); }

      // 使用提供名称 return new Person(user.name); } ```

      1. 多态:
      2. 泛型参数类型:泛型方法可以接受一个或多个泛型参数,并且可以根据这些参数的类型使用不同的代码来调用该方法。例如,有一个名为Person的类,其中包含一个名为getName的方法,其类型为string。如果我们想在该类中定义一个名为getUser的方法,该方法可以接受两个参数:一个Person对象和一个string类型,我们可以使用以下代码调用getUser方法:

      ```typescript function getUser(user: Person | PersonOptions, name: string): User { // 检查用户是否为Person对象 if (typeof user === 'object' && user instanceof Person) { return user.getName(); }

      // 如果用户未提供名称,则返回默认名称 if (!name) { return new Person(); }

      // 使用提供名称 return new Person(name); } ```

      这些作用包括:

      • 泛型方法定义在同一个类中,可以实现相同的名称和参数类型,但不同的返回类型。
      • 泛型方法继承自已定义的泛型方法,使得我们可以在不同类型的类中实现相同的功能,同时也可以继承已有的特性。
      • 泛型方法接受接口作为参数,可以让我们在多个类中共享一些通用的代码,而不需要在每个类中都定义相同的方法。
      • 泛型方法可以处理不同类型的参数,例如Person对象和PersonOptions对象,或者可以处理不同类型的数据,例如stringUser对象。

      总之,同一名称的泛型方法定义在ts中可以实现多种功能,可以减少代码重复,提高代码可维护性和复用性。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部